HTML5
一．HTML5 文档结构
1.第一步：打开编辑器，打开指定文件夹；
2.第二步：保存 index.html 文件到磁盘中，.html 是网页后缀；
3.第三步：开始编写 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 文档结束 -->
二．文档结构解析
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>
三．元素标签探讨
HTML 是一种标记语言，刚才的结构我们已经详细探讨过。这里，我们再剖析一下这些“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。
1.元素
元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字，比如<body>、<title>、<meta>都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。
元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用<meta>，插入图片就用<img>；双标签一般用于设置一段区域的内容，将其包含起来，比如段落<p>…</p>。
2.属性和值
元素除了有单双之分， 元素的内部还可以设置属性和值。 这些属性值用来改变元素某些方面的行为。比如超链接：<a>中的 href 属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。
HTML5元素
HTML5 规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。
| 元素名称 | 说明 |
|---|---|
| a | 生成超链接 |
| br | 强制换行 |
| wbr | 可安全换行 |
| b | 标记一段文字但不强调 |
| strong | 表示重要 |
| i | 表示外文或科学术语 |
| em | 表示强调 |
| code | 表示计算机代码 |
| var | 表示程序输出 |
| samp | 表示变量 |
| kbd | 表示用户输入 |
| abbr | 表示缩写 |
| cite | 表示其他作品的标题 |
| del | 表示被删除的文字 |
| s | 表示文字已不再确认 |
| dfn | 表示术语定义 |
| mark | 表示与另一段上下文有关的内容 |
| q | 表示引自他处的内容 |
| rp | 与 ruby 元素结合使用，标记括号 |
| rt | 与 ruby 元素结合使用，标记括号 |
| ruby | 表示位于表意文字上方或右方的注音符号 |
| bdo | 控制文字的方向 |
| small | 表示小号字体内容 |
| sub | 表示下标字体 |
| sup | 表示上标字体 |
| time | 表示时间或日期 |
| u | 标记一段文字但不强调 |
| span | 通用元素，没有任何语义。一般配合 CSS 修饰。行级标签。 |
| div | 通用元素，没有任何语义。一般配合 CSS 修饰。会计标签。 |
从上面这张表格中，我们发现文本元素还是非常多的。但实际上，在现实应用中，真正常用的也就是那么几个，绝大部分是针对英文的。
一．文本元素解析
1.<b>表示关键字和产品名称
<b>HTML5</b>
解释：<b>元素实际作用就是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。
2.<strong>表示重要的文字
<strong>HTML5</strong>
解释：<strong>元素实际作用和<b>一样，就是加粗。从语义上来看，就是强调一段重要的文本。
3.<br>强制换行、<wbr>安全换行
<br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
解释：在任意文本位置键入<br>都会被换行，而在英文单词过长时使用<wbr>会根据浏览器的宽度适当的裁切换行。
4.<i>表示外文词汇或科技术语
<i>HTML5</i>
解释：<i>元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性。
5.<em>加以强调
<em>HTML5</em>
解释：<em>元素实际作用和<i>一样，就是倾斜；从语义上来看，表示对一段文本的强调。
6.<s>表示不准确或校正
<s>HTML5</s>
解释：<s>元素实际作用就是删除线；从语义上来看，表示不准确的删除。
7.<del>表示删除文字
<del>HTML5</del>
解释：<del>元素实际作用和<s>一样，就是删除线；从语义上来看，表示删除相关文字。
8.<u>表示给文字加上下划线
<u>HTML5</u>
解释：<u>元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本。
9.<ins>添加一段文本
<ins>HTML5</ins>
解释：<ins>元素实际作用和<u>一样，加一条下划线；从语义上来看，是添加一段文本，起到强调的作用。
10.<small>添加小号字体
<small>HTML5</small>
解释：<small>元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。
11.<sub><sup>添加上标和下标
<sub>5</sub><sup>5</sup>
解释：<sub>和<sup>元素实际作用就是数学的上标和下标。语义也是如此。
12.<code>等表示输入和输出
<code>HTML5</code>
<var>HTML5</var>
<samp>HTML5</samp>
<kdb>HTML5</kdb>
解释：<code>表示计算机代码片段；<var>表示编程语言中的变量；<samp>表示程序或计算机的输出；<kdb>表示用户的输入。由于这属于英文范畴的，必须将 lang="en"英语才能体现效果。
13.<abbr>表示缩写
<abbr>HTML5</abbr>
解释：<abbr>元素没有实际作用；从语义上看，是一段文本的缩写。
14.<dfn>表示定义术语
<dfn>HTML5</dfn>
解释：<dfn>元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。
15.<q>引用来自他处的内容
<q>HTML5</q>
解释：<q>元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。
16.<cite>引用其他作品的标题
<cite>HTML5</cite>
解释：<cite>元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。
17.<ruby>语言元素
<ruby> 饕<rp>(</rp><rt>tāo</rt><rp>)</rp> 餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby>
解释：<ruby>用来为非西方语言提供支持。<rp>``<rt>用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前 Firefox 还不支持此特性。
18.<bdo>设置文字方向
<bdo dir="rtl">HTML5</bdo>
解释：<bdo>必须使用属性 dir 才可以设置，一共两个值：rtl（从右到左）和 ltr（从左到右）。一般默认是 ltr。还有一个元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。
19.<mark>突出显示文本
<mark>HTML5</mark>
解释：<mark>实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。
20.<time>表示日期和时间
<time>2015-10-10</time>
解释：<time>元素没有实际作用；从语义上来看，表示日期和时间。
21.<span>表示一般性文本
<span>HTML5</span>
解释：<span>元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置 CSS 等操作。
超链接和路径
一．超链接的属性
元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属性或叫做全局属性。这方面的知识，后面会详细探讨。
| 属性名称 | 说明 |
|---|---|
| href | 指定元素所指资源的 URL |
| hreflang | 指向的链接资源所使用的语言 |
| media | 说明所链接资源用于哪种设备 |
| rel | 说明文档与所链接资源的关系类型 |
| target | 指定用以打开所链接资源的浏览环境 |
| type | 说明所链接资源的 MIME 类型（比如 text/html） |
在这几个属性当中，只有 href 和 target 一般比较常用，而 href 是必须要用的。其他几个属性，在元素使用较少，将在 CSS 章节再探讨。
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 中，框架基本被废弃，只能使用<iframe>元素，且以后大量结合 JavaScript 和 PHP 等语言配合，框架用的就很少了。
二．相对与绝对路径
所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从 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；
三．锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。通过属性 id 或 name 实现锚点定位。
//链接
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
分组元素
一．分组元素总汇为了页面的排版需要，HTML5 提供了几种语义的分组元素。
| 元素名称 | 说明 |
|---|---|
| p | 表示段落 |
| div | 一个没有任何语义的通用元素，和 span 是对应元素 |
| blockquote | 表示引自他出的大段内容 |
| pre | 表示其格式应被保留的内容 |
| hr | 表示段落级别的主题转换，即水平线 |
| ul,ol | 表示无序列表，有序列表 |
| li | 用于 ul,ol 元素中的列表项 |
| dl,dt,dd | 表示包含一系列术语和定义说明的列表。dt 在 dl 内部表示术语，一般充当标题；dd 在 dl 内部表示定义，一般是内容。 |
| figure | 表示图片 |
| figcaption | 表示 figure 元素的标题 |
二．分组元素解析
1.<p>建立段落
<p> 这是一个段落 </p><p> 这也是一个段落 </p>
解释：<p>元素实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持一定量的空隙。
2.<div>通用分组
<div> 这是一个通用分组 </div><div> 这是又一个通用分组 </div>
解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。
而在 HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和<p>段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和<br>换行一样。
3.<blockquote>引用大段他出内容
<blockquote> 这是一个大段引自他出内容 </blockquote><blockquote> 这是另一个大段引自他出内容 </blockquote>
解释：<blockquote>元素实际作用除了和
元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他出的内容。
4.<pre>展现格式化内容
<pre> ##### ##### ##### ##### ##### </pre>
解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。
5.<hr>添加分隔
<hr>
解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。
6.<ul><li>添加无序列表
<ul>
<li> 张三 </li>
<li> 李四 </li>
<li> 王五 </li>
<li> 马六 </li>
</ul>
解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。
7.<ol><li>添加有序列表
<ol> <li> 张三 </li> <li> 李四 </li> <li> 王五 </li> <li> 马六 </li></ol>
解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三种属性
ol 元素属性
| 属性名称 | 说明 |
|---|---|
| start | 从第几个序列开始统计： |
| reversed | 是否倒序排列：
|
| type | 表示列表的编号类型，值分别为：1、a、A、i、I |
li 元素属性
| 属性名称 | 说明 |
|---|---|
| value | 强行设置某个项目的编号。 |
<li value="7">王五</li>
8.<dl><dt><dd>生成说明列表
<dl> <dt> 这是一份文件 </dt> <dd> 这里是这份文件的详细内容 1 </dd> <dd> 这里是这份文件的详细内容 2 </dd></dl>
解释：这三个元素是一个整体，但
9.<figure><figcaption>使用插图
<figure> <figcaption> 这是一张图 </figcaption> <img src="img.png"></figure>
解释：这两个元素一般用于图片的布局。
表格元素
表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在。
| 元素名称 | 说明 |
|---|---|
| table | 表示表格 |
| thead | 表示标题行 |
| tbody | 表示表格主体 |
| tfoot | 表示表脚 |
| tr | 表示一行单元格 |
| th | 表示标题行单元格 |
| td | 表示单元格 |
| col | 表示一列 |
| colgroup | 表示一组列 |
| caption | 表示表格标题 |
二．构建表格解析
1.<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 即可显示边框。
2.<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 等。
3.<thead>添加表头
<thead> <tr> <th>姓名</th> <th>性别</th> <th>婚姻</th> </tr></thead>
解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
4.<tfoot>添加表脚
<tfoot> <tr> <td colspan="3">统计：共两名</td> </tr></tfoot>
解释：<tfoot>元素为表格生成表脚，限制在表格的底部。
5.<tbody>添加表主体
<tbody> <tr> <td>张三</td> <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr></tbody>
解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续 CSS 和 JavaScript 的控制。
6.<caption>添加表格标题
<caption>这是一个人物表</caption>
解释：<caption>元素给表格添加一个标题。
7.<colgroup>设置列
<colgroup span="2" style="background:red;">
解释：<colgroup>元素是为了处理某个列，span 属性定义处理哪些列。1 表示第一列， 2 表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。
8.<col>更灵活的设置列
<colgroup> <col> <col style="background:red;" span="1"></colgroup>
解释：<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了 span 则，控制多列。
文档元素
一．文档元素总汇文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。
| 元素名称 | 说明 |
|---|---|
| h1~h6 | 表示标题 |
| header | 表示首部 |
| footer | 表示尾部 |
| nav | 表示有意集中在一起的导航元素 |
| section | 表示重要概念或主题 |
| article | 表示一段独立的内容 |
| address | 表示文档或 article 的联系信息 |
| aside | 表示与周边内容少有牵涉的内容 |
| hgroup | 将一组标题组织在一起 |
| details | 生成一个区域，用户将其展开可以获得更多细节 |
| summary | 用在 details 元素中，表示该元素内容的标题或说明 |
二．文档元素解析
文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习 CSS，配合使用才能起到布局和样式的效果。
1.<header>表示首部
<header> 这里部分一般是页面头部，包括：LOGO、标题、导航等内容 </header>
解释：<header>元素主要设置页面的标头部分。
2.<footer>表示尾部
<footer> 这里是页面的尾部，一般包括：版权声明、友情链接等内容 </footer>
解释：<footer>元素主要设置页面的尾部。
3.<h1>~<h6>添加标题
<h1>标题部分</h1><h4>
<h4>小标题部分</h4>
解释：
~实际作用就是加粗并改变字体大小。用于各种标题文档。
4.<hgroup>组合标题
<hgroup> <h1>标题部分</h1> <h4>小标题部分</h4></hgroup>
解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。
5.<section>文档主题
<section> 这里一般是存放文档主题内容。 </section>
解释：<section>元素的作用是定义一个文档的主题内容。
6.<nav>添加导航
<nav>这里存放文档的导航</nav>
解释：<nav>元素给文档页面添加一个导航。
7.<article>添加一个独立成篇的文档
<article> <header> <nav></nav> </header> <section></section> <footer></footer></article>
解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。
8.<aside>生成注释栏
<aside>这是是一个注释</aside>
解释：<aside>元素专门为某一段内容进行注释使用。
9.<address>表示文档或 article 元素的联系信息。
<address>联系信息</address>
解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息。
10.<details>元素生成详情区域、<summary>元素在其内部生成说明标签
解释：由于大多数主流浏览器尚未支持，暂略。
嵌入元素
一．嵌入元素总汇
这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等会在后面章节或季度讲解。
| 元素名称 | 说明 |
|---|---|
| img | 嵌入图片 |
| map | 定义客户端分区响应图 |
| area | 表示一个用户客户端分区响应图的区域 |
| audio | 表示一个音频资源 |
| video | 表示一个视频资源 |
| iframe | 嵌入一个文档 |
| embed | 用插件在 HTML 中嵌入内容 |
| canvas | 生成一个动态的图形画布 |
| meter | 嵌入数值在许可值范围背景中的图形表示 |
| object | 在 HTML 文档中嵌入内容 |
| param | 表示将通过 object 元素传递给插件的参数 |
| progress | 嵌入目标进展或任务完成情况的图形表示 |
| source | 表示媒体资源 |
| svg | 表示结构化矢量内容 |
| track | 表示媒体的附加轨道（例如字幕） |
二．嵌入元素解析
1.<img>嵌入图像
<img src="img.png">
解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。
img 的私有属性
| 属性名称 | 说明 |
|---|---|
| src | 嵌入图像的 URL |
| alt | 当图片不加载时显示的备用内容 |
| width | 定义图片的长度（单位是像素） |
| height | 定义图片的高度（单位是像素） |
| ismap | 创建服务器端分区响应图 |
| usemap | 关联 |
<a href="index.html"><img src="img.png" width="339" height="229" alt="风景图" ismap> </a>
2.<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 进行操作生成的。
3.<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 的名称。
4.<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 表示文件路径。
5.<object>和<param>元素
解释：<object>元素和<embed>一样，只不过 object 是 html4 的标准，而 embed 是 html5 的标准。而 object 不但可以嵌入 flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。
6.<progress> 显示进度
<progress value="30" max="100"></progress>
解释：<progress>元素可以显示一个进度条，一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。
7.<meter>显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
解释：<meter>元素显示某个范围内的值。其下的属性包含：min 和 max 表示范围边界， low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。
音频和视频
一．音频和视频概述
首先，我们要理解两个概念：容器（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 的视频。当然，目前演示的版本还是支持的。
二．video 视频元素
以往的视频播放，需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代它的正是 HTML5 的 video 元素。
| 属性名称 | 说明 |
|---|---|
| src | 视频资源的 URL |
| width | 视频宽度 |
| height | 视频高度 |
| autoplay | 设置后，表示立刻开始播放视频 |
| preload | 设置后，表示预先载入视频 |
| controls | 设置后，表示显示播放控件 |
| loop | 设置后，表示反复播放视频 |
| muted | 设置后，表示视频处于静音状态 |
| poster | 指定视频数据载入时显示的图片 |
1.嵌入一个 WebM视频
<video src="test.webm" width="800" height="600"></video>
解释：
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" controlspreload="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>元素引入多种格式的视频，让更多的浏览器保持兼容。
二．audio音频元素
和 video 元素一样，audio 元素用于嵌入音频内容，而音频元素的属性和视频元素类似。音频的支持度和视频类似，使用
| 属性名称 | 说明 |
|---|---|
| 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>
解释：略。
PS：更多设计到 API 的 JavaScript 控制，将在以后的基于 JavaScript 基础后讲解。
表单元素
一．表单元素总汇
在 HTML5 的表单中，提供了各种可供用户输入的表单控件。
| 元素名称 | 说明 |
|---|---|
| form | 表示 HTML 表单 |
| input | 表示用来收集用户输入数据的控件 |
| textarea | 表示可以输入多行文本的控件 |
| select | 表示用来提供一组固定的选项 |
| option | 表示提供提供一个选项 |
| optgroup | 表示一组相关的 option 元素 |
| button | 表示可用来提交或重置的表单按钮（或一般按钮） |
| datalist | 定义一组提供给用户的建议值 |
| fieldset | 表示一组表单元素 |
| legend | 表示 fieldset 元素的说明性标签 |
| label | 表示表单元素的说明标签 |
| output | 表示计算结果 |
二．表单元素解析
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">用户名：<input id="user" name="user"></label></p>
解释：
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>
三．type 属性总汇
input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容。
| 属性名称 | 说明 |
|---|---|
| text | 一个单行文本框，默认行为 |
| password | 隐藏字符的密码框 |
| search | 搜索框，在某些浏览器键入内容会出现叉标记取消 |
| submit、reset、button | 生成一个提交按钮、重置按钮、普通按钮 |
| number、range | 只能输入数值的框；只能输入在一个数值范围的框 |
| checkbox、radio | 复选框，用户勾选框；单选框，只能在几个中选一个 |
| image、color | 生成一个图片按钮，颜色代码按钮 |
| email、tel、url | 生成一个检测电子邮件、号码、网址的文本框 |
| date、month、time、week、datetime、datetime-local | 获取日期和时间 |
| hidden | 生成一个隐藏控件 |
| file | 生成一个上传控件 |
四．input 元素解析
1.type 为 text 值时****
<input type="text">
解释：当 type 值为 text 时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。并且，还提供了一些额外的属性。
| 属性名称 | 说明 |
|---|---|
| list | 指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值 |
| maxlength | 设置文本框最大字符长度 |
| pattern | 用于输入验证的正则表达式 |
| placeholder | 输入字符的提示 |
| readonly | 文本框处于只读状态 |
| disabled | 文本框处于禁用状态 |
| size | 设置文本框宽度 |
| value | 设置文本框初始值 |
| required | 表明用户必须输入一个值，否则无法通过输入验证 |
//设置文本框长度
<input type="text" size="50">
//设置文本框输入字符长度
<input type="text" maxlength="10">
//设置文本框的初始值
<input type="text" value="初始值">
//设置文本框输入提示
<input type="text" placeholder="请输入内容">
//设置文本提供的建议值
<input list="footlist"><datalist id="footlist"> <option value="苹果">苹果</option> <option value="桔子">桔子</option> <option value="香蕉" label="香蕉"> <option value="梨子"></datalist>
//设置文本框内容为只读，可以提交数据
<input type="text" readonly>
//设置文本框内容不可用，不可以提交数据
<input type="text" disabled>
2.type为 password值时
<input type="password">
解释：当 type 值为 password 时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。
| 属性名称 | 说明 |
|---|---|
| maxlength | 设置密码框最大字符长度 |
| pattern | 用于输入验证的正则表达式 |
| placeholder | 输入密码的提示 |
| readonly | 密码框处于只读状态 |
| disabled | 文本框处于禁用状态 |
| size | 设置密码框宽度 |
| value | 设置密码框初始值 |
| required | 表明用户必须输入同一个值 |
这里除了正则和验证需要放在下一节，其余和文本框一致。
3.type为 search时
<input type="search">
解释：和文本框一致，在除 Firefox 浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和 text 一致。
4.type为 number、range时
<input type="number"><input type="range">
解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式。额外属性如下：
| 属性名称 | 说明 |
|---|---|
| list | 指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值 |
| min | 设置可接受的最小值 |
| max | 设定可接受的最大值 |
| readonly | 设置文本框内容只读 |
| required | 表明用户必须输入一个值，否则无法通过输入验证 |
| step | 指定上下调节值的步长 |
| value | 指定初始值 |
//范围和步长
<input type="number" step="2" min="10" max="100">
5.type为 date系列时
<input type="date"><input type="month"><input type="time"><input type="week"><input type="datetime"><input type="datetime-local">
解释：实现文本框可以获取日期和时间的值，但支持的浏览器不完整。我们测试 Chrome 和 Opera 支持，其他浏览器尚未支持。所以，在获取日期和时间，目前还是推荐使用 jQuery 等前端库来实现日历功能。额外属性和 number 一致。
6.type为 color时
<input type="color">
解释：实现文本框获取颜色的功能，最新的现代浏览器测试后 IE 不支持，其余的都能显示一个颜色对话框提供选择。
7.type为 checkbox、radio时
音乐<input type="checkbox"> 体育<input type="checkbox"><input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女
解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：
| 属性名称 | 说明 |
|---|---|
| checked | 设置复选框、单选框是否为勾选状态 |
| required | 表示用户必须勾选，否则无法通过验证 |
| value | 设置复选框、单选框勾选状态时提交的数据。默认为 on |
//默认勾选，默认值为 1
<input type="checkbox" name="music" checked value="1">
8.type为 submit、reset和 button时
<input type="submit">
解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。
| 值名称 | 说明 |
|---|---|
| submit | 生成一个提交按钮 |
| reset | 生成一个重置按钮 |
| button | 生成一个普通按钮 |
如果是 submit 时，还提供了和<button>元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。
9.type为 image时
<input type="image" src="img.png">
解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。
| 属性名称 | 说明 |
|---|---|
| src | 指定要显示图像的 URL |
| alt | 提供图片的文字说明 |
| width | 图像的长度 |
| height | 图像的高度 |
| 提交额外属性 | formaction、formenctype、formmethod、formtarget和 formnovalidate。 |
10.type为 email、tel、url时
<input type="email"><input type="tel"><input type="url">
解释：email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text 一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。
11.type为 hidden时
<input type="hidden">
解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。
12.type为 file时
<input type="file">
解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：
| 属性名称 | 说明 |
|---|---|
| accept | 指定接受的 MIME 类型 |
| required | 表明用户必须提供一个值，否则无法通过验证 |
accept="image/gif, image/jpeg, image/png"
五．其他元素
表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、和 output 计算结果元素。
| 元素名称 | 说明 |
|---|---|
| select | 生成一个下拉列表进行选择 |
| optgroup | 对 select 元素进行编组 |
| option | select 元素中的项目 |
| textarea | 生成一个多行文本框 |
| output | 表示计算结果 |
1.生成下拉列表
<select name="fruit"> <option value="1">苹果</option> <option value="2">橘子</option> <option value="3">香蕉</option></select>
解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。
| 属性名称 | 说明 |
|---|---|
| name | 设定提交时的名称 |
| disabled | 将下拉列表禁用 |
| form | 将表单外的下拉列表与某个表单挂钩 |
| size | 设置下拉列表的高度 |
| multiple | 设置是否可以多选 |
| autofocus | 获取焦点 |
| required | 选择验证，设置后必须选择才能通过 |
//设置高度并实现多选
<select name="fruit" size="30" multiple>
//默认首选
<option value="2" selected>橘子</option>
//使用 optgroup 进行分组，label 为分组名称，disabled 可以禁用分组
<optgroup label="水果类"> <option value="1">苹果</option> <option value="2" selected>橘子</option> <option value="3" label="香蕉">香蕉</option></optgroup>
2.多行文本框
<textarea name="content">请留下您的建议！ </textarea>
解释：生成一个可变更大小的多行文本框。属性如下：
| 属性名称 | 说明 |
|---|---|
| name | 设定提交时的名称 |
| form | 将表单外的多行文本框与某个表单挂钩 |
| readonly | 设置多行文本框只读 |
| disabled | 将多行文本框禁用 |
| maxlength | 设置最大可输入的字符长度 |
| autofocus | 获取焦点 |
| placeholder | 设置输入时的提示信息 |
| rows | 设置行数 |
| cols | 设置列数 |
| wrap | 设置是否插入换行符，有 soft 和 hard 两种 |
| required | 设置必须输入值，否则无法通过验证 |
//设置行高和列宽，设置插入换行符
<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>
3.计算结果
<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> <input type="number" id="num1"> x <input type="number" id="num2"> <output for="num1 num2" name="res"></form>
解释：output 就是计算两个文本框之间的值，其实就是内嵌了 JavaScript 功能。
六．输入验证
HTML5 对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。
//必须填写一个值
<input type="text" required>
//限定在某一个范围内
<input type="number" min="10" max="100">
//使用正则表达式
<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">
//禁止表单验证
<form action="http://li.cc" novalidate>
全局属性
全局属性
在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如id。全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。
1.id属性
<p id="abc">段落</p>
解释：id 属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS 和 JavaScript 调用选择元素。一个页面只能出现一次同一个 id 名称。
2.class属性
<p class="abc">段落</p><p class="abc">段落</p>
<p class="abc">段落</p>
解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样式。
3.accesskey属性
<input type="text" name="user" accesskey="n">
解释：快捷键操作，windows 下 alt+指定键，前提是浏览器 alt 并不冲突。
4.contenteditable属性
<p contenteditable="true">我可以修改吗</p>
解释：让文本处于可编辑状态，设置 true 则可以编辑，false 则不可编辑。或者直接设置属性。
5.dir属性
<p dir="rtl">文字到右边了</p>
解释：让文本从左到右（ltr），还是从右到左（rtl）。
6.hidden属性
<p hidden>文字到右边了</p>
解释：隐藏元素。
7.lang属性
<p lang="en">HTML5</p>
解释：可以局部设置语言。
8.title属性
<p title="HTML5 教程">HTML5</p>
解释：对元素的内容进行额外的提示。
9.tabindex属性
<input type="text" name="user" tabindex="2"><input type="text" name="user" tabindex="1">
解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。
10.style属性
<p style="color:red;">CSS 样式</p>
解释：设置元素行内 CSS 样式。