本文参考：HTML5-MDN
HTML5是HTML标准的最新演进版本。 这个术语代表了两个不同的概念：
- 它是一套新的HTML语言版本，包括了新的元素，属性和行为规范；
- 它包含一系列配合新语言的新技术。
这套版本新在哪里？
新特性分类：
- 语义：能够让你更恰当地描述你的内容是什么。
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
- 样式设计: 让作者们来创作更加复杂的主题吧！
1. 语义
语义包括：
a. 语义-内容元素
大部分人认为，语义就是那套新标签：header、footer、nav、main、aside、section、article……
单纯把它们写出来跟div并没有区别。这也是为何初期可以用这样一段代码解决低版本浏览器不认识新标签的问题：
<!--[if lt IE9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
更好的方法是使用Google提供的腻子脚本：
// 由Google提供：
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
// 国内镜像：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
b. audio和video
新标签配合多媒体media对象
c. 表单
新的input-type值和output元素
d. 改进的iframe
使用 sandbox， seamless， 和 srcdoc 属性，作者们现在可以精确控制 <iframe> 元素的安全级别以及期望的渲染。
e. MathML
允许直接嵌入数学公式。不过写起来相当繁琐。。。
语义的优势
语义可以帮助开发者和搜索引擎跨语言的了解当前网页的结构、主旨，也可以帮助浏览器以更好更正确的方式提供无障碍辅助功能。
2. 连通性
连通性特性需要服务器端的配合。
a. WebSocket
WebSocket 教程 - 阮一峰的网络日志
WebSocket协议解析
WebSocket是一个新协议，跟HTTP同级。使用WebSocket允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
主要特点：
- 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
- 建立在** TCP 协议**之上，服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
- 数据格式比较轻量，性能开销小，通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
ws://example.com:80/some/path
协议之间的关系
最简单的例子：
var ws = new WebSocket("wss://echo.websocket.org");
// 链接开启
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
// 收到推送
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
// 关闭连接
ws.onclose = function(evt) {
console.log("Connection closed.");
};
b. Server-sent events 使用服务器发送事件-MDN
此内容中有个message是官方提供的跨域共享Web Storage的方法。
c. WebRTC
WebRTC中的RTC是实时通信的简称，这是一种支持在浏览器客户端之间语音/视频交流和数据分享的技术。WebRTC作为一项标准,使得所有浏览器无需安装插件或第三方软件，就可以点对点地分享应用数据和进行电话会议。
WebRTC组件是通过JavaScript APIs获得的。目前正在开发中的APIs包括：网络流API(能够提供音频和视频)，点对点连接API(允许两个或更多用户通过浏览器进行联系)。同样在开发中的还有数据API，能够让浏览器在实时游戏，文字聊天，文件传输和其他应用中与其他类型数据进行交流。
3. 离线 & 存储
离线事件：
HTML5为移动端做了更多扩展。新API navigator.onLine可以返回一个Boolean类型告知当前设备是否联网。
存储：
LocalStorage & SessionStorage（Web Storage API-MDN），加上原有的Cookie，你几乎可以在网页上做一个简单的单机应用了。
还不够？看看IndexedDB。这个API用于客户端存储大量结构化数据，给你提供了前端的简单数据库。
甚至还有FileReader，提供了一种读取用户本地文件的方法。
4. 多媒体
a. audio/video
终于摆脱flash插件了～
顺便提一下<source>，可以给一个media对象提供多个数据源以供挑选。
b. WebRTC
这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
c. 使用 Camera API
d.Track 和 WebVTT
<track> 元素支持字幕和章节。WebVTT 一个文本轨道格式。
5. 2D/3D 绘图 & 效果
canvas、svg、和WebGL。
WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 <canvas> 元素中的 API 给 Web 带来了 3D 图像功能。
6. 性能 & 集成
Web Workers
能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。XMLHttpRequest Level 2
允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。即时编译的 JavaScript 引擎
新一代的 JavaScript 引擎功能更强大，性能更杰出。History API
允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。conentEditable 属性：把你的网站改变成 wiki !
HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。拖放
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。HTML 中的焦点管理
支持新的 HTML5activeElement和hasFocus属性。基于 Web 的协议处理程序
你现在可以使用navigator.registerProtocolHandler()方法把 web 应用程序注册成一个协议处理程序。requestAnimationFrame
允许控制动画渲染以获得更优性能。全屏 API
为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
下面这个例子提供了不同浏览器之间的兼容性代码：
var elem = document.getElementById("myvideo");
elem.addEventListener('click',function () {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
指针锁定 API
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。在线和离线事件
为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。
还是navigator.online。
7. 设备访问
这部分内容主要为了移动端的使用：
-
使用 Camera API
允许使用和操作计算机的摄像头，并从中存取照片。 -
触控事件
对用户按下触控屏的事件做出反应的处理程序。 -
使用地理位置定位
让浏览器使用地理位置服务定位用户的位置。 -
检测设备方向
让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。 -
指针锁定 API
允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
8. 样式
- 新的背景样式特性
- 更精美的边框
- 为你的样式设置动画
- 排版方面的改进
- 新的展示性布局
CSS 弹性布局 flex
以前总说不兼容，现在上手就一句display: flex;哈哈。
CSS 灵活方框布局-MDN
Flex 布局教程：语法篇 - 阮一峰的网络日志
还有一个好玩的flex游戏教程：FLEXBOX FROGGY
flex布局绝对是前端开发的大救星！另外期待Grid布局早日普及～
CSS 多栏布局 column
CSS 多栏布局-MDN
多栏布局可以自动帮你用文本填充页面宽度，像报纸分栏那样。
Can I Use Multiple column layout?
