目录

• 一、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元素 
• 四、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、文档声明

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <HTML> 标签之前。该标签告知浏览器文档所使用的 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

HTML5 学习笔记（一）——HTML5概要与新增标签