概述：
HTML5做为最新的WEB前端标准，虽然全面的普及还需要一段时间，但了解下它的基本情况还是必须地！
本文简要介绍学习过程中了解到的几个技术点。
注：请使用支持HTML5的浏览器浏览本页面！点击下面的按钮检查你的浏览器是否支持HTML5！
正文：
基本HTML5文档格式
<!doctype html> <html> <head> <meta charset="gb2312" /> </head> <body> </body> </html>
是不是很简洁，如果用HTML4，你需要这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html>
新的语义化标签
| <footer> | 定义 section 或 page 的页脚 |
| <header> | 定义 section 或 page 的页眉 |
| <nav> | 定义导航链接 |
| <section> | 定义文档中的节 |
| <article> | 定义外部的内容 |
| <aside> | 定义article 以外的内容 |
| …… |
更多内容请访问：http://www.w3school.com.cn/html5/html5_reference.asp
新的Input类型
| 电子邮件 | |
| Url | 网址 |
| Number | 数字 |
| Date pickers | 日期 |
| Color | 颜色 |
来一个DEMO：http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
Canvas
顾名思义，这是一个画布，原来做WPF、Silverlight时经常用到，没想到在HTML中也可以使用了！这个东西用的好的话，可以做出好多原来需要使用FLash、Silverlight做出的效果。
先看一个DEMO：http://hakim.se/experiments/html5/blob/03/
怎么样，帅吧！没有HTML5之前，只能用Flash或者Silverlight来完成这个，现在用HTML5 + Javascript也可以完成的这么好！
我自己也写了一个简单的示例：
HTML代码：
<canvas id="myCanvas" class="myCanvas" width="400" height="100"></canvas> <input id="btnBeginAnimate" type="button" value="BeginAnimate" />
Javascript代码：
var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#A1C5D7"; cxt.beginPath(); cxt.arc(20, 18, 15, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); $("#btnBeginAnimate").click(BeginAnimate); function BeginAnimate() { setInterval(animateShape, 100); } var x = 20; function animateShape() { cxt.clearRect(0, 0, 400, 300); cxt.beginPath(); cxt.arc(x, 18, 15, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); x += 3; }
最后效果如下：
OK!简单介绍到这里！