本文共 5657 字，大约阅读时间需要 18 分钟。
写在前面
HTML5出来已经很久了，然而由于本人不是专业搞前端的，只知道有这个东西，具体概念有点模糊（其实就是一系列标准规范啦）；因此去年（2015.11.09），专门对HTML5做了个简单的小结，今天正好看到，整理一下放到我的博客，以免丢失。有错误请指正。
另外，转载请注明链接，虽然内容比较简单，但也是花了不少时间整理的。
什么是HTML5
HTML5发展历史
- 2004年，WHATWG（网页超文本技术工作小组）提出草案Web Applications 1.0，即HTML5的前身；
- 2007年，W3C同意采纳HTML5作为标准，并成立了新的HTML工作团队；
- 2014年10月28日，W3C正式发布HTML5.0推荐标准；
- 2016年底前，计划发布HTML 5.1；
- 未来，待HTML5.1公布后，工作组会重复HTML5.1步骤再搞一个新的HTML5.2，继续完善、丰富功能。
如下表格为HTML 5标准演进历程：
| 2012 plan | 2012 | 2013 | 2014 | 2015 | 2016 |
| HTML 5.0 | 候选版 | 征求评价 | 推荐标准 | ||
| HTML 5.1 | 第一工作草案 | 最后召集 | 候选版 | 推荐标准 | |
| HTML 5.2 | 第一工作草案 |
HTML5详细介绍
HTML5 视频 & 音频
直到现在，仍然不存在一项旨在网页上显示视频、音频的标准，大多数通过插件（比如 Flash）来显示的；
如下，为视频和音频的效果图:
HTML5 Canvas & SVG
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
如下，为效果图：
可伸缩矢量图形 (Scalable Vector Graphics)
Canvas & SVG 的常见应用
使用canvas和SVG可以实现很多小应用，特别是canvas，如下图例子：
HTML5 可编辑内容 & 拖放
HTML5 的拖放将会把与用户交互带向另一个等级，并将会对如何设计用户交互产生重大影响。
主要的事件函数：Ondragstart()、Ondragover()、Ondrop()；
如下为一个代码示例，将一个div拖放到另一个div里：
HTML5 Web存储
- Cookie会被附加在每个HTTP请求中，无形中增加了流量。
- 由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题。（除非用HTTPS）
- Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。
- 没有额外的的请求头部数据
- 丰富的方法去设置、读取、移除数据
- 默认5MB存储限制
- localStorage
存储的数据没有时间限制；
- sessionStorage
当用户关闭浏览器窗口后，数据会被删除
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能（JS多线程工作解决方案）。
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。
优势：异步执行复杂计算，不影响页面的展示
如下为一个求和的代码示例：
demo_workers.js文件，其中的postMessage() 方法 ，用于向 HTML 页面传回一段消息。
var i=0;function timedCount(){ i=i+1; postMessage(i); setTimeout("timedCount()",500);}timedCount(); HTML 5 服务器发送事件
服务端代码：
public class SSE extends ActionSupport { private InputStream sseStream; public InputStream getSseStream() { return sseStream; } public String handleSSE() { System.out.println("Inside handleSSE() "); String result = "data: "+new Date().toString() + "\n\n"; sseStream = new ByteArrayInputStream(result.getBytes() ); System.out.println("Exiting handleSSE() "); return SUCCESS; }} text/event-stream sseStream
客户端代码：
HTML 5 表单增强功能
- –url
- –number
- –range
- –Date pickers (date, month, week, time, datetime, datetime-local)
- –search
- –color
下图为各个input元素的效果图：
- –datalist
- –keygen
- –output
| Input type | IE | Firefox | Opera | Chrome | Safari |
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | No | No | 10.0 | 3.0 | 4.0 |
| form | No | No | 9.5 | No | No |
| form overrides | No | No | 10.5 | No | No |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | No | No | 9.5 | No | No |
| min, max and step | No | No | 9.5 | 3.0 | No |
| multiple | No | 3.5 | No | 3.0 | 4.0 |
| novalidate | No | No | No | No | No |
| pattern | No | No | 9.5 | 3.0 | No |
| placeholder | No | No | No | 3.0 | 3.0 |
| required | No | No | 9.5 | 3.0 | No |
HTML5语义化标记
更多HTML 5标准
HTML5实例分析
飞翔的小鸟
基于Phaser（开源的HTML5 2D游戏开发框架），主要需要编写以下三个函数：
Preload函数（执行一次）：
- 加载资源（背景、图片等资源）
Create函数（执行一次）：
- 给鸟一个向下的重力，不受控制的时候自动下落
- 添加键盘空格事件，按下空格时改变小鸟坐标
- 创建墙壁事件，每隔1.5s，出现一排墙壁往左移动（中间随机隔3块）
Update函数（每帧执行）：
- 判断是否飞出边界
- 判断是否碰到墙壁
效果图如下：
柱状图表
主要步骤：
- 利用canvas画出图形
- 定义鼠标点击事件（获取鼠标坐标来区分点击的目标），$(canvas).on("click",mouseClick);
- 定义鼠标hover事件（获取鼠标坐标来区分hover的目标），$(canvas).on("mousemove",mouseMove);
效果图：
HTML5发展展望
