HTML5

一.HTML5简介

本文结合基本HTML5的权威书籍中的内容，根据自己的理解，向大家列举了一些HTML5中的新标签，希望大家能够喜欢，如有不足，也希望提出建议，大家共同进步。

HTML5 是HTML标准的最新演进版本。这个术语代表了两个不同的概念：

它是一个新的 HTML 语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。这套技术往往被称作 HTML5 和它的朋友们，通常简称为 HTML5。从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

语义：能够让你更恰当地描述你的内容是什么。
连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
绘图：提供了一个更加分化范围的呈现选择。
性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
样式设计: 让我们来创作更加复杂的主题吧！

二.语义

1.HTML5中的节段和提纲: HTML5 中新的提纲和节段元素一览: <section>,<article>,<nav>,<header>,<footer>,<aside>和<hgroup>.
2.使用HTML5的音频和视频: <audio> 和 <video> 元素嵌入和允许操作新的多媒体内容。
3.HTML5的表单: 看一下 HTML5 中对 web 表单的改进：强制验证 API，一些新的属性，<input>属性type的一些新值，新的<output>元素。
4.新的语义元素: 除了节段，媒体和表单元素之外，还有众多的新元素，例如， <figure>，<data>，<time>， <progress>，<main>，这增加了有效的HTML5元素的数量。

三.连通性

1.Web Sockets: 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
2.Server-sent events: 允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
3.WebRTC: 这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

四.离线 & 存储

1.离线资源：应用程序缓存: 火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。
2.在线和离线事件: Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
3.DOM储存: 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).
4.IndexedDB: 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。

五.多媒体

1.使用HTML5的音频和视频: <audio> 和 <video> 元素嵌入和允许操作新的多媒体内容。
2.WebRTC: 这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。
3.使用Carmera API: 允许使用，操作计算机摄像头，并从中存储图像。

六.图像

1.canvas

<canvas>元素

2.WebGL

七.性能 & 集成

1.Web Workers: 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
2.XMLHttpRequestLevel 2: 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。
3.即时编译的 JavaScript 引擎: 新一代的 JavaScript 引擎功能更强大，性能更杰出。
4.History API: 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
5.拖放: HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
6.HTML中的焦点管理: 支持新的 HTML5 activeElement 和 hasFocus 属性。
7.基于Web的协议处理程序: 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。
8.requestAnimationFrame: 允许控制动画渲染以获得更优性能。
9.全屏API: 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。
10.指针锁定API: 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。
11.在线和离线事件: 为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

八.样式

CSS已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

1.新的背景样式特性: 现在可以使用 box-shadow给逻辑框设置一个阴影，而且还可以设置多背景。
2.更精美的边框: 现在不仅可以使用图像来格式化边框，使用border-image和它关联的普通属性，而且可以通过 border-radius属性来支持圆角边框。
3.为你的样式设置动画: 使用transitions以在不同的状态间设置动画，或者使用 animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。
4.排版方面的改进: 作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation，还可以给它设置一个阴影或者更精细地控制它的 decorations。感谢新的 @font-face 规则，现在我们可以下载并应用自定义的字体了。
5.新的展示性布局: 为了提高设计的灵活性，新的布局被添加了进来：; 1.align-items; 2.align-self; 3.flex; 4.flex-basis; 5.flex-direction; 6.flex-flow; 7.flex-grow; 8.flex-wrap; 9.justify-content