HTML5技术要点
1.HTML5视频
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
注:control 属性供添加播放、暂停和音量控件。<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
注:video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
2.音频和视频其他属性一样<audio>
3.HTML5拖放
浏览器支持:

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//设置被拖数据的数据类型和值
}

function drop(ev)
{
ev.preventDefault();//阻止对元素的默认处理方式(默认地，无法将数据/元素放置到其他元素中)
var data=ev.dataTransfer.getData("Text");//获得被拖的数据,该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目标元素）中
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>

<br />

<img id="drag1"
src="/i/eg_dragdrop_w3school.gif"
draggable="true" //为了使元素可拖动，把 draggable 属性设置为 true
ondragstart="drag(event)"//拖动时调函数,它规定了被拖动的数据
/>

</body>
</html>
4.HTML5画布
创建Canvas元素

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");//是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
...
</script>
5.HTML5 内联 SVG
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
6.HTML5地理定位

主要代码如下:

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
function showError(error)//显示错误信息
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

7.HTML5web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储
localStorage :
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>
sessionStorage:
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
}
</script>
8.HTML5应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
注:
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

实例 - 完整的 Manifest 文件

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
# 2012-02-21 v1.0.0
/theme.css //会自动缓存这三个
/logo.gif
/main.js

NETWORK: - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
login.asp
-----------
* //指示所有其他资源/文件都需要因特网连接

FALLBACK: - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。用404代替html5
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

HTML5技术要点的更多相关文章

  1. 基于HTML5技术的电力3D监控应用（二）

    上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...

  2. 基于HTML5技术的电力3D监控应用（一）

    最近参与了国网计量中心的四线一库自动化检定系统的项目开发,团队封闭开发了大半年终于快到尾声了,整个项目过程实在非常累,我的mentor杨杨老师是这样描述的:累的不想说话了.我估计是我太渴望新知识,整天 ...

  3. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  4. React.js 常用技术要点

    最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...

  5. K2 Blackpearl开发技术要点(Part2)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685282.html K2 Blackpearl开发技术要点(Part2)  

  6. K2 Blackpearl开发技术要点(Part1)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685260.html K2 Blackpearl开发技术要点(Part1) 预知后事如何,请 ...

  7. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  8. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  9. [Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

随机推荐

  1. Netty 零拷贝（一）NIO 对零拷贝的支持

    Netty 零拷贝(二)NIO 对零拷贝的支持 Netty 系列目录 (https://www.cnblogs.com/binarylei/p/10117436.html) 非直接缓冲区(HeapBy ...

  2. mysql 导入导出摘要

    1.导入by数据文件. mysql>load data infile '文件路径' into table 表名 fields terminated by '字段分隔符' lines termin ...

  3. ubuntu系统下安装pyspider：搭建pyspider服务器新手教程

    首先感谢“巧克力味腺嘌呤”的博客和Debian 8.1 安装配置 pyspider 爬虫,本人根据他们的教程在ubuntu系统中进行了实际操作,发现有一些不同,也出现了很多错误,因此做此教程,为新手服 ...

  4. head first 设计模式文摘

    1 欢迎来到设计模式世界:设计模式入门 2 让你的对象知悉现况:观察者模式 3 装饰对象:装饰者模式 4 工厂模式:烘烤OO的精华 5 单件模式:独一无二的对象 6 命令模式:封装调用 7 适配器模式 ...

  5. struct的使用

    编写一个学生struct,成员有学号(id).姓名(name).成绩(5门课程),随机生成多个学生的学号.姓名和成绩存储到结构体数组.再根据总分进行排名并输出学生的信息和总分. stu.h #ifnd ...

  6. flask_hello world

    对于flask框架的学习全部借鉴于http://www.pythondoc.com/flask-mega-tutorial/index.html 在学习的过程中,我使用的是Pycharm IDE,Py ...

  7. java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing，

    缺少一个java包,然后我在这个网址找到了http://central.maven.org/maven2/org/hamcrest/hamcrest-core/1.3/hamcrest-core-1. ...

  8. NATAPP打穿内网

    前一篇博文写了ngrok作为内网穿透工具现在开始开始学习另外一种内 网穿透natapp(他也是基于ngrok的一种高速内网穿透服务)多的介绍就 不说了,开始进入正题. 第一步:先登录natapp官网( ...

  9. （最短路 Floyd）Cow Contest --POJ--3660

    链接: http://poj.org/problem?id=3660 思路: 1.  1->2->3==1->3 2.  记录每次的比赛人员 3.  每个人只能跟他序号不同的人比赛, ...

  10. （网络流 模板）A Plug for UNIX -- poj -- 1087

    链接: http://poj.org/problem?id=1087 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#probl ...