HTML5的特点

1、HTML5新元素
提供了新的元素来创建更好的页面结构：
<aside>定义页面的侧边栏内容
<acticle>定义独立的内容区域
<details>用于描述文档或文档某个部分的细节
<figure>规定独立的流内容
<footer>定义section或document的页脚
<header>定义了文档的头部区域
<nav>定义导航链接的部分
<progress>定义任何类型的任务的进度
<section>定义文档中的节
<time>定义日期或时间

2、Canvas
用于图形的绘制，通过脚本来完成
<canvas>标签只是图形容器，必须使用脚本来绘制图形

<canvas id="mycanvas" width="200" height="100"></canvas>

使用js来绘制图像，所有的绘制工作必须在js内部完成：

<script>
var c=document.getElementById("mycanvas");
var ctx=c.getContent("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

3、html5地理定位
HTML5 Geolocation API用于获得用户的地理位置

<script>
var x=document.getElementById("demo");
function getLocation(){
	if(navigator.geolocation){
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		x.innerHTML="该浏览器不支持获取地理位置";
	}
}
function showPosition(position){
	x.innerHTML="Latitude"+position.coords.latitude+"Longitude"+position.coords.longitude;
}
</script>

4、html5 Audio（音频）、VIdeo(视频)
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

5、HTML5 Input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
6、HTML5 语义元素
HTML5提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

7、HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。