首先要检查你的浏览器是否支持HTML5，主要的JS代码如下：

function check_html5()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h364Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h364Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h364Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}

一、HTML5下的视频引用方式

通过以上的检查之后，笔者用火狐测试了这个功能。视频的元素是 video ，video 元素支持两种格式的视频：

IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg√√√MPEG 4√√

其中 ogg 是指带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 是指 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

代码如下：

<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>

以上代码的意思是：引用一段视频，宽320 高240 controls意思是带有视频控制 source 是视频地址，video元素允许有多个source元素，浏览器选择自己识别的第一个视频格式

video元素属性如下：

属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。

剩余这些属性读者可以自己测试看看，注意选择一个支持性好的浏览器测试哦。

二、HTML5下的音频

至目前为止网上大多数的音频播放器仍然是FLASH，在HTML5中可以用audio元素来代替它，audio 元素能够播放声音文件或者音频流。audio支持的音频格式如下：

IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis&radic;&radic;&radic;MP3&radic;&radic;Wav&radic;&radic;&radic;

在页面中引用方式如下：

<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.</audio>

大家可以看到和视频的引用方式没有太大的区别，这个就不用解释了吧，audio元素的其他属性如下：

属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的音频的 URL。

三、HTML5下的绘制图形

在HTML5中可以使用 canvas 结合 javascript 绘制图形，示例代码如下：

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

这段代码本身并不能画图，需要通过以下的JS代码来画图

<scripttype="text/javascript">varc=document.getElementById("myCanvas");//获取ID为myCanvas的元素varcxt=c.getContext("2d");//创建context对象，context对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。cxt.fillStyle="#FF0000";//设置context对象的fillStyle属性,即是背景颜色cxt.fillRect(0,0,150,75);//调用fillRext方法，创建矩形图像，从坐标（0,0）画至坐标(150,75)</script>

如果需要了解过多的context对象的话去搜索下关于这个对象的其他方法吧。

四、客户端数据存储

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

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

在HTML5出来之前，都是由COOKIE来做这些工作，但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。不过IE和火狐都有其他的客户端存储数据方式，IE有它的userdata 火狐有它的 globalStorage ，但是有了HTML5的这两种新的存储方式，其他一切存储方式都是浮云。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。当然了这种请求方式和userdata globalStorage都差不多的，请求要快的多。

关于localStorage方法：

localStorage 方法存储的数据没有时间限制。

测试代码如下

<script>

if(localStorage.count)localStorage.count = Number(localStorage.count)+1;
else localStorage.count = 1;
alert(localStorage.count)

</script>

关于sessionStorage方法：

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除

测试代码如下：

if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
alert(sessionStorage.pagecount)

我是在火狐下测试的，刷第一次的时候是1，如果不清除COOKIE的情况下再刷，第二次就是2，但是清除COOKIE之后再刷，结果会是1，难道这些存储方式还和COOKIE还有藕断丝连的关系？