随着html5的发展，HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
html5相比较html新增加的功能有：
1、绘画的 canvas 元素
2、媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、语意化更好的内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search
我们就条其中一条来解释，就说一下绘画的 canvas 元素吧。
绘画canvas元素
<canvas>定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。
首先创建canvas元素，并规定元素的id、宽度和高度撒的：
<canvas id="myCanvas" width="200" height="100"></canvas>
然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。　　　　<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
下面的两行代码绘制一条直线：
cxt.moveTo(100,100);
cxt.lineTo(200,200);
下面的一行代码是画一个圆：
cxt.arc(70,18,15,0,Math.PI*2,false);
这些属性值分别对应的是什么，70,18分别是X轴和Y轴，15是这个圆的半径，0是角度,Math.PI*2是圆周率，false代表顺时针而true是逆时针。
颜色的渐变效果也是可以实现的：
<script type="text/javascript">
　　var c=document.getElementById("myCanvas");
　　var cxt=c.getContext("2d");
　　var grd=cxt.createLinearGradient(0,0,175,50);
　　grd.addColorStop(0,"#FF0000");
　　grd.addColorStop(1,"#00FF00");
　　cxt.fillStyle=grd;
　　cxt.fillRect(0,0,175,50);
</script>
还有一些其他效果:
曲线 quadraticCurreTo
字体 fillText
通过这个例子是不是大大的减少可HTML的代码量？
这个就是html5的强大之处，还有其他的功能就不一一介绍了。
大家可以到华清远见问一下！

没兴趣