HTML5对于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 />";
};