1.语义标签
语义化标签使得页面的内容结构化，见名知义。
2. 增强型表单
HTML5拥有多个新的表单输入类型，表单元素和表单属性，提供了更好的输入控制和验证。
- 表单输入类型：color,date,email,month,time,search等等
- 表单元素：datalist,keygen,output等等
- 表单属性：placeholder,required,pattern等等
3. 视频和音频
HTML5提供了播放音频文件的标准，即使用
4. Canvas
提供画布用来通过脚本绘制图形，这块比较大，不在这里展开描述、
5. SVG
SVG是指可伸缩的矢量图形，是一种使用XML描述2D图形的语言。
6. 地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
7. 拖放API
在HTML5中，提供了直接支持拖放操作的API。新的拖放API已经支持浏览器与其他应用程序之间的互相拖动。相比以前的使用mousedown、mouseover、mouseup实现的拖放，新的API大大简化了拖放的代码。
（1）首先把要拖放的对象的元素的draggable属性设为true(draggable=”true”)。另外对和元素(指定href属性)默认允许拖放。
（2）拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
源对象可以触发的事件：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
整个拖动过程的组成： dragstart-1 + drag-n + dragend-1
目标对象可以触发的事件：
dragenter：拖动着进入
dragover：拖动着悬停
dragleave：拖动着离开
drop：释放
整个拖动过程的组成1： dragenter-1 + dragover-n + dragleave-1
整个拖动过程的组成2： dragenter-1 + dragover-n + drop-1
dataTransfer：用于数据传递的对象：
在拖动源对象事件中使用e.dataTransfer属性保存数据：
e.dataTransfer.setData( k, v )
在拖动目标对象事件中使用e.dataTransfer属性读取数据：
var value = e.dataTransfer.getData( k )
这里举一个比较全面的例子：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
margin: 0 auto;
}
.dropzone {
box-sizing: border-box;
width: 400px;
height: 60px;
background: blueviolet;
margin: 10px auto;
padding: 20px;
}
</style>
</head>
<body>
<!--dropzone:表示可释放的区域-->
<div class="dropzone">
<!--可拖动的元素 draggable="true"-->
<div id="draggable" draggable="true">
来拖动我呀
</div>
</div>
<div class="dropzone"></div>
<script>
/*储存拖动的目标*/
var dragged;
/*开始拖动的时触发，只触发一次*/
document.addEventListener("dragstart", function (event) {
console.log("开始拖动了");
// 保存被拖动的元素对象
dragged = event.target;
event.target.style.opacity = .3;
}, false);
/* 拖动的过程中触发，只要元素在拖动，会一直重复触发 */
document.addEventListener("drag", function (event) {
console.log("正在被拖动")
}, false);
/*进入另外一个元素的区域时触发*/
document.addEventListener("dragenter", function (event) {
// 判断当前的目标是否进入了dropzone区域
if (event.target.className == "dropzone") {
console.log("进入潜在的目标区域");
event.target.style.background = "gold";
}
}, false);
/* 在潜在目标区域的上方的时候会重复触发 */
document.addEventListener("dragover", function (event) {
console.log("在潜在的目前区域上方");
//必须阻止默认行为，否则的后面的drop事件不会触发
event.preventDefault();
}, false);
/*松开鼠标拖放结束。*/
document.addEventListener("dragend", function (event) {
console.log("拖放结束");
event.target.style.opacity = "1";
}, false);
/*从潜在目标元素上方离开的时候触发*/
document.addEventListener("dragleave", function (event) {
console.log("离开目标元素");
// 因为进入一个元素的时候更改了目标元素的背景，所以离开的时候要重置背景
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
}, false);
/*释放拖动元素的时候触发,这个事件是在dropend事件触发前触发。*/
document.addEventListener("drop", function (event) {
console.log("元素被放下");
event.preventDefault();
if (event.target.className == "dropzone") {
event.target.style.background = "";
//把拖动元素从他原来的父节点中移除。
dragged.parentNode.removeChild(dragged);
//插入到目标元素中。
event.target.appendChild(dragged);
}
}, false);
</script>
</body>
</html>
8. Web Worker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。 您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
9. Web Stroage
localStroage和sessionStroage，具体内容见另一篇博客。
10. WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
单工：数据传输只允许在一个方向上的传输，只能一方来发送数据，另一方来接收数据并发送。例如：对讲机
半双工：数据传输允许两个方向上的传输，但是同一时间内，只可以有一方发送或接受消息。例如：打电话
全双工：同时可进行双向传输。例如：websocket
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
<body>
<div>
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
<script>
function WebSocketTest() {
if ("WebSocket" in window) {
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:3000");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function () {
// 关闭 websocket
alert("连接已关闭...");
};
}
else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</body>