一、HTML5概要

1.1、为什么需要HTML5

概念：

HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本，

旨在消除富 Internet 程序（RIA）对 Flash， Silverlight， JavaFX 一类浏览器插件的依赖。

1991年HTML1.0标准出现
1997年HTML4.0发布，4.0标准下的浏览器局限性
Flash (安全与稳定堪忧、耗电、触摸、不开放)
Silverlight
JavaApplet
2008年HTML5出现， W3C2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，

让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很小，这并不符合一个好产品的演进规则。

1.2、HTML5与HTMl的区别

1)、在文档类型声明上
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html5:
<!doctype html>

2）、在文档声明上：
　html有很长的一段代码，并且很难记住这段代码，而html5却不同，只有简简单单的声明，这也方便人们的记忆。

3）、在结构语义上
html: 没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
html5: 在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>。

1.3、HTML5现状及浏览器支持

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera；

1.4、HTML5特性

1、语义特性（Class：Semantic）

HTML5会赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa、微数据、微格式、等方面的支持，构建对程序、对用户更有价值的数据驱动Web。

2、本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这全得益于HTML5 APP Cache、本地存储功能、Indexed DB（HTML5本地存储最重要的技术之一）和API说明文档。

3、设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者提供了更多功能上的优化选择，带来了更多体验功能。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可直接与浏览器内部的数据直接相连，譬如：视频影音可直接与microphones及摄像头相联。

4、连接特性（Class: CONNECTIVITY）

更有效的连接效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能帮助我们实现服务器将数据“推送”到客户端的功能。

5、网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。

6、三维、图形、特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL、CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

7、性能、集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XML Http Request 2等技术，解决以前的跨域问题，帮Web应用和网站在多样化的环境中更快速工作。

8、CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格、更强的效果。此外，较以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

1.5、HTML5优点与缺点

1.5.1、优点

1、提高可用性和改进用户的友好体验；

2、有几个新标签，有助于开发人员定义重要内容；

3、可给站点带来更多多媒体元素(视频和音频)；

4、可很好的替代FLASH和Silverlight；

5、当涉及网站抓取和索引时，SEO很友好；

6、可大量应用于移动应用程序和游戏；

7、可移植性好。

1.5.2、缺点

1.6、HTML5效果展示

1.7、HTML5学习与开发工具

二、HTML5新增标签

2.1、废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

2.2、新增的标签

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义：侧边 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。

HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's * was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's * was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

秒客网

HTML5学习总结——HTML5入门与新增标签