HTML 学习笔记

关于 HTML

HTML: Hyper Text Markup Language（超文本标记语言）
标记语言是一套标记标签(markup tag)，HTML 使用标记标签来描述网页。
标签对中的第一个标签是开始标签，第二个标签是结束标签，也称为开放标签和闭合标签。
HTML 文档包含 HTML 标签和纯文本。HTML 文档 = 网页。
HTML5 是当前最新的 HTML 标准。与其他标准不同的是，它是一个 “活的标准”，以后 HTML 的新内容都会添加到这个标准中，所以，不会再有 HTML6、7、8。在不久的将来，当 HTML5 完全普及之后，人们所说的 HTML 就完全指代的是 HTML5 了。

HTML 元素

关于元素

HTML 元素由三部分构成：标签、内容、属性。以开始标签起始，以结束标签终止。标签、属性名及属性值用小写。
元素的内容是开始标签与结束标签之间的内容。
某些 HTML 元素具有空内容。
空元素在开始标签中就关闭（单标签）
大多数 HTML 元素可以嵌套，HTML 文档由嵌套的 HTML 元素构成。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。所以无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。除非使用“计算机输出”标签。
大多数 HTML 元素被定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束），而内联元素在显示时通常不会以新行开始。

语义标签与物理样式标签

语义标签：
- 语义标签主要用于赋予一段文本一定的语义或上下文，它的样式仅仅是浏览器为了凸显出这段文本的语义而“顺便”附加给它的。不同的浏览器为同一个语义标签附加的样式可能不同。
- 语义标签可以为浏览器、翻译系统以及搜索引擎提供有用的信息，还能提高浏览器解析速度。
物理样式标签：
- 物理样式标签仅仅是赋予一段文本某种样式，而不会赋予语义。所以它们完全可以、也最好使用 CSS 来代替。
- 由于物理样式标签不会赋予语义，所以在浏览器、搜索引擎等看来，它们是冗余的。所以物理样式标签会降低浏览器解析速度。

举个栗子：<em></em> 标签只是表示强调，而不一定是斜体，只不过大多数浏览器用斜体来修饰 <em></em> 中的文本。而 <i></i> 就只是表示斜体，并没有表示强调的意思。从这儿就可以看出基于内容的样式和物理样式的差别。

HTML 文档基本架构

<!DOCTYPE html>             <!-- 声明文档类型 -->
<html lang="en">            <!-- lang 指定语言。en 为英文，zh 为中文 -->
<head>                      <!-- <head></head> 标签包含文档头部信息 -->
    <meta charset="UTF-8">  <!-- 指定字符编码集 -->
    <title>Document</title> <!-- 指定文档的标题 -->
</head>
<body>                      <!-- 文档主体内容全部包含在 <body></body> 标签中 -->
    <!-- HTML -->
</body>
</html>

基本元素

标题 (heading)：<h1></h1> - <h6></h6>。这些标签只用于标题，不要仅仅为了产生粗体或大号文本而使用标题标签（注意标签的语义）。
段落 (paragraph)：<p></p>。该标签只用于声明一个段落，不要仅仅为了在一段文字前后加空行而使用段落标签（注意标签的语义）。
换行：<br/>
水平线：<hr/>
注释：。另外还有条件注释，如：
1
2
3

该条件注释的作用是：定义只有 Internet Explorer 执行的 HTML 标签。

HTML 头部信息

<head></head> 是所有头部信息的容器，以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title></title> 指定文档的标题。

<base /> 标签为页面上的所有链接规定默认地址或默认目标（target）

<head>
<base target="_blank" />
<!-- 指定页面上所有链接的默认打开目标是新窗口 -->
</head>

<link /> 定义文档与外部资源的关系，常用来连接样式表。
<style></style> 为文档定义内部 CSS 样式。
<script></script> 定义用于客户端的脚本（主要是 JavaScript 脚本）。
<meta /> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
- 使用 <meta> 元素规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据：样例
- 使用 <meta> 重定向网址：样例
- <link rel="canonical" href="网页链接">：主要是帮助搜索引擎制定规范的链接，解决网站内容重复收录而存在多个版本的问题。如果不采用 rel="canonical" 标签，可能会导致搜索引擎对两个相同的网页的收录和排名问题不知情，久而久之，当网站存在大量这样的网页的时候，可能导致网站因存在大量重复内容而被降权、不收录甚至被K。

超链接

1	<a href="链接地址" target="打开链接的方式">文本内容</a>

a —— anchor（锚点）
href 属性指定链接地址，链接地址可以是本地地址、网址、锚或邮件地址。href: hypertext reference
有时想添加一个 <a> 元素，但暂时还不知道要将它链接到哪儿，此时可以使用固定链接。把 <a> 元素的 href 属性的值替换为一个 #，别名 hash(哈希) 符号，将其变为一个固定链接。
有些浏览器可能会对路径长度做限制，所以路径长度最好不要超过255个字符。
注意：如果 href 的值为网址，网址最后的斜杠最好不要丢。因为假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/“。
当 href 的值为本地地址或网址时，可以用 target 属性指定打开链接的方式。
target="_blank" 标识在浏览器新标签中打开链接；
如果页面被固定在某个框架之内，可以使用 target="_top" 跳出框架。
可以使用命名锚（anchor）实现页面内的跳转或跳转到指定页面的指定位置。
首先在文档的某个位置写
1
<a name="label">锚（显示在页面上的文本，也可以为空）</a>
然后在同一个文档中创建指向该锚的链接：
1
<a href="#label">跳转到锚的位置</a>
name 也可以用 id 代替。
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

如果想要跳转到指定地址的指定锚：
1
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
使用 href 还可以使用户发送电子邮件，以下是几种关键字：

用法：

如果 `mailto` 后面同时有多个参数，第一个参数必须以 `?` 开头，后面的参数每一个都以 `&` 分隔。

图片

1	<img src="图片地址" alt="替换文本">

图片地址可以是相对路径、绝对路径，也可以是网址。
alt 指定加载失败时的替换文本。
图片可以是 jpg，jpeg，png，gif 格式的文件。
<img/> 标签是个内联元素，但在很多时候表现的像块级元素。
浏览器请求页面时，先请求 html 文档并分析，如果发现该文档引用了图片，则会一张一张地请求图片并显示它，每个图片都需要一次请求。
图片大小虽然可以使用属性调整，但太大的图片会对网速产生压力，所以最好在制作图片时就将图片调整为合适大小。更好的方法是，为每个图片制作缩略图，在网页中放置缩略图，并使用 <a href="包含原图的网页"><img src="缩略图地址" alt=.../></a> 使缩略图链接到包含原图的网页。尽量不要用 href 直接链接到原图，而是链接到包含原图的网页，因为这样可以适量的提供一些上下文。
<map></map>：HTML map 标签
<area/>：HTML area 标签

列表

无序列表(ul, unordered list)

<ul>
    <li>文本</li>
    <li>文本</li>
    ......
</ul>

有序列表(ol, ordered list)

<ol>
    <li>文本</li>
    <li>文本</li>
    ......
</ol>

定义列表：定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。例子：定义列表

表格

定义一个表格：

如何用 HTML 代码定义下面这个表格？

班级学生数平均成绩

一班 30 89

二班 35 85

三班 32 80

班级	学生数	平均成绩
一班	30	89
二班	35	85
三班	32	80

HTML 代码实现：

<table summary="本表记录三个班中每个班的学生人数和平均成绩">
    <caption>各班人数与平均成绩</caption>
    <tr>
        <th>班级</th>
        <th>学生数</th>
        <th>平均成绩</th>
    </tr>
    <tr>
        <td>一班</td>
        <td>30</td>
        <td>89</td>
    </tr>
    <tr>
        <td>二班</td>
        <td>35</td>
        <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
    </tr>
</table>

解释：
- <table></table> 表示这是一个表格。
- 每个 <tr></tr> 标签为表格的一行。
- <td></td> 标明一行中的每个元素。如果是 <th></th>，说明这是表格头部，表格头部的文本默认加粗并居中。
- <th>，<td> 标签的 rowspan 和 colspan 属性可指定单元格占的行数与列数，用于合并单元格。
- 可以把 <th> 标签写在每一个 <tr> 的第一行中，这样就可以让表头在左侧。
- 如果不加 <tbody></tbody>，table 表格加载完后才显示。加上 tbody， tbody 包含行的内容下载完就直接显示，不必等待表格全部加载完成再显示。所以如果表格很长，可以用 tbody 分段，一部分一部分地显示。相似的标签还有 <thead></thead> 和 <tfoot></tfoot>。<thead></thead> 包含表格头，<tbody></tbody> 包含表格主题，<tfoot></tfoot> 包含表格尾注。
- 如果使用了 thead，tbody，tfoot 标签，不过它们的顺序如何，表格都会按照 thead -> tbody -> tfoot 的顺序显示。
- 表格默认没有边框，可以用 CSS 添加。
- <caption></caption> 包含的文本是表格的标题。
- 为 table 标签添加 summary 属性可以显示表格摘要。
- 更多有关表格的内容：HTML 表格

字符实体

在 HTML 中，某些字符是预留的，这些预留字符是不能使用的，比如 < 和 >，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。
字符实体可以用 实体名 或 实体编号 表示。实体名较容易记忆，但浏览器也许不支持所有的实体名，但对实体编号的支持却很好。

常用字符实体：

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`' (IE不支持)`	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

HTML 实体符号参考手册

文本格式化标签

语义标签

标签	描述
`<em></em>`	定义着重文字（一般表现为斜体）
`<strong></strong>`	定义加重语气（一般表现为粗体）
`<ins></ins>`	定义插入字
`<del></del>`	定义删除字

物理样式标签

标签描述

<i></i> 定义斜体字

<b></b> 定义粗体文本

<big></big> 定义大号字

<small></small> 定义小号字

<sub></sub> 定义下标字

<sup></sup> 定义上标字

标签	描述
`<i></i>`	定义斜体字
`<b></b>`	定义粗体文本
`<big></big>`	定义大号字
`<small></small>`	定义小号字
`<sub></sub>`	定义下标字
`<sup></sup>`	定义上标字

引用与术语定义

以下标签都是语义标签。

<q></q>(quote)：表示短引用。浏览器在解析代码时会自动为 q 标签包含的文本加上引号，这个样式也可以通过 CSS 修改。
<blockquote></blockquote>：表示长引用。浏览器在解析时会自动对 blockquote 标签包含的文本两端缩进。
<abbr></abbr>：用于表示缩略词。内容一般呈现斜体。
<dfn></dfn>：表示定义。内容呈现斜体。dfn 标签一般会定义一个 title 属性，用于阐述 dfn 定义的内容。
<address></address>：定义文档或文章的联系信息（作者/邮箱/地址）。内容呈斜体，大多数浏览器会在此元素前后添加折行。

<cite></cite>：定义著作的标题。内容呈斜体。如：

1	<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

计算机代码元素

<pre></pre>：定义预格式文本（代码中的空格、换行原样输出）。常用来定义计算机代码。

<code></code>：定义单行代码。不保留空格和换行。

1
2
3

<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

<var></var>：定义数学变量。

<samp></samp>：定义计算机输出实例。

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

<kbd></kbd>：定义键盘输入。

1 2	<p>To open a file, select:</p> <p><kbd>File \| Open...</kbd></p>

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。但在显示计算机代码示例时，并不需要如此。<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

表单及表单元素

表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单用 <form></form> 标签定义。所有表单控件（文本框、文本域、按钮、单选框、多选框等）都必须放在表单标签之间，否则用户输入的信息提交不到服务器上。

1
2
3

<form action="" method="post">
    ......
</form>

提交方式的选择

如果表单提交是被动的（比如搜索引擎的查询），并且没有敏感信息时，使用 GET 方式提交。GET 方式提交的表单数据在地址栏中是可见的。GET 最适合少量数据的提交。浏览器会设定容量限制。
如果表单正在更新数据，或者包含敏感信息（例如密码）或大量数据（如文件）时，用 POST 方式提交。用 POST 方式提交时，数据会被打包成数据包提交给服务器，不会显示在网页地址栏中，所以 POST 的安全性更佳。

input 控件

<form action="服务器文件" method="提交方式">    <!-- action 属性指定要将信息提交给哪个服务器文件， method 属性指定提交信息的方法（如：post，get）-->
    <input type="text" name=""> <!-- 文本输入框 -->
    <input type="password" name=""> <!-- 密码输入框， 输入的内容会用 * 代替-->
    <input type="radio" name="">    <!-- 单选框 -->
    <input type="checkbox" name=""> <!-- 多选框 -->
    <input type="file" name=""> <!-- 选择文件按钮。使用这个控件时，form 的 method 必须为 post -->
    <input type="submit" value="提交">  <!-- 提交按钮 -->
    <input type="reset" value="重置">   <!-- 重置按钮 -->
    <input type="button" value="点我">  <!-- 按钮 -->
    <input type="number" name="">   <!-- 可以输入数字或通过按钮选择数字 -->
    <input type="range" name="">
    <input type="time" name="">
    <input type="date" name="">
    <input type="week" name="">
    <input type="month" name="">
    <input type="datetime" name="">
    <input type="datetime-local" name="">
    <input type="color" name="">
    <input type="email" name="">
    <input type="url" name="">
    <input type="hidden" name="">
    <input type="tel" name="">
    <input type="search" name="">
    <input type="image" src="" alt="">
</form>

<input> 显示各种表单控件。type 指定控件类型。除了 submit, button 等控件外，其他控件必须指定 name 属性来为控件命名，以备后台脚本使用，如果没有指定 name，提交不会起作用。
text、password 等文本输入控件可以使用 placeholder(place holder: 占位符) 属性来指定提示文本（会以半透明的形式显示出来）
radio、checkbox 等控件可以设置布尔属性 checked，表示该选项被默认选中。
注意：同一组的单选按钮，name 属性的值一定要相同才能起到单选的作用。
关于 value 属性：
- 在不同控件中，value 属性的作用不同。
- 如果是 submit，button 控件，value 是显示在按钮上的文字。
- 如果是 radio，checkbox 等控件，value 指定提交给后台脚本的值（如：value="1" 或者 value="2"），这些值必须预先设好。
- 在其他控件中，value 是用户输入并提交给后台脚本的值，一般不用预先设置。如果预先设置，则相当于已经为用户填好的默认值。
required 属性：可以用于任何表单元素，是一个布尔属性。它指定一个域是必填项，如果未填，无法提交。（Safari 浏览器不支持该属性）
所有表单控件都可以设置 disabled 属性，表示控件不可用。
maxlength 属性指定最大能输入的字符数。
size 属性规定输入字段的尺寸（以字符计）。
表单通常使用 CSS 表格布局。
所有 type 值及其说明
所有 input 控件属性及其说明

其他表单控件

<label></label>：当用户单击选中该 label 标签时，浏览器会自动将焦点转到和标签相关的表单控件上（即自动选中和该 label 标签相关联的表单控件）。用 for 属性指定与该 label 标签相关联的标签，for 属性的值是其 id。如：

<form>
    <label for="male">男</label>
    <input type="radio" name="gender" id="male" /> <!-- 点击 “男” 时光标会自动跳到该输入框上 -->
    <br/>
    <label for="female">女</label>
    <input type="radio" name="gender" id="female" /> <!-- 点击 “女” 时光标会自动跳到该输入框上 -->
    <br/>
    <label for="email">输入你的邮箱地址</label>
    <input type="email" id="email" placeholder="Enter email"> <!-- 点击 “输入你的邮箱地址” 时光标会自动跳到该输入框上 -->
</form>

可以将 <input> 标签嵌套到 <label> 中，这样就不需要写 <label> 的 for 属性了。如：

<label>
    <input type="radio" name="man">
    man
</label>

<datalist></datalist> 标签为 HTML5 中新增的标签，它可以为 <input> 元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。示例
注：safari 和 IE9 之前的浏览器不支持该标签。
<textarea></textarea>：定义文本域，可以输入多行。标签之间的文本为默认文本。使用 cols 和 rows 属性可定义列数和行数。

<button></button> 元素定义可点击的按钮：

如果 type="button"，点击该按钮，表单不会提交，也就不会刷新页面；如果 type="submit"，会提交表单，然后刷新页面。

1
2

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<!-- onclick="alert('文本')" 指定点击按钮后浏览器弹窗显示的文字。<button>标签包含的文本显示在按钮上。 -->

TODO: <button></button> 和 <input type="button" value=""> 的区别。

<select></select 标签

<label>爱好：</label>
<select>
    <optgroup label="组一">
    	<option>学习</option>
    </optgroup>
    <optgroup label="组二">
    	<option>运动</option>
    	<option>旅游</option>
    </optgroup>
</select>

使用 select 可以定义一个下拉列表，每个 option 是一个选项。value 属性指定给服务器提交的值。如果为某个 option 添加布尔属性 selected，则该选项被默认选中，否则第一个选项被默认选中。如果为 select 标签添加布尔属性 multiple，表示可以多选，在浏览器中按 Ctrl+左键多选。<optgroup></optgroup> 标签为选项分组，label 属性指定组名。

使用 <fieldset></fieldset> 标签可以组合表单元素。使用 <legend></legend> 可以为表单命名，例如：

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

HTML 框架

框架

内联框架：

使用 <iframe></iframe> 实现内联框架，在网页中显示网页。语法：<iframe src="URL"></iframe>

1
2

<iframe src="http://www.w3school.com.cn/" width="200" height="200" frameborder="0"></iframe>
<!-- src 设置框架内显示的页面的地址；width 和 height 指定框架的宽高，单位默认为像素，也可用百分比；frameborder="0" 指定框架没有边框 -->

可以将框架作为 a 标签的 target：

1
2
3

<iframe src="http://www.baidu.com/" name="iframe"></iframe>
<p><a href="http://www.w3school.com.cn/" target="iframe">W3School.com.cn</a></p>
<!-- 先为框架设置 name，然后将 a 标签的 target 设为框架的名字。此时点击超链接，新网页会在框架中打开 -->

HTML 容器及布局

常用的容器标签为 <div></div>(div — division(层)) 和 <span></span>。它们本身既不能赋予文本语义，也不能赋予文本某种样式，它们只是被用来划分文档结构或配合 CSS 来为某些文本赋予样式。
在 HTML 文档中，<div></div> 和 <span></span> 是不可或缺的，即使这样，也要尽可能少的使用它们，以防止标签冗余，降低解析速度。
<div></div> 是块级元素。如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。另外还可以对文档进行整体布局。
<span></span> 是内联元素。定义文档中的行内的小块或区域。常用于将包含在其中的文本显示出与其他文本不一样的效果。

实现布局有三种方式：使用 HTML 表格布局、使用 <div></div> 布局、使用 <header></header>, <nav></nav> 等在 HTML5 中新增的语义标签布局。

HTML 表格布局：在 CSS 还没有出现的时候，人们为了实现布局，只能使用 HTML 表格。但如今，HTML 表格布局已经不符合 HTML5 标准，因为 <table></table> 标签的初衷仅仅是为了定义表格，使用 <table></table> 标签布局只会使搜索引擎等对你的文档结构产生疑惑。
HTML4 布局时一般使用 div 标签。

Google 在分析大量网站布局后发现，用来布局的 div 标签的 id 通常是 header, nav, section, footer 等。所以在 HTML5 中新增了与这些 id 名相同的语义标签用于文档布局：

标签	作用
`<header></header>`	定义文档或节的页眉
`<main></main>`	定义网页的主体部分
`<nav></nav>`	定义导航链接
`<section></section>`	定义文档主体
`<article></article>`	定义独立的自包含文章
`<aside></aside>`	定义内容之外的内容（比如侧栏）
`<footer></footer>`	定义文档或节的页脚
`<details></details>`	定义额外的细节
`<summary></summary>`	定义 details 元素的标题

这些标签是语义标签，可以为浏览器和搜索引擎提供有用的信息。

IE8及更早版本、Safari 3及更早版本等较老的浏览器不支持 <header>，<nav> 等新元素。如果面向的用户有可能使用这些浏览器，就不要用这些新元素。如果面向的用户主要是移动用户，使用这些元素很棒（因为智能手机都支持这些元素）

布局样例

其他元素

<time></time> 用于包含日期和时间，它有一个 datetime 属性，如果标签中的时间使用了官方 Internet 时间格式，可以不指定该属性；如果使用了其他格式，必须指定该属性，属性值为官方 Internet 时间格式。

视频元素（video）

<video controls
    autoplay
    loop
    preload="auto"
    width="播放器宽度"
    height="播放器高度"
    src="视频地址"
    poster="海报图片地址">
</video>

controls: 是否显示控件
autoplay: 是否自动播放。如果是，视频在网页刚刚加载好时就开始播放。为了网页加载顺利，通常选择不写该属性
loop: 是否循环播放
controls, autoplay, loop 是布尔属性，写了相当于 true，不写相当于 false

preload: 控制视频如何加载。none 表示在用户点击播放之前不加载数据；metadata 表示点击播放之前下载视频元数据，但不下载视频内容；auto 表示由浏览器控制（浏览器会根据 autoplay、用户带宽等选择加载多少数据），通常设为 auto 或不写。

video 元素的另一种写法：

<video controls autoplay>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    <source src="video.ogv" type="ogg" />
    <object>......</object>
    <p>Sorry, your browser doesn't support the video element.</p>
</video>

<video></video> 标签中不再指定 src 属性，而是用 <source /> 标签指定 src。这样可以指定多个视频格式，以确保视频在多种浏览器中都可以播放。浏览器会先尝试播放第一个视频，如果无法播放，则播放下一个，以此类推。
<source> 标签中的 type 属性为浏览器提供关于视频格式的信息，为浏览器提供有关视频的信息，使浏览器快速判断视频是否可以播放。其实还可以指定一个 codecs 属性，如：codecs="vp8, vorbis"，vp8 为视频编解码器，vorbis 为音频编解码器。可以为浏览器提供更多有关视频的信息，使浏览器对视频的分析更快速、准确。
可以用 <object></object> 标签指定另一个视频播放器作为后路（如 Flash），如果浏览器不支持 HTML5 播放器，会使用 Flash 播放器播放视频。
最后用 <p></p> 标签指定一段文本，当浏览器不支持以上任何格式，无法播放视频时，会显示这段文本。
默认 HTML5 播放器只有一些很基本的功能，要自己定制播放器或实现高级功能需要使用 JavaScript。

- 音频元素（audio）：TODO
- 更多元素：TODO
所有标签：标签列表（字母排序），标签列表（功能排序）

HTML 全局属性

全局属性即可以应用于任何标签的属性。

属性名	用途
`class`	规定元素的类名
`id`	规定元素的 id
`style`	规定元素的内联样式（inline style）
`title`	规定鼠标指向元素时的显示文本

id 是元素的唯一标识。一个HTML文档中，一个 id 只能使用一次。
id 和 class的命名规则：基本命名规则与 C/C++ 相同，但 id 可以以数字开头（class 不可以）
所有全局属性：HTML 全局属性

HTML5 API 和 web 应用

TODO

良好的编码习惯

对于任何一个 HTML 标签，除了不得不指定的属性外（如：<img> 的 href，<input> 的 type，所有全局属性等），所有为元素指定样式的属性都应该尽可能写在 CSS 中，以实现结构与表现分离。不要使用 HTML 标签自带的样式属性，如 align，bgcolor 等。
不要使用物理样式标签，如：<center></center>、<b></b> 等。
图像都加上替换文本（alt属性），有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
在标签中定义合理的提示内容（如 title，summary，alt 等）可以方便搜索引擎的解析。
使用 HTML5 中新增的 <header></header>、<section></section> 等标签布局，可以为文档结构赋予语义，方便搜索引擎的解析。
href 属性的值为网址时，最后的斜杠不要丢，因为假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
如果要为站点设置背景图片，图片大小最好不要超过 10kb。

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`' (IE不支持)`	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`' (IE不支持)`	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`' (IE不支持)`	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`