1、HTML5 概述
（1）HTML5 的历史
HTML5 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的最新版本。它是由一群自由思想者组成的团队设计出来，并最终实现多媒体支持、交互性、更加智能的表单，以及更好的语义化标记。
HTML5 并不仅仅是 HTML 规范的最新版本，而是一系列用来制作现代富 Web 内容的相关技术的总称，其中最重要的三项技术分别为：HTML5 核心规范（标签元素）、CSS（层叠样式表第三代）、和 JavaScript。
1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999年的 HTML4.01 版本稳定下来。由于发展缓慢，逐渐的被更加严格的 XHTML 取代。
1）XHTML 的兴衰史
自从 HTML4.01 版本之后，掌握着 HTML 规范的万维网联盟（W3C）组织没有再发布新的标准，而是围绕着 XHTML1.0 以及之后的 XHTML2.0 展开工作。XHTML 是基于 XML、致力于实现更加严格并且统一的编码规范的 HTML 版本，解决之前 HTML4.01 版本时，由于编码不规范导致浏览器的各种古怪行为。所以，Web 开发者对 XHTML 非常的拥护。XHTML 极大的好处，就是强迫开发者养成良好的编码习惯，放弃 HTML 的凌乱写法，最终降低了浏览器解析页面的难度，方便移植到更多平台。
可是，越是想往好的方面发展，往往可能是带来的却是毁灭性的灾难，世间万物就是如此。XHTML2.0 规范了更严格的错误处理规则，强制要求浏览器拒绝无效的 XHTML2 页面，强制 Web 开发者写出绝对正确规范的代码，同时不得向下兼容，摒弃 HTML 遗留的怪异行为和编码习惯。按理说，取其精华、舍其糟粕应该是好事。但是，这样的话，数亿的页面将无法兼容，Web 开发者的难度又被加大，并且制定这个标准又太过久远，最终被抛弃。
2）HTML5 的回归
2008 年 W3C 发布了 HTML5 的工作草案，2009 年停止了 XHTML2 计划。又过去大概一年，HTML5 规范进一步解决了诸多非常实际的问题，各大浏览器厂商开始对旗下的产品进行升级，以便支持 HTML5。这样，得益于浏览器的实验反馈，HTML5 规范得到了持续的进步和完善，从而迅速融入到 Web 平台的实质性改进中。
和 XHTML2.0 不同，制定 HTML5 规范的一群人并不想挑出以往 HTML 的各种毛病为其改正，而是尽可能的补全 Web 开发者急需的各种功能。这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画（Canvas）、Web 通信等等。
（2）HTML5 的功能
HTML5 到底涵盖了哪些功能？这些功能到底在主流的浏览器支持情况如何？
1）HTML5 核心：这部分主要由 W3C 官方的规范组成，涉及新的语义元素、新的增强的 Web 表单、音频和视频、以及通过 JavaScript 绘图的 Canvas。这部分大多数主流浏览器均得到很好的支持；
2）曾经的 HTML5 标准：这部分主要来自于最初制定的 HTML5 规范，其中大多数功能需要 JavaScript 且支持富 Web 应用开发。比如：本地数据存储、离线应用和消息传递；
3）非 HTML5 标准：这部分通常指下一代功能，虽然从未进入 HTML5 标准，但人们还是会把它认做 HTML5 的一部分。这些包括最为常见的 CSS3，以及很热门的地理定位。
对于最为常用且实用的部分，基本上主流的浏览器都支持的比较好。而那些特殊需求的部分，则需要根据不同的浏览器检测才能知道是否支持自己想要的功能。
（3）HTML5 的特点
在 HTML5 发展的同时，XHTML2.0 也在不断发展，那么到底是哪些特点导致 HTML5 取得最终的胜利呢？
1）向下兼容
对于 XHTML2.0 要求遵循规则，否则不予显示的方式，HTML5 却实行“不破坏 Web”的原则。也就是说，以往已存在的 Web 页面，还可以保持正确的显示。
当然，面对开发者，HTML5 规范要求摒弃过去那些编码坏习惯和废弃的标签元素；而面对浏览器厂商，要求它们兼容 HTML 遗留的一切，以做到向下兼容。
2）用户至上
HTML5 遵循“用户至上”的原则，在出现具体问题时，会把用户放在第一位，其次是开发者，然后是浏览器厂商，最后才是规范制定者。比如，开发者在编码时不严谨导致本该出现警告或错误时，却正常显示了页面。
3）化繁为简
HTML5 对比之前的 XHTML，做了大量的简化工作。具体如下：
- 以浏览器的原生能力代替复杂的 JavaScript；
- DOCTYPE 被简化到极致；
- 字符集声明被简化；
- 简单强大的 API。
4）无插件范式
在 HTML5 出现之前，很多功能只能通过插件或 hack（如绘图 API）来实现，但 HTML5原生提供了这些支持。使用插件有很多问题，具体如下：
- 插件安装容易失败；
- 插件被浏览器或软件禁用屏蔽（如 Flash 插件）；
- 插件经常会被爆出漏洞被利用攻击；
- 插件不容易与 HTML 文档其他部分集成（比如整体透明化等）。
5）访问通用性
这个原则分为三个概念：
- 可访问性：比如更加利于残障人士的阅读方案；
- 媒体中立：比如 HTML5 的媒体播放在不同设备或平台均能正常运行；
- 支持所有语种：比如新元素。
6）引入语义
HTML5 引入了一些用来区分不同含义和内容的标记元素。这种方式极大的提供的编码人员的可读性和代码区域查询的便利性。
7）引入原生媒体支持
HTML5 的一次大改进救生衣支持在浏览器中直接播放视频和音频文件，以前都需要借助插件才能实现此类功能。
8）引入可编程内容
HTML5 最大的变化就是引入了需要通过 JavaScript 编程才能完全的各种效果，而这些很多都是 HTML5 原生的。那么现在 HTML5 可以理解为 HTML + CSS + JavaScript 的总称。
2、HTML5 基本格式
（1）HTML5 文档结构
<!DOCTYPE html> // 文档类型声明
<html lang="zh-cn"> // 表示 HTML 文档开始
<head> // 包含文档元数据开始
<meta charset="utf-8"> // 声明字符编码
<title>基本结构</title> // 设置文档标题
</head> // 包含文档元数据结束
<body> // 表示 HTML 文档内容
<a href="http://www.baidu.com">百度</a> // 一个超链接元素（标签）
</body> // 表示 HTML
</html> // 表示 HTML 文档结束
（2）文档结构解析
1）Doctype
文档类型声明（Document Type Declaration，也称 Doctype）。它主要告诉浏览器所查看的文件类型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。
<!DOCTYPE html> // 不分区大小写
2）html 元素
首先，元素就是标签的意思，html 元素即 html 标签。html 元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang=“zh-cn”，表示文档采用语言为：简体中文。
<html lang="zh-cn"> // 如果是英文则为 en
3）head 元素
用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息，比如 link 提供 CSS 信息，script 提供 JavaScript 信息，title 提供页面标题等。
<head>...</head> // 这些信息在页面不可见
4）meta 元素
这个元素用来提供关于文档的信息，起始结构有一个属性为：charset=“utf8”。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。
<meta charset="utf-8"> // 除了设置编码，还有别的
5）title 元素
这个元素很简单，顾名思义：设置浏览器左上角的标题。
<title>基本结构</title>
6）body 元素
用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这个元素内部进行添加。
<body>...</body>
7）a 元素
一个超链接。
<a href="http://www.baidu.com">百度</a>
（3）元素标签探讨
HTML 是一种标记语言，刚才的结构我们已经详细探讨过。这里，我们再剖析一下这些“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。
1）元素
元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字，比如<body>、<title>、<meta>都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。
元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用<meta>，插入图片就用<img>；双标签一般用于设置一段区域的内容，将其包含起来，比如段落<p>...</p>。
2）属性和值
元素除了有单双之分，元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如超链接：<a>中的 href 属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。
3、HTML5 文本元素
| 元素名称 | 说明 |
|---|---|
| a | 生成超链接 |
| br | 强制换行 |
| wbr | Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.安全换行，在英文单词过长时使用<wbr>会根据浏览器的宽度适当的裁切换行 |
| b | 实际作用就是加粗，标记一段文字但不强调 |
| strong | 实际作用就是加粗，从语义上来看，就是强调一段重要的文本 |
| i | 表示外文或科学术语，实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调重要性 |
| em | 实际作用就是倾斜，从语义上来看，表示对一段文本的强调 |
| u | 实际作用就是加一条下划线，从语义上来看，并不强调此段文本 |
| ins | 实际作用就是加一条下划线，从语义上来看，是添加一段文本，起到强调的作用 |
| s | 实际作用就是删除线，从语义上来看，表示不准确的删除 |
| del | 实际作用就是删除线，从语义上来看，表示删除相关文字 |
| dfn | 该元素就是一般性的倾斜，从语义上看，表示术语定义 |
| mark | 实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，显示与上下文相关而突出的文本，用于记号 |
| code | 表示计算机代码片段，由于这属于英文范畴的，必须将 lang="en"英语才能体现效果 |
| var | 表示编程语言中的变量，由于这属于英文范畴的，必须将 lang="en"英语才能体现效果 |
| samp | 表示程序或计算机的输出，由于这属于英文范畴的，必须将 lang="en"英语才能体现效果 |
| kdb | 表示用户的输入，由于这属于英文范畴的，必须将 lang="en"英语才能体现效果 |
| abbr | 该元素没有实际作用，从语义上看，是一段文本的缩写 |
| cite | 实际作用就是加粗，从语义上来看，表示引用其他作品的标题 |
| q | 实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容 |
| ruby | 表示位于表意文字上方或右方的注音符号，用来为非西方语言提供支持 |
| rp | 与 ruby 元素结合使用，标记括号 |
| rt | 与 ruby 元素结合使用，标记拼音 |
| bdo | <bdo dir="rtl">HTML5</bdo>控制文字的方向。<bdo>必须使用属性 dir 才可以设置，一共两个值：rtl（从右到左）和 ltr（从左到右）。一般默认是 ltr。还有一个<bdi>元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持 |
| small | 实际作用就是将文本放小一号，从语义上来看，用于免责声明和澄清声明 |
| sub | 表示下标字体 |
| sup | 表示上标字体 |
| time | <time>2015-10-10</time>该元素没有实际作用；从语义上来看，表示日期和时间 |
| span | 通用元素，没有任何语义。一般配合 CSS 修饰 |
<ruby>元素示例：
<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>
4、超链接和路径
（1）超链接的属性
| 属性名称 | 说明 |
|---|---|
| href | 指定<a>元素所指资源的 URL |
| hreflang | 指向的链接资源所使用的语言 |
| media | 说明所链接资源用于哪种设备 |
| rel | 说明文档与所链接资源的关系类型 |
| target | 指定用以打开所链接资源的浏览环境 |
| type | 说明所链接资源的 MIME 类型（比如 text/html） |
1）href 属性
<a href="http://www.baidu.com">百度</a>
解释：href 是必须属性，否则<a>元素就变成空元素了。如果属性值是 http://开头的 URL，意味着点击跳转到指定的外部网站。
2）target 属性
<a href="http://www.baidu.com" target="_blank">百度</a>
解释：target 属性告诉浏览器希望将所链接的资源显示在哪里。
| 属性名称 | 说明 |
|---|---|
| _blank | 在新窗口或标签页中打开文档 |
| _parent | 在父窗框组（frameset）中打开文档 |
| _self | 在当前窗口打开文档（默认） |
| _top | 在顶层窗口打开文档 |
这四种最常用的是_blank，新建一个窗口。而_self 是默认，当前窗口打开。_parent和_top 是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而 HTML5 中，框架基本被废弃，只能使用元素，且以后大量结合 JavaScript 和 PHP 等语言配合，框架用的就很少了。
（2）相对路径与绝对路径
所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从 file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链接到另一个页面。
1）绝对路径
<a href="file:///D:/备课/HTML5 第一季/code/index2.html">index2</a>
解释：首先是 file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦出现任何变化，链接当即失效。
2）相对路径
<a href="index2.html">index2</a>
解释：相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法。
3）目录语法
同一个目录：index2.html 或./index2.html；
在子目录：xxx/index2.html；
在孙子目录：xxx/xxx/index2.html；
在父目录：…/index2.html；
在爷爷目录：…/…/index2.html；
（3）锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。通过属性 id 或 name 实现锚点定位。
// 链接
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
// 锚点
<a name="1"></a> <a id="3"></a>
5、分组元素
| 元素名称 | 说明 |
|---|---|
| p | 素实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持一定量的空隙 |
| div | <div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。而在 HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和<p>段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和<br>换行一样 |
| blockquote | 实际作用除了和<p>元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他处的内容 |
| pre | 实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了 |
| hr | 实际作用就是添加一条分割线，意图呈现上下文主题的分割 |
| ul,ol | 表示无序列表，有序列表 |
| li | 用于 ul,ol 元素中的列表项 |
| dl,dt,dd | 表示包含一系列术语和定义说明的列表。dt 在 dl 内部表示术语，一般充当标题；dd 在 dl 内部表示定义，一般是内容 |
| figure | 表示图片 |
| figcaption | 表示 figure 元素的标题 |
（1）ol 元素属性
| 属性名称 | 说明 |
|---|---|
| start | 从第几个序列开始统计：<ol start="2"> |
| reversed | 是否倒序排列：<ol reversed>，一半主流浏览器不支持 |
| type | 表示列表的编号类型，值分别为：1、a、A、i、I |
（2）li 元素属性
| 属性名称 | 说明 |
|---|---|
| value | 强行设置某个项目的编号 |
例如：<li value="7">马六</li>
（3）<dl><dt><dd>生成说明列表
<dl>
<dt>这是一份文件</dt>
<dd>这里是这份文件的详细内容 1</dd>
<dd>这里是这份文件的详细内容 2</dd>
</dl>
解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。
（4）<figure> <figcaption>使用插图
<figure>
<figcaption>这是一张图</figcaption>
<img src="img.png">
</figure>
解释：这两个元素一般用于图片的布局。
6、表格元素
（1）表格元素总汇
| 元素名称 | 说明 |
|---|---|
| table | 表示表格 |
| thead | 表示标题行 |
| tbody | 表示表格主体 |
| tfoot | 表示表脚 |
| tr | 表示一行单元格 |
| th | 表示标题行单元格 |
| td | 表示单元格 |
| col | 表示一列 |
| colgroup | 表示一组列 |
| caption | 表示表格标题 |
（2）<table><tr><td>构建基础表格
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个 border 属性，设置为 1 即可显示边框。
（3）<th>为表格添加标题单元格
<table border="1" style="width:300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性 style，主要用于 CSS 样式设置。<th><td>均属于单元格，包含两个合并属性：colspan、rowspan 等。
（4）<thead>添加表头
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
（5）<tfoot>添加表脚
<tfoot>
<tr>
<td colspan="3">统计：共两名</td>
</tr>
</tfoot>
<tfoot>元素为表格生成表脚，限制在表格的底部。
（6）<tbody>添加表主体
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tbody>元素主要是包含非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续 CSS 和 JavaScript 的控制。
（7）<caption>添加表格标题
<caption>这是一个人物表</caption>
<caption>元素给表格添加一个标题。
（8）<colgroup>设置列
<colgroup span="2" style="background:red;">
<colgroup>元素是为了处理某个列，span 属性定义处理哪些列。1 表示第一列，2 表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。
（9）<col>更灵活的设置列
<colgroup>
<col>
<col style="background:red;" span="1">
</colgroup>
<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了 span，则控制多列。
7、文档元素
（1）文档元素总汇
| 元素名称 | 说明 |
|---|---|
| h1~h6 | 表示标题，实际作用就是加粗并改变字体大小，用于各种标题文档 |
| header | 表示页面头部，包括：LOGO、标题、导航等内容 |
| footer | 表示页面尾部，一般包括：版权声明、友情链接等内容 |
| nav | 表示有意集中在一起的导航元素，给文档页面添加一个导航 |
| section | 表示重要概念或主题，定义一个文档的主题内容 |
| article | 表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等 |
| address | 表示文档或 article 的联系信息。如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息 |
| aside | 表示素专门为某一段内容进行注释使用 |
| hgroup | 将一组标题组织在一起 |
| details | 生成详情区域，用户将其展开可以获得更多细节 |
| summary | 用在 details 元素中，表示该元素内容的标题或说明 |
（2）<article>元素示例
<article>
<header>
<nav>
</nav>
</header>
<section>
</section>
<footer>
</footer>
</article>
8、嵌入元素
（1）嵌入元素总汇
| 元素名称 | 说明 |
|---|---|
| img | 嵌入图片 |
| map | 定义客户端分区响应图 |
| area | 表示一个用户客户端分区响应图的区域 |
| audio | 表示一个音频资源 |
| video | 表示一个视频资源 |
| iframe | 嵌入一个文档 |
| embed | 用插件在 HTML 中嵌入内容 |
| canvas | 生成一个动态的图形画布 |
| meter | 嵌入数值在许可值范围背景中的图形表示 |
| object | 在 HTML 文档中嵌入内容 |
| param | 表示将通过 object 元素传递给插件的参数 |
| progress | 嵌入目标进展或任务完成情况的图形表示 |
| source | 表示媒体资源 |
| svg | 表示结构化矢量内容 |
| track | 表示媒体的附加轨道（例如字幕） |
（2）<img>嵌入图像
<img src="img.png">
<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。<img> 的私有属性如下：
| 属性名称 | 说明 |
|---|---|
| src | 嵌入图像的 URL |
| alt | 当图片不加载时显示的备用内容 |
| width | 定义图片的长度（单位是像素） |
| height | 定义图片的高度（单位是像素） |
| ismap | 创建服务器端分区响应图 |
| usemap | 关联<map>元素 |
<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap>
</a>
（3）<map>创建分区响应图
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多边形">
</map>
通过图片中的热点进行超链接，这里我们是采用 Dreamweaver 进行操作生成的。
（4）<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a> |
<a href="http://www.baidu.com" target="in">百度</a>
<iframe src="http://www.ycku.com" width="600" height="500" name="in"></iframe>
<iframe>表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面，width 和 height 表示内嵌文档的长度和高度，name 表示用于 target 的名称。
（5）<embed>嵌入插件内容
<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>
<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频。type 类型表示被插入内容的类型；width 和 height 表示宽高；src 表示文件路径。
（6）<object>和<param>元素
<object>元素和<embed>一样，只不过 object 是 HTML4 的标准，而 embed 是HTML5 的标准。而 object 不但可以嵌入 flash，还可以嵌入图片等其他内容。然而图片、音频、视频、插件都有相应标签元素代替。
（7）<progress>显示进度
<progress value="30" max="100"></progress>
<progress>元素可以显示一个进度条，一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。
（8）<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
<meter>元素显示某个范围内的值。其下的属性包含：min 和 max 表示范围边界，low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。
9、音频和视频
（1）音频和视频概述
首先，我们要理解两个概念：容器（container）和编解码器(codec)。
1）视频容器
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2）编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，视频编解码器：H.264、VP8、Ogg Theora。
3）浏览器支持情况
起初，HTML5 规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的标准，不愿实现标准；而有一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一规范的要求，导致各个浏览器实现自己的标准。
| 容器格式 | 视频编解码 | 音频编解码 | IE9+ | Firefox5+ | Chrome13+ |
|---|---|---|---|---|---|
| WebM | VP8 | Vorbis | × | √ | √ |
| OGG | Theora | Vorbis | × | √ | √ |
| MPEG-4 | H.264 | AAC | √ | × | 疑问？ |
除了上面三款浏览器，还有 Safari5+支持 MPEG-4,Opera11 支持 WebM 和 OGG，通过这组数据，只要备好 MP4 和 OGG 格式的即可，但对于新的高清标准 WebM，当然是非常必要的。因为 WebM 不但清晰度高，而且免费，不受限制许可的使用源码和专利权。
目前 Chrome 浏览器，为了推广 WebM 格式的视频。声称未来将放弃H.264 编码的视频，所以有可能在以后的版本中无法播放 MP4 的视频。当然，目前演示的版本还是支持的。
（2）video 视频元素
以往的视频播放，需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是 HTML5 的 video元素。<video>元素的属性如下。
| 属性名称 | 说明 |
|---|---|
| src | 视频资源的 URL |
| width | 视频宽度 |
| height | 视频高度 |
| autoplay | 设置后，表示立刻开始播放视频 |
| preload | 设置后，表示预先载入视频 |
| controls | 设置后，表示显示播放控件 |
| loop | 设置后，表示反复播放视频 |
| muted | 设置后，表示视频处于静音状态 |
| poster | 指定视频数据载入时显示的图片 |
1）嵌入一个 WebM 视频
<video src="test.webm" width="800" height="600"></video>
<video>插入一个视频，主流的视频为.webm，.mp4，.ogg 等。src 表示资源URL；width 表示宽度；height 表示高度。
2）附加一些属性
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted 表示静音。
3）预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls preload="none"></video>
preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。
4）使用预览图
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
poster 属性表示在视频的第一帧，做一张预览图。
5）兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object>
</video>
通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。
（3）audio 音频元素
和 video 元素一样，audio 元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用<source>元素引入多种格式兼容即可。主流的音频格式有：.mp3，.m4a，.ogg，.wav。
| 属性名称 | 说明 |
|---|---|
| src | 音频资源的 URL |
| autoplay | 设置后，表示立刻开始播放音频 |
| preload | 设置后，表示预先载入音频 |
| controls | 设置后，表示显示播放控件 |
1）嵌入一个音频
<audio src="test.mp3" controls autoplay></audio>
2）兼容多个浏览器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
10、表单元素
（1）表单元素总汇
| 元素名称 | 说明 |
|---|---|
| form | 表示 HTML 表单 |
| input | 表示用来收集用户输入数据的控件 |
| textarea | 表示可以输入多行文本的控件 |
| select | 表示用来提供一组固定的选项 |
| option | 表示提供一个选项 |
| optgroup | 表示一组相关的 option 元素 |
| button | 表示可用来提交或重置的表单按钮（或一般按钮） |
| datalist | 定义一组提供给用户的建议值 |
| fieldset | 表示一组表单元素 |
| legend | 表示 fieldset 元素的说明性标签 |
| label | 表示表单元素的说明标签 |
| output | 表示计算结果 |
（2）表单元素解析
1）<form>定义表单
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
<form>元素主要是定义本身是一组表单。
| 元素名称 | 说明 |
|---|---|
| action | 表示表单提交的页面 |
| method | 表示表单的请求方式：有 POST 和 GET 两种，默认 GET |
| enctype | 表示浏览器对发送给服务器的数据所采用的编码格式。有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）、text/plain（未规范的编码，不建议使用，不同浏览器理解不同） |
| name | 设置表单名称，以便程序调用 |
| target | 设置提交时的目标位置：_blank、_parent、_self、_top |
| autocomplete | 设置浏览器记住用户输入的数据，实现自动完成表单。默认为 on 自动完成，如果不想自动完成则设置 off |
| novalidate | 设置是否执行客户端数据有效性检查 |
使用 get 提交数据：method=“get”
取消自动提示功能：autocomplete=“off”
使用_blank 新建目标：target="_blank"
2）<input>表示用户输入数据
<input name="user">
<input>元素默认情况会出现一个单行文本框，有五个属性。
| 属性名称 | 说明 |
|---|---|
| autofocus | 让光标聚焦在某个 input 元素上，让用户直接输入 |
| disabled | 禁用 input 元素 |
| autocomplete | 单独设置 input 元素的自动完成功能 |
| form | 让表单外的元素和指定的表单挂钩提交 |
| type | input 元素的类型 |
| name | 定义 input 元素的名称，以便接收到相应的值 |
聚焦光标：<input name="user" autofocus>
禁用 input：<input name="user" disabled>
禁止自动完成：<input name="user" autocomplete="off">
表单外的 input：
<form method="get" id="register">
...
</form>
<input name="email" form="register">
3）<label>添加说明标签
<p><label for="user">用户名：</label><input id="user" name="user"></p>
<p><label>用户名：<input id="user" name="user"></label></p>
<label>元素可以关联 input，让用户体验更好。且更加容易设置 CSS 样式。
4）<fieldset>对表单进行编组
<fieldset>...</fieldset>
<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。
| 属性名称 | 说明 |
|---|---|
| name | 给分组定义一个名称 |
| form | 让表单外的分组与表单挂钩 |
| disabled | 禁用分组内的表单 |
5）<legend>添加分组说明标签
<fieldset>
<legend>注册表单</legend>
</fieldset>
<legend>元素给分组加上一个标题。
6）<button>添加按钮
<button type="submit"></button>
<button>元素添加一个按钮，type 属性有如下几个值：
| 值名称 | 说明 |
|---|---|
| submit | 表示按钮的作用是提交表单，默认 |
| reset | 表示按钮的作用是重置表单 |
| button | 表示按钮为一般性按钮，没有任何作用 |
提交表单：<button type="submit">提交</button>
重置表单：<button type="reset">重置</button>
普通按钮：<button type="button">按钮</button>
对于 type 属性为 submit 时，按钮还会提供额外的属性。
| 属性名称 | 说明 |
|---|---|
| form | 指定按钮关联的表单 |
| formaction | 覆盖 form 元素的 action 属性 |
| formenctype | 覆盖 form 元素的 enctype 属性 |
| formmethod | 覆盖 form 元素的 method 属性 |
| formtarget | 覆盖 form 元素的 target 属性 |
| formnovalidate | 覆盖 form 元素的 novalidate 属性 |
表单外关联提交：<button type="submit" form="register">提交</button>
