HTML5都有哪些功能？

What's new in HTML5?

参考自： HTML5:MDN

语义

1.HTML5中的节段和外观元素。 <section>，<article>，<nav>，<header>，<footer>，<aside>

标签	简介	提示
article标签	定义文章	标签规定独立的自包含内容。潜在来源：论坛帖子、报纸文章、博客头目、用户评论
aside标签	定义页面内容之外的内容	aside 的内容应该与附近的内容相关。aside的内容可用作文章的侧
footer标签	定义 section 或 page 的页脚	页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个 footer 元素
header标签	定义 section 或 page 的页眉	header 标签定义文档的页眉（介绍信息）
nav标签	定义导航链接	如果文档中有“前后”按钮，则应该把它放到nav元素中
section	定义节	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

2.HTML5中的视频和音频。 <video>和<audio> 。

3.HTML5中的表单。新增的表单输入类型、表单元素和表单属性。

新增表单输入类型：

input的type	输入类型
type="email"	输入email地址，在提交表单时，会自动验证 email 域的值。
type="url"	输入URL 地址。在提交表单时，会自动验证 url 域的值。
type="number"	定义数字
type="range"	range 类型显示为滑动条,用于应该包含一定范围内数字值的输入域
type="date"	日期选择器
type="search"	search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域

新增的表单元素：

  
  
  
  

   
   
   
   
<datalist>:定义下拉列表，和<option>配合使用。<keygen>:密钥对生成器。<output>:output 元素用于不同类型的输出，比如计算或脚本输出。
  
  
  
  

新增的form标签属性：

autocomplete属性（自动完成）和novalidate属性（规定在提交表单时不应该验证 form 或 input 域）。

4.其他新的语义元素。 <mark> <figure> <figcaption> <time> <progress> <meter> 。

标签	简介	提示
mark标签	定义有记号的文本	请在需要突出显示文本时使用 m 标签
meter标签	定义预定义范围内的度量	meter标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress标签
figure标签	定义媒介内容的分组，以及它们的标题	figure 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
figcaption标签	标签定义 figure 元素的标题（caption）	figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置
time标签	定义时间和日期	该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果
progress	定义任何类型的任务的进度	请结合 progress 标签与 JavaScript 一同使用，来显示任务的进度

5. <iframe> 改进。 使用 sandbox， seamless， 和 srcdoc 属性，作者们现在可以精确控制  <iframe> 元素的安全级别以及期望的渲染。

6.MathML。允许直接嵌入数学公式。

连通性

1. Web Sockets。 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

2. Server-sent events。 允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

3. WebRTC。 这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

离线和存储

1. 离线资源：应用程序缓存。 火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。

2. 在线和离线事件。 Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。

3. WHATWG 客户端会话和持久化存储 (又名 DOM 存储)。 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。

4. IndexedDB。 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

5. 自 web 应用程序中使用文件。 对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的  <input>  元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。

多媒体

1. 使用 HTML5 音视频。  <audio> 和 <video>  元素嵌入并支持新的多媒体内容的操作。

2. WebRTC。 这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

3. 使用 Camera API。 允许使用，操作计算机摄像头，并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.

4. Track 和 WebVTT。  <track>  元素支持字幕和章节。WebVTT 一个文本轨道格式。

2D/3D绘图和效果

1. Canvas

2. SVG

性能和集成

1. Web Workers。 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

2. XMLHttpRequest Level 2。 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。

3. 即时编译的 JavaScript 引擎。 新一代的 JavaScript 引擎功能更强大，性能更杰出。

4. History API。 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。

5. conentEditable 属性：把你的网站改变成 wiki ! HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。

6. 拖放。 HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

7. HTML 中的焦点管理。 支持新的 HTML5 activeElement 和 hasFocus 属性。

8. 基于 Web 的协议处理程序。 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

9. requestAnimationFrame。 允许控制动画渲染以获得更优性能。

10. 全屏 API。 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。

11. 指针锁定 API。 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

12. 在线和离线事件。 为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

设备访问

1. 使用 Camera API。 允许使用和操作计算机的摄像头，并从中存取照片。

2. 触控事件。 对用户按下触控屏的事件做出反应的处理程序。

3. 使用地理位置定位。 让浏览器使用地理位置服务定位用户的位置。

4. 检测设备方向。 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。

5. 指针锁定 API。 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

样式设计

1. 新的背景样式特性。 现在可以使用 box-shadow 给逻辑框设置一个阴影，而且还可以设置 多背景。

2. 更精美的边框。 现在不仅可以使用图像来格式化边框，使用 border-image 和它关联的普通属性，而且可以通过 border-radius 属性来支持圆角边框。

3. 为你的样式设置动画。 使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。

4. 排版方面的改进。 作者拥有更高的控制已达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation， 而且也可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则，现在我们可以下载并应用自定义的字体了。.

5. 新的展示性布局。 为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。

来源： http://www.jcodecraeer.com/a/qianduankaifa/css3/2015/0305/2546.html