标签：
HTML5 是近十年来 Web 开发标准最巨大的飞跃。HTML5 并非仅仅用来表示 Web 内容，它将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。
HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。
这一新标准中加入了视频播放和拖放等特性，过去这都依赖于第三方浏览器插件，比如 Adobe Flash，Microsoft Silverlight 以及 Google Gears。
最新版 Apple Safari，Mozilla FireFox 和 Opera 支持大部分 HTML5 特性，IE9 也支持一些 HTML5 的功能。
预装在 iPhones，iPads 和 Android 手机上的手机浏览器都对 HTML5 有良好的支持。
HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性：
新的语义化元素： 比如 <header>，<footer> 和 <section>。
表单 2.0： 改进了 HTML Web 表单，为 <input> 标签引入了一些新的属性。
持久的本地存储： 为了不通过第三方插件实现。
WebSocket： 用于 Web 应用程序的下一代双向通信技术。
服务器推送事件： HTML5 引入了从 Web 服务器到 Web 浏览器的事件，也被称作服务器推送事件（SSE）。
Canvas： 支持用 JavaScript 以编程的方式进行二维绘图。
音频和视频： 在网页中嵌入音频或视频而无需借助第三方插件。
地理定位： 用户可以选择与我们的网页共享他们的地理位置。
微数据： 允许我们创建 HTML5 之外的自定义词汇表，以及使用自定义语义扩展网页。
HTML5 被设计为尽可能的对现有浏览器向后兼容。新特性都是建立在现有特性的基础上，并且允许我们为旧浏览器提供备用内容。
HTML5 有“自己的” HTML 语法，它与HTML 4 以及 XHTML1 文档兼容，但是不兼 HTML 4 中更复杂的 SGML 特性。
HTML5 并没有 XHTML 中需要小写标签名，属性要带引号，属性必须有一个值以及必须闭合所有空元素的语法规则。
但是 HTML5 更具灵活性，支持下列形式：
在老版本的 HTML 中，DOCTYPE 很长，因为 HTML 语言是基于 SGML 的，需要引用一个 DTD。
HTML5 作者可以使用简单的语法来指定如下形式的 DOCTYPE：
<!DOCTYPE html>
上述语法不区分大小写。
HTML5 作者可以使用简单的语法指定字符编码，如下所示：
<meta charset="UTF-8">
常见的做法是给 script 元素添加一个值为 "text/javascript" 的 type 属性，如下所示：
<script type="text/javascript" src="scriptfile.js"></script>
HTML5 移除了所需的额外信息，我们可以使用如下所示的简单语法：
<script src="scriptfile.js"></script>
目前为止我们这样编写 <link>：
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML5 移除了所需的额外信息，我们可以使用如下所示的简单语法：
<link rel="stylesheet" href="stylefile.css">
HTML5 元素使用起始标签和结束标签标记。标签使用尖括号之间的标签名限定。
起始标签和结束标签的区别在于后者标签名前面包含一个斜杠。
下面是一个 HTML5 元素示例：
<p>...</p>
HTML5 标签名不区分大小写，可以全部大写或者混合使用，虽然最常见的约定是始终使用小写。
大多数元素都包含一些内容，比如 <p>...</p> 包含一个段落。但是，有些元素不能包含任意内容，它们被称作空白元素。比如，br，hr，link 和 meta 等等。
HTML5 属性
元素可以包含属性（attributes），用来给一个元素设置各种属性（properties）。
有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。
下面是一个使用 HTML5 属性的例子，演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素：
<div class="example">...</div>
属性只能在起始标签中指定，绝对不能用在结束标签中。
HTML5 属性不区分大小写，可以全部大写或者混合使用，尽管最常见的约定是始终使用小写。
这里有一个完整的 HTML5 属性列表。
为了得到更好的结构，引入了下面的标签：
section： 这个标签表示一个通用的文档或者应用程序节。它可以和 h1-h6 一起使用来表示文档结构。
article： 这个标签表示文档内容的一个独立块，比如博客条目或者报纸上的文章。
aside： 这个标签表示与页面其他部分略微相关的内容块。
header： 这个标签表示一个节的头部。
footer： 这个标签表示一个节的脚注，可以包含作者，版权等信息。
nav： 这个标签表示用于导航文档的节。
dialog： 这个标签可以用于标记会话。
一个 HTML5 文档的标记看起来就像下面这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
为了便于学习这一概念 - 我们可以进行在线练习。
正如 HTML5 语法中所阐述的，元素可以包含属性（attributes）给一个元素设置各种属性（properties）。
有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。
下面是一个使用 HTML5 属性的例子，演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素：
<div class="example">...</div>
属性只能在起始标签中指定，绝对不能用在结束标签中。
HTML5 属性不区分大小写，可以全部大写或者混合使用，尽管最常见的约定是始终使用小写
| 属性 | 选项 | 功能 |
| accesskey | 用户自定义 | 定义访问元素的键盘快捷键。 |
| align | right, left, center | 水平对齐标签。 |
| background | URL | 在元素后面设置一个背景图像。 |
| bgcolor | 数值，十六进制值，RGB值 | 在元素后面设置一个背景颜色。 |
| class | 用户定义。 | 分类一个元素，便于使用级联样式表。 |
| contenteditable | true, false | 定义用户是否可以编辑元素的内容。 |
| contextmenu | Menu id | 为元素定义上下文菜单。 |
| data-XXXX | 用户定义。 | 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。 |
| draggable | true,false, auto | 定义用户是否可以拖动元素。 |
| height | 数字值 | 定义表格，图像或表格单元的高度。 |
| hidden | hidden | 定义元素是否应该可见。 |
| id | 用户定义。 | 命名元素，便于使用级联样式表。 |
| item | 元素列表。 | 用于组合元素。 |
| itemprop | 条目列表。 | 用于组合条目。 |
| spellcheck | true, false | 定义元素是否必须有拼写或错误检查。 |
| style | CSS 样式表。 | 给元素定义内联样式。 |
| subject | 用户定义 id。 | 定义元素关联的条目。 |
| tabindex | Tab number | 定于元素的 tab 键顺序。 |
| title | 用户定义。 | 元素的“弹出”标题。 |
| valign | top, middle, bottom | HTML 元素内标签的垂直对齐方式。 |
| width | 数字值。 | 定义表格，图像和表格单元的宽度。 |
完整的 HTML5 标签列表以及相关的属性请参考 HTML5 标签。
HTML5 还引入了一个新特性，就是可以添加自定义的数据属性。
自定义数据属性以 data- 开头，基于我们的需求命名。下面是一个简单的例子
<div class="example" data-subject="physics" data-level="complex"> ... </div>
上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。
当用户访问我们的网站时，他们会点击文本，图片，链接，将鼠标悬停在某些东西上面等等。这些都是 JavaScript 调用事件的例子。
我们可以在 JavaScript 或者 vbscript 中编写事件处理程序，然后把这些事件处理程序指定为事件标签属性的值。下面列出了 HTML5 规范定义的各种事件属性。
当任意事件发生在 HTML5 元素上时，下列属性可以用来触发任何作为值提供的 JavaScript 和 vbscript 代码。
这里我们只涵盖元素特定的事件，后面的章节会详细讨论这些元素。
| 属性 | 值 | 描述 |
|---|---|---|
| offline | script | 文档进入离线状态时触发。 |
| onabort | script | 事件中断时触发。 |
| onafterprint | script | 文档被打印后触发。 |
| onbeforeonload | script | 文档载入前触发。 |
| onbeforeprint | script | 文档被打印前触发。 |
| onblur | script | 窗口失去焦点时触发。 |
| oncanplay | script | 媒体停止缓冲，可以开始播放时触发。 |
| oncanplaythrough | script | 媒体可以播放到结束时触发，无需停止缓冲。 |
| onchange | script | 元素发生变化时触发。 |
| onclick | script | 鼠标点击触发。 |
| oncontextmenu | script | 上下文菜单被触发时触发。 |
| ondblclick | script | 双击鼠标时触发。 |
| ondrag | script | 元素被拖动时触发。 |
| ondragend | script | 拖拽操作结束时触发。 |
| ondragenter | script | 元素被拖拽到有效放置目标时触发。 |
| ondragleave | script | 元素离开有效放置目标时触发。 |
| ondragover | script | 元素被拖放到有效目标上时触发。 |
| ondragstart | script | 拖拽操作开始时触发。 |
| ondrop | script | 拖动的元素被放置时触发。 |
| ondurationchange | script | 媒体时长改变时触发。 |
| onemptied | script | 媒体资源元素突然清空时触发。 |
| onended | script | 媒体到达终点时触发。 |
| onerror | script | 发生错误时触发。 |
| onfocus | script | 窗口获得焦点时触发。 |
| onformchange | script | 表单变化时触发。 |
| onforminput | script | 表单获得用户输入时触发。 |
| onhaschange | script | 文档变化时触发。 |
| oninput | script | 元素获得用户输入时触发。 |
| oninvalid | script | 元素失效时触发。 |
| onkeydown | script | 键盘按下时触发。 |
| onkeypress | script | 键盘按下并释放时触发。 |
| onkeyup | script | 按键释放时触发。 |
| onload | script | 载入文档时触发。 |
| onloadeddata | script | 载入媒体数据时触发。 |
| onloadedmetadata | script | 媒体元素的媒体数据载入时触发。 |
| onloadstart | script | 浏览器开始载入媒体数据时触发。 |
| onmessage | script | 消息被触发时触发。 |
| onmousedown | script | 鼠标按键被按下时触发。 |
| onmousemove | script | 鼠标指针移动时触发。 |
| onmouseout | script | 鼠标指针移出元素时触发。 |
| onmouseover | script | 鼠标指针移入元素时触发。 |
| onmouseup | script | 鼠标按键释放时触发。 |
| onmousewheel | script | 鼠标滚轮转动时触发。 |
| onoffline | script | 文档进入离线状态时触发。 |
| onoine | script | 文档上线时触发。 |
| ononline | script | 文档上线时触发。 |
| onpagehide | script | 窗口隐藏时触发。 |
| onpageshow | script | 窗口变得可见时触发。 |
| onpause | script | 媒体数据暂停时触发。 |
| onplay | script | 媒体数据开始播放时触发。 |
| onplaying | script | 媒体数据播放时触发。 |
| onpopstate | script | 窗口历史信息改变时触发。 |
| onprogress | script | 浏览器获取媒体数据时触发。 |
| onratechange | script | 媒体数据的播放比率改变时触发。 |
| onreadystatechange | script | ready-state 改变时触发。 |
| onredo | script | 文档执行 redo 操作时触发。 |
| onresize | script | 调整窗口尺寸时触发。 |
| onscroll | script | 元素的滚动条滚动时触发。 |
| onseeked | script | 媒体元素的 seeking 属性不在为真并结束时触发。 |
| onseeking | script | 媒体元素的 seeking 属性为真，seeking 开始时触发。 |
| onselect | script | 元素被选中时触发。 |
| onstalled | script | 获取媒体数据发生错误时触发。 |
| onstorage | script | 载入文档时触发。 |
| onsubmit | script | 表单提交时触发。 |
| onsuspend | script | 浏览器获取媒体数据，但获取整个媒体文件中止时触发。 |
| ontimeupdate | script | 媒体播放位置改变时触发。 |
| onundo | script | 文档执行 undo 操作时触发。 |
| onunload | script | 用户离开文档时触发。 |
| onvolumechange | script | 媒体音量发生变化，包括设置为“静音”时触发。 |
| onwaiting | script | 媒体停止播放，等待恢复时触发。 |
Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记，移除了大量 HTML4 中需要的繁琐脚本和样式。
HTML4 输入框元素使用 type 属性指定数据类型。HTML4 提供了下列类型：
| 类型 | |
|---|---|
| text | 自由形式的文本字段，名义上没有换行符。 |
| password | 用于敏感信息的自由形式的文本字段，名义上没有换行符。 |
| checkbox | 预定义列表中的一组零个或多个值。 |
| radio | 一个枚举值。 |
| submit | 一个自由形式的启动表单的按钮。 |
| file | 带有 MIME 类型的任意文件以及可选的文件名。 |
| image | 一个坐标，相对于特定图片的尺寸，额外的语义是它必须是最后选中的值，同时启动表单提交。 |
| hidden | 默认不显示给用户的任意字符串。 |
| select | 枚举值，类似 radio 类型。 |
| textarea | 自由形式的文本字段，名义上没有换行的限制。 |
| button | 自由形式的按钮，可以启动按钮相关的任何事件。 |
下面是一个使用标注标签，单选按钮以及提交按钮的简单示例：
...
<form action="http://example.com/cgiscript.pl" method="post">
<p>
<label for="firstname">first name: </label>
<input type="text" id="firstname"><br />
<label for="lastname">last name: </label>
<input type="text" id="lastname"><br />
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>
...
除了上面提到的属性，HTML5 给输入框元素的 type 属性引入了几个新值。如下表所列。
注意： 请使用最新版的 Opera 浏览器运行下面所有例子。
| 类型 | 描述 |
|---|---|
| datetime | 按照 ISO 8601 编码，时区设置为 UTC 的日期和时间（包括年，月，日，时，分，秒，分秒）。 |
| datetime-local | 按照 ISO 8601 编码的日期和时间（包括年，月，日，时，分，秒，分秒），不带时区信息。 |
| date | 按照 ISO 8601 编码的日期（包括年，月，日）。 |
| month | 由 ISO 8601 编码的年和月组成的日期。 |
| week | 由 ISO 8601 编码的年和星期数组成的日期。 |
| time | 按照 ISO 8601 编码时间（包括时，分，秒，和分秒）。 |
| number | 只接受数值。step 属性可以指定精度，默认为1。 |
| range | range 类型适用于应该包含某个范围内数值的输入字段。 |
| 只接受邮箱值。这个类型适用于应该包含一个邮箱地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 email@example.com 格式的邮箱地址。 | |
| url | 只接受 URL 值。这个类型适用于应该包含一个 URL 地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 http://www.example.com 或者 http://example.com 格式的 URL 地址。 |
HTML5 还引入了一个新元素 <output>，用来表示不同类型的输出结果，比如输出由脚本所写。
还可以用 for 属性指定输出元素和文档中影响计算的其他元素之间的关系（比如，作为输入源或者参数）。for 属性的值是一个由空格分隔的其他元素的 IDs 列表。
便于学习这一概念 - 请进行在线练习。
HTML5 引入了一个叫做 palceholder 的新属性。这个属性在 <input> 和 <textarea> 元素上为用户提供了在这个字段可以输入什么的提示。占位符字符不能包含回车符或者换行符。
下面是 placeholder 属性的简单语法：
<input type="text" name="search" placeholder="search the web"/>
这个属性只有最新版的 Mozilla，Safari 以及 Chrome 浏览器支持。
便于学习这一概念 - 请进行在线练习。
现在，我们不需要使用 JavaScript 处理诸如空文本框永远不能被提交的这类客户端验证了，因为 HTML5 引入了一个叫做 required 的新属性，可以按照如下方式使用，它会保证输入框有值：
<input type="text" name="search" required/>
这个属性只有最新版的 Mozilla，Safari 以及 Chrome 浏览器支持。
标签：
原文地址：http://www.cnblogs.com/zxh930508/p/5388040.html
