HTML5的使用
HTML5的使用
HokoriHTML5对于HTML4，新增了一些组件，比如video组件、audio组件、拖放组件以及画布组件等等。
1）video和audio组件
在之前的浏览器中，都是用的FLASH来进行视频播放，而有了html5之后，；便可以直接使用html5进行视频播放了。
<video id="video1" controls='controls' autoplay="autoplay" loop="loop" preload="auto">
<source src="src/video/v1.mp4" type='video/mp4'/>
</video>
其中source标签可以不用，把src直接写在video标签上，当然，如我上面的写法时，可以有多个source标签放在里面，不过video只会显示第一个可以识别的样式，video有很多属性可以用来操作视频，例如autoplay、controls、loop、preload等
autio标签和video标签大致相同，就不介绍了。
2）拖放
拖放是H5标准的组成部分，使对象被抓取之后可以拖到另一个位置。而如果想要拖放，必须让元素允许拖放，draggable属性便是用来允许元素拖放的
在拖动时，主要分为三个部分，拖动开始，拖动，放置，而这三个部分都给了一个处理函数
首先，拖动开始的处理函数是ondragstart(event)，通过event可以判断获取当前拖动的元素的各种属性
然后拖动之后，决定要把元素放在哪里便是由ondrageover(event)来进行操作，
拖动过程中，会不断进行防止，这时使用ondrop(event)函数，来处理drop事件
3)H5还有一个最主要的区别就是可以用canvas在网页上进行图形绘制，如果想要在网页上进行图形绘制，需要在html上放置一个canvas标签，然后使用javascript对其进行绘制即可。
现贴上一部分绘制线段的代码：
var cxt=$('#mycanvas')[0].getContext('2d');
cxt.moveTo(20,20);
cxt.lineTo(20,30);
cxt.lineTo(30,40);
cxt.strokeStyle='#FF0000';
cxt.stroke();
cxt.beginPath();
cxt.moveTo(100,50);
cxt.lineTo(150,150);
cxt.strokeStyle="#111FFF";
cxt.lineWidth="5";
cxt.stroke();
cxt.beginPath();
var grd=cxt.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
cxt.arc(50,50,50,0,2*Math.PI);
cxt.lineWidth="1";
cxt.fillStyle=grd;
cxt.fill();
cxt.stroke();
其中moveTO是移动到某个位置，lineTo是画线到某个位置,fillStyle设置填充的样式，fill进行填充，stroke开始画线，beginPath重新开始一条路径，arc绘制弧线，linewidth设置线的宽度
4)H5支持svg格式，SVG格式是指的可伸缩矢量图形，这是一种定义用于网格的基于矢量的图形，它是运用的XMl格式来定义图形的，
与其他图像格式相比，SVG可以通过文本编辑器来进行创建和修改，并且其是可伸缩的。
5)H5提供了两种客户端存储数据的方法：localstorage和sessionstorage，其中localstorage是没有时间限制的数据存储，sessionstorage是针对一个session的数据存储。
localStorage.lastname="Smith";
document.write(localStorage.lastname);
localStorage.lastname="AAA";
document.write(localStorage.lastname);
console.log(localStorage);
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
这些storage的使用方法和普通的storage一样，sessionstorage在用户关闭浏览器之后会被删除，而localstorage则会被永久保存。
6)H5应用程序缓存，通过创建cache manifest文件，可以对网页进行缓存。
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
其中CACHE MANIFEST列出了离线缓存的清单，NETWORK列出了需要联网的文件，FALLBACK列出了无法连接互联网时的替代规则
7）web worker是后台独立运行的javascript，不会影响页面性能
8）H5服务器发送事件允许网页获得来自服务器的更新(server-sent event)
首先要判断浏览器是否支持，因此使用typeof(EventSource)!=="undefined"对其进行判断，然后才是获取服务器的更新
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
