先来个目录，如下：
?什么是HTML5
?HTML5发展历史
?HTML5详细介绍
?视频/音频 、画布 & SVG 、可编辑内容 & 拖放、Web存储、Web Worker 、服务器发送事件、表单增强功能、语义化标记、更多HTML5标准
?HTML5实例分析
?飞翔的小鸟
?柱状图
?HTML5发展展望
?参考资源
什么是HTML5
简单地说，HTML5就是一系列用来制定现代富Web内容的相关技术的总称。
HTML5 ≈ HTML5核心规范 + CSS 3 + JavaScript； 其中HTML5和CSS主要负责界面，JavaScript负责逻辑处理；
目的：减少互联网富应用（RIA )对Flash、Silverpght、Java Applet等的依赖，并且提供更多能有效增强网络应用的API。
如下图为典型的RIA（Rich Internet Apppcations）网页，包含一些图表，视频，游戏等：
HTML5发展历史
2004年，WHATWG（网页超文本技术工作小组）提出草案Web Apppcations 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 | 第一工作草案 |
Tips：
Q：什么是WHATWG？
A：Mozilla基金会与Opera软件公司于2004年6月向W3C提交了一份立场文件遭否决， Mozilla、Opera和Apple便自立门户成立了WHATWG（网页超文本技术工作小组），同时也提出Web Apppcations 1.0。
Q：HTML5.0与HTML5.1的区别？
A：5.1是5.0的超集，5.0中只包含了稳定特性，5.1中包含了5.0中省略掉的不稳定特性和其他新特性；目的：为了尽快及时完成HTML5，W3C舍弃一些不稳定、有争议的元素，等到后续的5.1版本再考虑。
HTML5详细介绍HTML5 视频 & 音频
直到现在，仍然不存在一项旨在网页上显示视频、音频的标准，大多数通过插件（比如 Flash）来显示的；
但是，有了HTML5，我们可以不依赖任何插件，简单的使用video和audio标签来实现音视频的播放，如下代码：
XML/HTML Code复制内容到剪贴板
<video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
XML/HTML Code复制内容到剪贴板
<audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
如下，为视频和音频的效果图:
Tips：
1、HTML5 <video> 、< audio >元素拥有方法、属性和事件。可以用js动态控制视频 & 音频播放暂停等动作；
2、Video 、audio元素允许多个 source 元素。source 元素可以链接不同的文件。浏览器将使用第一个可识别的格式
PS：YouTube默认就是使用HTML5播放器，可以登录其官网www.youtube.com查看源码，如下:
HTML5 Canvas & SVG
画布Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
XML/HTML Code复制内容到剪贴板
<canvas id="myCanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ccxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.pneTo(150,50);
cxt.pneTo(10,50);
cxt.stroke();
</script>如下，为效果图：
可伸缩矢量图形 (Scalable Vector Graphics)
XML/HTML Code复制内容到剪贴板
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
Canvas & SVG 的常见应用
使用canvas和SVG可以实现很多小应用，特别是canvas，如下图例子：
HTML5 可编辑内容 & 拖放
Contenteditable全局属性
Contenteditable可用于实现网页编辑器，当前很多网页编辑器都用这个属性实现，如下图：
Drag 和 drop
HTML5 的拖放将会把与用户交互带向另一个等级，并将会对如何设计用户交互产生重大影响。
主要的事件函数：Ondragstart()、Ondragover()、Ondrop()；
如下为一个代码示例，将一个p拖放到另一个p里：
JavaScript Code复制内容到剪贴板
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
HTML5 Web存储
在讲HTML5 的Web存储之前，先来说说cookie劣势，主要有以下三点：
Cookie会被附加在每个HTTP请求中，无形中增加了流量。
由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题。（除非用HTTPS）
Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。
再来看看HTML5 Web存储的优势：
没有额外的的请求头部数据
丰富的方法去设置、读取