目录
- 一、HTML5概要
- 1.1、为什么需要HTML5
- 1.2、什么是HTML5
- 1.3、HTML5现状及浏览器支持
- 1.4、HTML5特性
- 1.5、HTML5优点与缺点
- 1.5.1、优点
- 1.5.2、缺点
- 1.6、HTML5效果展示
- 1.7、HTML5学习与开发工具
- 1.7.1、基础要求
- 1.7.2、开发工具
- 1.8、HTML5语法规则与文档声明
- 1.8.1、语法规则
- 1.8.2、文档声明
- 1.8.2、文档声明
- 二、废弃的标签
- 三、新增的标签
- 3.1、新增的结构标签
- 3.2、新增加其它元素
- 3.2.1、meter
- 3.2.2、time
- 3.2.3、progress
- 3.2.4、datalist
- 3.3、多媒体标签
- 3.3.1、video视频标签
- 3.3.2、audio音频标签
- 3.3.3、embed元素
- 3.1、新增的结构标签
- 四、HTML5兼容性
- 4.1、兼容性测试
- 4.2、HTML5向下兼容
- 4.2.1、兼容测试
- 4.2.2、html5shiv
- 4.2.3、Modernizr
- 五、示例下载
一、HTML5概要
1.1、为什么需要HTML5
HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能Flash被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很小，这并不符合一个好产品的演进规则。
1.2、什么是HTML5
HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。HTML5是HTML最新版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
1.3、HTML5现状及浏览器支持
大部分主流浏览器已经支持HTML5，但是各个浏览器支持的方式以及语法有所差异性。支持Html5的浏览器包括Firefox（火狐浏览器），IE9 及其更高版本，Chrome（谷歌浏览器），Safari，Opera等现代浏览器。
支持得分：
如果想了解更多请看本文的兼容性那一节的内容。
PC端（总分555分）：
平板（总分555分）：
移动（总分555分）：
1.4、HTML5特性
HTML5 八个特性类别对应的8个Logo 语义网、离线&存储、设备访问、通信 多媒体、图形和特效、性能和集成、呈现（CSS3）
1.4.1. 语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的。
1.4.2. 本地存储特性（Class: OFFLINE & STORAGE）
HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI
1.4.3. 设备访问特性 (Class: DEVICE ACCESS)
为移动开发而生。重力感应、全球地理定位、麦克风、摄像头
1.4.4. 连接特性（Class: CONNECTIVITY）
WebSocket、Server-Sent Events实现双向连接，消息推送
1.4.5. 网页多媒体特性( Class: MULTIMEDIA）
支持网页端的Audio、Video等多媒体功能。
1.4.6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
这一招将Flash打败，图形增强，SVG，Canvas，WebGL，2D/3D游戏和页面视觉特效。
1.4.7. 性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading，HTML5增加WebWorker、XMLHttpRequest2
1.4.8.呈现（CSS3/styling)
除了DOM接口，HTML5增加了更多样化的应用程序接口（API）：
HTML5Canvas API：有关动态产出与渲染图形、图表、图像和动画的API HTML5音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件 离线存储数据库（离线网络应用程序） 编辑 拖放 跨文档通信 通信／网络 Communication APIs：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest Level 2。 浏览历史管理 MIME和协议进程时表头登记 微数据 网页存储 以上技术尽管是WHATWG HTML说明文档的内容，但并没有全部包括在W3C HTML5的说明文档里。一些相关的技术，像下面所列的，并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。 Geolocation API：用户可共享地理位置，并在Web应用的协助下享用位置感知服务（location-aware services） 索引数据库API（Indexed Database API，以前为WebSimpleDB） 文件API：处理文件上传和操纵文件 目录和文件系统：这个API是为了满足客户端在没有好的数据库支持情况下存储要求 文件写入：从网络应用程序向文件里写内容 一个普遍的误解是HTML5能够在网页中提供动画效果，这是不对的，动画效果是需要配合JavaScript和CSS。然而静态HTML5配合CSS可以表示出覆杂的排版结构而且原生支持与视频的混合与控制（控制一般由JavaScript运行），因此简单可以把HTML5单位时间的状态理解为动画的关键帧。
1.5、HTML5优点与缺点
1.5.1、优点
1、网络标准统一、HTML5本身是由W3C推荐出来的。 2、多设备、跨平台 3、即时更新。 4、提高可用性和改进用户的友好体验； 5、有几个新的标签，这将有助于开发人员定义重要的内容； 6、可以给站点带来更多的多媒体元素(视频和音频)； 7、可以很好的替代Flash和Silverlight； 8、涉及到网站的抓取和索引的时候，对于SEO很友好； 9、被大量应用于移动应用程序和游戏。
1.5.2、缺点
a)、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。 b)、完善性：许多特性各浏览器的支持程度也不一样。 c)、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战 d)、性能：某些平台上的引擎问题导致HTML5性能低下。 e)、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。
1.6、HTML5效果展示
HTML5对于之前版本来说，并非简单的版本升级，而是一次全面的框架和性能的提升与优化；这表现在：语法更简单、新增了大量的语义性标签、强大的canvas元素代替flash、丰富的API接口使用极大方便了开发者与浏览器的交互。其中，关键提升在于：基于HTML5强大的新增加框架，如手机端设备与页面进行交互，如重力感应、地理定位、离线操作等， 在主流移动端平台，可以很轻松地自定义性能强大的webapp，包括游戏、动画和企业级的应用开发。
CSS3绘制《辛普森一家》
HTML5开发的游戏
1.7、HTML5学习与开发工具
1.7.1、基础要求
HTML+CSS+JavaScript与任何一种Web服务器后台技术如（Java,dotNET,PHP)
1.7.2、开发工具
主流浏览器，如Chrome浏览器、Firefox浏览器、Safari浏览器、IE9+浏览器、IETester等
HTML5对开发工具并没有限制，任意的文本编辑器都可以如：webstorm/notepad++ + zendcode /textMate + zendcode / sublime 2，Visual Studio2013+，Visual Studio Code，HBuilder等
如果习惯了eclipse的朋友可以使用HBuilder，eclipse实在不适合用于写前端脚本（4千万美刀的东西...），
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。 快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。官网：http://www.dcloud.io/
1.8、HTML5语法规则与文档声明
1.8.1、语法规则
a)、标签要小写 属性值不加" "或 ' ' b)、可以省略某些标签 HTML body head tbody c)、可以省略某些结束标签 tr td li d)、单标签不用加结束标签 img input e)、废除的标签，看第二点 font center big
1.8.2、文档声明
声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。 doctype 声明不属于 HTML 标签，它是一条指令，告诉浏览器编写页面所用的标记的版本。 在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。 HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用。
1.8.2、文档声明
二、废弃的标签
以下的 HTML 4.01 元素在HTML5中已经被删除，虽然浏览器为了兼容性考虑都还支持这些标签，但建议使用新的替代标签，矛盾的是老浏览器对新标签的支持度又不够，视项目的受众对象而定了。
2.1、能用CSS代替的元素
这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页面展示用的，表现的内容应该由CSS完成。
2.2、frame框架
这些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。
2.3、只有部分浏览器支持的元素
这些元素包含applet、bgsound、blink、marquee等标签。
2.4、其他被废除的元素
废除rb