模板

元素：元素类型：允许具有的父元素：局部属性：内容：标签用法：开始标签和结束标签。在HTML5中的变化：习惯样式：

第一部分开篇

第1章 HTML5背景知识

1.2 HTML5简介

引入原生多媒体支持。引入canvas元素。引入语义Web。

第3章初识HTML

3.3 创建HTML文档

HTML和XHTML的对比
符合HTML语法的文档不一定符合XML语法。为了解决这个问题，可以使用XHTML，它是HTML的XML序列化形式。

3.3.1 外层结构

外层结构由两个元素确定：DOCTYPE和html。

3.3.2 元数据

元数据可以向浏览器提供文档的一些信息。元数据包含在head元素内部。

<!DOCTYPE HTML>
<html>
    <head>
        <!-- metadata goes here -->
        <title>Example</title>
    </head>
</html>

3.3.5 了解元素类型

HTML5规范将元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）。

3.4 使用HTML实体

实体是浏览器用来替代特殊字符的一种代码

字符	实体名称	实体编号
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
™	`™`	`™`
®	`®`	`®`
©	`©`	`©`

3.5 HTML全局属性

accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。

<form>
  Name: <input type="text" name="name" accesskey="n" />
  <p />
  Password: <input type="password" name="password" accesskey="p" />
  <p />
  <input type="submit" value="Log In" accesskey="s" />
</form>

class属性

<a class="class1 class2" href="http://apress.com">Apress web site</a>
<p />
<a class="class2 otherclass" href="http://w3c.org">W3C web site</a>

contenteditable属性（New）

用途是让用户能够修改页面上的内容。

<p contenteditable>It is raining right now</p>

contextmenu属性（尚无支持这个属性的浏览器）

用来为元素设定快捷菜单。

dir属性

用来规定元素中文字的方向。

draggable属性

draggable属性是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。

dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一，与draggable属性搭配使用

hidden属性

布尔值，表示相关元素当前无需关注。浏览器对它的处理方式是隐藏相关元素。

id属性

提示：id属性可以用到导航到文档中的特定位置。例：example.html#myelement。

lang属性

用于说明元素内容使用的语言。使用lang属性的目的是让浏览器调整其表达元素内容的方式。

<p lang="en">Hello - how are you?</p>
<p lang="fr">Bonjour - comment �tes-vous?</p>
<p lang="es">Hola - �c�mo est�s?</p>

spellcheck属性

用来表明浏览器是否应该对元素的内容进行拼写检查，这个属性只有用在用户可以编辑的元素上时才有意义。

style属性

CSS样式。

tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换。tabindex属性可以改变默认的转移顺序。

<form>
  <label>Name: <input type="text" name="name" tabindex="3" /></label>
  <label>City: <input type="text" name="city" tabindex="1" /></label>
	<label>Country: <input type="text" name="country" tabindex="2" /></label>
	<input type="submit" tabindex="4" />
</form>

title属性

title属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示。

<a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>

第二部分 HTML元素

第6章 HTML5元素背景知识

6.1 语义与呈现分离

将元素的语义与元素对其内容呈现结果的影响分开。

6.2 元素选用规则

少亦可为多。
别误用元素。
具体为佳，一以贯之。
对用户不要想当然。

6.4 元素速览

6.4.1 文档和元数据元素

其用途包括创建HTML文档的上层建筑，向浏览器说明文档的情况，定义脚本程序和CSS样式，提供浏览器禁用脚本时要显示的内容。

元素	说明	类型	新增或有无变化
base	设置相对URL的基础	元数据	N
body	表示HTML文档的内容	无	Y
DOCTYPE	表示HTML文档的开始	无	Y
head	包含文档的元数据	无	N
html	表示文档HTML部分的开始	无	Y
link	定义与外部资源（通常是样式表或网站图标）的关系	元数据	Y
meta	提供关于文档的信息	元数据	Y
noscript	包含浏览器禁用脚本或不支持脚本时显示的内容	元数据、短语	N
script	定义脚本程序，可以是文档内嵌也可以是外部文件	元数据、短语	Y
style	定义CSS样式	元数据	Y
title	文档表题	元数据	N

6.4.2 文本元素

文本元素用来为内容提供基本的结构和含义。

元素	说明	类型	新增或有无变化
a	超链接	短语、流	Y
abbr	缩略语	短语	N
b	不带强调或着重意味地标记一段文字	短语	Y
br	换行	短语	N
cite	表示其他作品的表题	短语	Y
code	计算机代码片段	短语	N
del	从文档中删除的文字	短语、流	New
dfn	表示术语定义	短语	N
em	表示着重强调的一段文字	短语	N
i	表示与周边内容秉性不同的一段文字	短语	Y
ins	表示加入文档的文字	短语、流	N
kbd	表示用户输入的内容	短语	N
mark	表示一段因为与上下文中另一词语相关而被突出显示的内容	短语	New
q	表示引自他处的内容	短语	N
rp	与ruby元素结合使用，标记括号	短语	New
rt	与ruby元素结合使用，标记注音符号	短语	New
ruby	表示位于表意文字上方或右方的注音符号	短语	New
s	表示文字已不再准确	短语	Y
samp	表示计算机程序的输出内容	短语	N
small	表示小号字体内容	短语	Y
span	一个没有自己的语义的通用元素	短语	N
strong	表示重要内容	短语	N
sub	表示下标文字	短语	N
sup	表示上标文字	短语	N
time	表示时间或日期	短语	New
u	不带强调或着重意味地标记一段文字	短语	Y
var	表示程序或计算机系统中的变量	短语	N
wbr	表示可安全换行的地方	短语	New

6.4.3 对内容分组

元素	说明	类型	新增或有无变化
blockquote	表示引自他处的大段内容	流	N
dd	用在dl元素之中，表示定义	N	N
div	一个没有任何既定语义的通用元素	流	N
dl	表示包含一系列术语和定义的说明列表	流	N
dt	用在dl元素之中，表示术语	N	N
figcaotion	表示figure元素的标题	N	New
figure	表示图片	流	New
hr	表示段落级别的主题转换	流	Y
li	用在ul、ol和menu元素中，表示列表项	N	Y
ol	有序列表	流	Y
p	段落	流	Y
pre	表示其格式应被保留的内容	流	N
ul	无序列表	流	Y

6.4.4 划分内容

用于划分内容，让每个概念、观点或主题彼此分隔开。

元素	说明	类型	新增或有无变化
address	表示文档或article的联系信息	流	New
article	表示一段独立的内容	流	New
aside	表示与周边内容稍有牵涉的内容	流	New
details	生成一个区域，用户将其展开可以获得更多细节知识	流	New
footer	表示尾部	流	New
h1~h6	表示标题	流	N
header	表示首部	流	New
hgroup	将一组标题组织在一起，以便文档大纲只显示其中第一个标题	流	New
nav	表示有意集中在一起的导航元素	流	New
section	表示一个重要的概念或主题	流	New
summary	用在details元素中，表示该元素内容的标题或说明	无	New

6.4.5 制表

表格在H5中的主要变化是不能再用来控制页面布局。

元素	说明	类型	新增或有无变化
caption	表格标题	无	Y
col	一列	无	Y
colgroup	一组列	无	Y
table	表格	流	Y
tbody	表格主体	无	Y
td	单元格	无	Y
tfoot	表脚	无	Y
th	标题行单元格	无	Y
thead	标题行	无	Y
tr	一行单元格	无	Y

6.4.6 创建表单

用于创建HTMl表单，以便获取用户的输入数据。

元素	说明	类型	新增或有无变化
button	表示可用来提交或重置表单的按钮	短语	Y
datalist	定义一组提供给用户的建议值	流	Y
fieldset	一组表单元素	流	Y
form	表示HTM表单	流	Y
input	表示用来收集用户输入数据的控件	短语	Y
keygen	生成一对公钥和私钥	短语	New
label	表示表单元素的说明标签	短语	Y
legend	表示fieldset元素的说明性标签	无	N
optgroup	表示一组相关的option元素	无	N
option	表示供用户选择的一个选项	无	N
output	表示计算结果	短语	New
select	给用户提供一组固定的选项	短语	Y
textarea	用户可以用它输入多行文字	短语	Y

6.4.7 嵌入内容

元素	说明	类型	新增或有无变化
area	表示一个用于客户端分区响应图的区域	短语	Y
audio	表示一个音频资源	无	New
canvas	生成一个动态的图形画布	短语、流	New
embed	用插件在HTML文档中嵌入内容	短语	New
iframe	通过创建一个浏览上下文在一个文档中嵌入另一个文档	短语	Y
img	嵌入图像	短语	Y
map	定义客户端分区响应图	短语、流	Y
meter	嵌入数值在许可值范围背景中的图形表示	短语	New
object	在HTML文档中嵌入内容。也可用于生成浏览上下文和生成客户端分区响应图	短语、流	Y
param	表示将通过object元素传递给插件的参数	无	N
progress	嵌入目标进展或任务完成情况的图形表示	短语	New
source	表示媒体资源	无	New
svg	表示结构化矢量内容	无	New
track	表示媒体的附加轨道（例如字慕）	无	New
video	表示视频资源	无	New

第7章创建HTML文档

7.1 构筑基本的文档结构

文档元素确定了HTML文档的轮廓以及浏览器的初始环境。

7.1.1 DOCTYPE元素

每一个HTML文档都必须以DOCTYPE元素开头。即使省略DOCTYPE元素，大多数浏览器仍能正确显示文档内容，只不过依赖浏览器的这种表现不是好习惯。

元素：DOCTYPE 元素类型：N 允许具有的父元素：N 局部属性：N 内容：N 标签用法：单个开始标签在HTML5中的变化：HTML4中要求要有的DTD已不再使用习惯样式：N

<!-- 告诉浏览器两件事情，它处理的是HTML文档，用来标记文档内容的HTML所属版本 -->
<!DOCTYPE HTML>

7.1.2 html元素（根元素）

元素：html 元素类型：N 允许具有的父元素：N 局部属性：manifest 内容：head元素和body元素各一标签用法：开始标签和结束标签在HTML5中的变化：manifest属性是H5新增习惯样式：html { display: block; } html: focus { outline: none; }

7.1.3 head元素

包含文档的元数据

元素：head 元素类型：N 允许具有的父元素：html 局部属性：N 内容：必须有一个title元素，其他元数据元素可有可无标签用法：开始标签和结束标签。内含其他元素在HTML5中的变化：N 习惯样式：N

7.1.4 body元素

负责文档的内容。

元素：body 元素类型：N 允许具有的父元素：html 局部属性：N 内容：所有短语元素和流元素标签用法：开始标签和结束标签。在HTML5中的变化：不再使用属性，而是使用CSS实现习惯样式：body { display: block; margin: 8px; } body:focus { outline: none; }

7.2 用元数据元素说明文档

元数据用来提供关于HTML文档的信息。

7.2.1 设置文档表题title

元素：title 元素类型：元数据允许具有的父元素：head 局部属性：N 内容：文档表题或对文档内容言简意赅的说明标签用法：开始标签和结束标签。内含文字在HTML5中的变化：N 习惯样式：title { display: none; }

7.2.2 设置相对URL的解析基准

base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。

元素：base 元素类型：元数据允许具有的父元素：head 局部属性：href、target 内容：无标签用法：虚元素形式在HTML5中的变化：无习惯样式：无

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <base href="http://titan/listings/"/>
    </head>
    <body>
        <p>
            I like <code id="applecode">apples</code> and oranges.
        </p>
        <a href="http://apress.com">Visit Apress.com</a>
        <!-- http://titan/listings/page2.html -->
        <a href="page2.html">Page 2</a>
    </body>
</html>

提示：如果不用base元素，或不用其href属性设置一个基准URL，那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。

7.2.3 用元数据说明文档

用来定义文档的各种元数据。

元素：meta 元素类型：元数据允许具有的父元素：head 局部属性：name、content、charset和http-equiv 内容：无标签用法：虚元素形式在HTML5中的变化：charset是h5新增习惯样式：无

1.指定名/值元数据对

<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>

2.声明字符编码

<meta charset="utf-8"/>

所有网页中将近50%使用的是UTF-8编码。

3.模拟HTTP标头字段

<meta http-equiv="refresh" content="5"/>

http-equiv属性值

属性值	说明
refresh	以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。
default-style	指定页面优先使用的样式表。
content-type	声明字符编码

7.2.4 定义CSS样式

元素：style 元素类型：无允许具有的父元素：任何可包含元数据的元素，包括head、div、noscript、section、article、aside、type、media、scoped 局部属性：type、media、scoped 内容：CSS样式标签用法：开始标签和结束标签。内含文字在HTML5中的变化：scoped属性为新增习惯样式：无

media属性用的规定设备值

设备	说明
all	所有设备（默认值）
aural	语音合成器
braille	盲文设备
handheld	手持设备
projection	投影机
print	打印预览和打印页面时
screen	计算机显示器屏幕
tty	电传打字机之类的等宽设备
tv	电视剧

浏览器负责解释设备归类。

7.2.5 指定外部资源

link元素用来在HTML文档和外部资源之间建立联系。

元素：link 元素类型：元数据允许具有的父元素：head、noscript 局部属性：href、rel、hreflang、media、type、sizes 内容：无标签用法：虚元素形式在HTML5中的变化：新增是size属性习惯样式：无

rel属性值选编

值	说明
alternate	链接到文档的替代版本
author	链接到文档的作者
help	链接到当前文档的说明文档
icon	指定图标资源
license	链接到当前文档的相关许可证
pingback	指定一个回探服务器
prefetch	预先获取一个资源
stylesheet	载入外部样式表

7.3 使用脚本元素

7.3.1 script元素

元素：script 元素类型：元数据/短语允许具有的父元素：可以包含元数据或短语元素的任何元素局部属性：type、src、defer、async、charset 内容：脚本语言语句标签用法：开始标签和结束标签。在HTML5中的变化：新增async属性习惯样式：无

推迟执行脚本

浏览器在遇到带有defer属性的script元素时，会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后。

提示：defer属性只能用于外部脚本文件，它对文档内嵌脚本不起作用。

7.3.2 noscript元素

向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

元素：noscript 元素类型：元数据/短语/流允许具有的父元素：可以包含元数据、短语元素或流的元素局部属性：无内容：短语元素或流元素标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：无

第8章标记文字

8.1 生成超链接

元素：a 元素类型：包含短语内容时被视为短语元素，包含流内容时被视为流元素允许具有的父元素：可以包含短语元素的任何元素局部属性：href、hreflang、meia、rel、target、type 内容：短语内容和流元素标签用法：开始标签和结束标签。在HTML5中的变化：既能包含短语内容也能包含流内容。习惯样式：a:link, a:visited { color: blue; text-decoration: underline; cursor: auto; } a:link:active, a:visited:active { color: blue; }

8.1.3 生成内部超链接

可以使用href属性设置为#xxx后，点击之后浏览器会查到id属性为xxx的元素，如果元素不在视野之后，那么浏览器会将文档滚动到能看见它的位置。

8.1.4 设定浏览环境

target属性使用的值

属性值	说明
_blank	在新窗口或标签页中打开文档
_parent	在父窗框组中打开文档
_self	在当前窗口中打开文档（default）
_top	在顶层窗口中打开文档
`<frame>`	在指定窗框中打开文档

8.2 用基本的文字元素标记内容

8.2.1 表示关键字和产品名称

元素：b 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：x 习惯样式：b { font-weight: bolder; }

8.2.2 加以强调

元素：em 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：em { font-style: italic; }

8.2.3 表示外文词语或科技术语

元素：i 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：i { font-style: italic; }

8.2.4 表示不准确或校正

元素：s 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：s { text-decoration: line-through; }

8.2.5 表示重要的文字

元素：strong 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：strong { font-weight: bolder; }

8.2.7 添加小号字体内容

元素：small 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：small { font-size: smaller }

8.2.8 添加上标和下标

元素：sub和sup 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：无内容：短语内容标签用法：开始标签和结束标签。在HTML5中的变化：无习惯样式：sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; }

8.3 换行

8.3.1 强制换行br

元素：br 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：N 标签用法：虚元素形式在HTML5中的变化：N 习惯样式：让后续内容从新行开始显示（无法用CSS办到）

8.3.2 指明可以安全换行的建议位置wbr

wbr元素是H5中新增的，用来表示长度超过当前浏览器窗口的内容适合在此换行，究竟换不换行由浏览器决定。

元素：wbr 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：N 标签用法：虚元素形式在HTML5中的变化：N 习惯样式：如果需要换行，则从新行开始显示后续内容

8.4 表示输入和输出

这4个元素代表计算机的输入和输出，不是H5新增的。

元素	说明	习惯样式
code	表示计算机代码片段	`code { font-family: monospace; }`
var	在编程语境中表示变量	`var { font-style: italic; }`
smap	表示程序或计算机系统的输出	`samp { font-family: monospace; }`
kbd	表示用户输入	`kbd { font-famliy: monospace; }`

8.5 使用标题引用、引文、定义和缩写

8.5.1 表示缩写

元素：abbr 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N。但全局属性title具有特殊含义内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

8.5.2 定义术语

元素：dfn 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N。但全局属性title具有特殊含义内容：文字或一个abbr元素标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：dfn { font-style: italic; }

8.5.3 引用来自他处的内容

元素：q 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：cite（用来指定来源文章的URL）内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; }

8.5.4 引用其他作品的标题

元素：cite 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：cite元素不能再用来引用人名，只能用于作品标题习惯样式：cite { font-style: iltalic; }

8.6 使用语言元素

8.6.1 ruby、rt和rp元素

注音符号用来帮助读者掌握表意语言文字正确发音的符号，位于这些文字上方或右方。

元素：ruby 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：短语内容及rt和rp元素标签用法：开始标签和结束标签在HTML5中的变化：无习惯样式：ruby { text-indent: 0; }

ruby元素需要与rt元素和rp元素搭配使用。rt元素用来标记注音符号，rp元素则用来标记供不支持注音符号特性的浏览器显示的注音符号前后的括号。

<p>
  我是一个<ruby>人<rp>(</rp><rt>rén</rt><rp>)</rp></ruby>
</p>

8.7 其他文本元素

8.7.1 表示一段一般性的内容

元素：span 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

8.7.2 突出显示文本

元素：mark 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：N 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：mark { background-color: yellow; color: black; }

8.7.3 表示添加和删除的内容

元素：ins 元素类型：身为短语元素的子元素时为短语元素，身为流元素的子元素时为流元素允许具有的父元素：可以包含短语内容或流内容的任何元素局部属性：cite、datetime 内容：短语内容或流内容，取决于父元素的类型标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：ins { text-decoration: underline; }

元素：del 元素类型：身为短语元素的子元素时为短语元素，身为流元素的子元素时为流元素允许具有的父元素：可以包含短语内容或流内容的任何元素局部属性：cite（用来解释添加或删除文字原因的文档的URL）、datetime（设置修改时间）内容：短语内容或流内容，取决于父元素的类型标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：del { text-decoration: line-through; }

8.7.4 表示时间和日期

元素：time 元素类型：短语允许具有的父元素：可以包含短语内容的任何元素局部属性：datetime、pubdate 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

第9章组织内容

9.2 建立段落

元素：p 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：无内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：align属性在H5中已不再使用习惯样式：p { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }

9.3 使用div元素

**警告：**不在万不得已的情况下最好不要使用div元素，应该优先考虑那些具有语义重要性的元素。

元素：div 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：无内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：div { display: block; }

div元素相当于流元素中的span。

9.4 使用预先编排好格式的内容

pre元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。

元素：pre 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：无内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }

9.5 引用他处内容

元素：blockquote 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：cite（指定所引用的内容的来源）内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：blockquote { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }

9.6 添加主题分隔

元素：hr 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：N 内容：N 标签用法：虚元素在HTML5中的变化：N 习惯样式：hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; border-style: inset; border-width: 1px }

9.7 将内容组织为列表

9.7.1 ol元素

元素：ol 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：start、reversed、type 内容：零个或多个li元素标签用法：开始标签和结束标签在HTML5中的变化：reversed属性是H5新增的。习惯样式：ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }

9.7.2 ul元素

元素：ul 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：无内容：零个或多个li元素标签用法：开始标签和结束标签在HTML5中的变化：type和compact属性已不再使用习惯样式：ul { display: block; list-style-type: disc; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }

9.7.3 li元素

元素：li 元素类型：无允许具有的父元素：ul、ol、menu 局部属性：value（仅用于父元素为ol元素时）内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：H4不赞成使用的value属性在H5中恢复习惯样式：li { display: list-item; }

9.7.4 生成说明列表

元素	说明	习惯样式
dl	表示说明列表	`dl { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }`
dt	表示说明列表中的术语	`dt { display: block; }`
dd	表示说明列表中的定义	`dd { display: block; margin-start: 40px; }`

<dl>
  <dt>Apple</dt>
  <dd>The apple is the pomaceous fruit of the apple tree</dd>
  <dd><i>Malus domestica</i></dd>
  <dt>Banana</dt>
  <dd>The banana is the parthenocarpic fruit of the banana tree</dd>
  <dd><i>Musa acuminata</i></dd>
  <dt>Cherry</dt>
  <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>
</dl>

9.8 使用插图

元素：figure 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：N 内容：流内容，还可包含一个figcaption元素标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：figure { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }

元素：figcaption 元素类型：无允许具有的父元素：figure 局部属性：N 内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：figcaption { display: block; }

第10章文档分节

10.1 添加基本的标题

元素：h1~h6 元素类型：流允许具有的父元素：hgroup元素或其他任何可以包含流元素的元素局部属性：N 内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：h1 { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold; }

10.2 隐藏子标题

将几个标题元素作为一个整体。

元素：hgroup 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：N 内容：一个或多个标题元素（h1~h6）标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：hgroup { display: block; }

10.3 生成节

section元素用来包含的是那种应该列入文档大纲或目录中的内容。

元素：section 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address的后代局部属性：N 内容：style元素和流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：hgroup { display: block; }

在section、article, aside, nav元素中的标题标签h1~h6的字体会比普通的标题标签字体小。

:-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

10.4 添加首部和尾部

元素：header 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address、footer和其他header的后代局部属性：N 内容：流内容标签用法：开始标签和结束标签习惯样式：header { display: block; }

元素：footer 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address、header和其他footer的后代局部属性：N 内容：流内容标签用法：开始标签和结束标签习惯样式：footer { display: block; }

10.5 添加导航区域

元素：nav 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address的后代局部属性：N 内容：流内容标签用法：开始标签和结束标签习惯样式：nav { display: block; }

10.6 使用article

article表示HTML文档中一段独立成篇的内容。

元素：article 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address的后代局部属性：N 内容：style元素和流内容标签用法：开始标签和结束标签习惯样式：article { display: block; }

10.7 生成附注栏

aside用来表示跟周边内容稍沾一点边的内容，侧栏。

元素：aside 元素类型：流允许具有的父元素：任何可以包含流元素的元素，不能是address的后代局部属性：N 内容：style元素和流内容标签用法：开始标签和结束标签习惯样式：aside { display: block; }

10.8 提供联系信息

元素：address 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：N 内容：流内容。但是标题元素h1~h6、section、header、footer、nav、article和aside元素不能用做该元素的后带代元素标签用法：开始标签和结束标签习惯样式：address { display: block; font-style: italic; }

10.9 生成详情区域

元素：details 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：open 内容：流内容及一个可有可无的summary元素标签用法：开始标签和结束标签习惯样式：details { display: block; }

details元素通常包含一个summary元素，后者的作用是为该详情区域生成一个说明标签或标题。

元素：summary 元素类型：N 允许具有的父元素：details元素局部属性：N 内容：短语内容标签用法：开始标签和结束标签习惯样式：summary { display: block; }

<details>
  <summary>Kinds of Triathlon</summary>
  There are different kinds of triathlon - sprint, Olympic and so on.
  I am aiming for Olympic, which consists of the following:
  <ol>
    <li>1.5km swim</li>
    <li>40km cycle</li>
    <li>10km run</li>
  </ol>
</details>

第11章表格元素

11.1 生成基本的表格

每个表格必须要有table、tr和td。

元素：table 元素类型：流允许具有的父元素：任何可以包含流元素的元素局部属性：border 内容：caption、colgroup、thead、tbody、tfoot、tr、th和td元素 标签用法：开始标签和结束标签在HTML5中的变化：summary、align、width、bgcolor、cellpadding、cellspacing、frame和rules属性已不再使用，其功能改用CSS实现。border属性的值必须设置为1。表格边框的粗细必须用CSS设置习惯样式：table { display: table; border-collapse: sparate; border-spacing: 2px; border-color: gray; }

HTML表格基于行而不是列，每个行必须分别标记。

元素：tr 元素类型：N 允许具有的父元素：table、thead、tfoot和tbody元素 局部属性：N 内容：一个或多个td或th元素标签用法：开始标签和结束标签在HTML5中的变化：align、char、charoff、valign和bgcolor属性已不再使用，其功能改用CSS实现习惯样式：tr { display: table-row; vertical-align: inherit; border-color: inherit; }

td，表示表格中的单元格。

元素：td 元素类型：N 允许具有的父元素：tr元素局部属性：colspan、rowspan、headers 内容：流内容标签用法：开始标签和结束标签在HTML5中的变化：scope属性不再使用。abbr、axis、align、width、char、charoff、valign、bgcolor、height和nowrap属性已不再使用，其功能改用CSS实现习惯样式：td { display: table-cell; vertical-align: inherit; }

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
        </table>
    </body>
</html>

浏览器会保证让列col的宽度足以容纳最宽的内容，让行row的高度足以容纳最高的单元格。

11.2 添加表头单元格

元素：th 元素类型：N 允许具有的父元素：tr元素局部属性：colspan、rowspan、scope和headers 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：scope属性不再使用。abbr、axis、align、width、char、charoff、valign、bgcolor、height和nowrap属性已不再使用，其功能改用CSS实现习惯样式：th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align:center; }

<tr>
  <th>Rank</th>
  <th>Name</th>
  <th>Color</th>
  <th>Size</th>
</tr>

11.3 为表格添加结构

11.3.1 表示表头和表格主题

元素：tbody 元素类型：N 允许具有的父元素：table元素局部属性：N 内容：零个或多个tr元素标签用法：开始标签和结束标签在HTML5中的变化：align、char、charoff和valign属性不再使用习惯样式：tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }

如果在文档中表格没有用到tbody元素，大多数浏览器在处理table元素的时候会自动插入tbody元素。

元素：thead 元素类型：N 允许具有的父元素：table元素局部属性：N 内容：零个或多个tr元素标签用法：开始标签和结束标签在HTML5中的变化：align、char、charoff和valign属性不再使用习惯样式：thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

如果没有thead元素，所有tr元素都会被视为表格主体的一部分。

11.3.2 添加表脚

tfoot元素用来标记组成表脚的行。

元素：tfoot 元素类型：N 允许具有的父元素：table元素局部属性：N 内容：零个或多个tr元素标签用法：开始标签和结束标签在HTML5中的变化：tfoot元素现在出现在tbody或tr前后都可以。align、char、charoff和valign属性不再使用习惯样式：tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }

<table>
        <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Color</th>
                <th>Size</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Color</th>
                <th>Size</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th>Favorite:</th>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th>
                <td>Pomegranate</td>
                <td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </tbody>
    </table>

11.4 制作不规则表格

单元格跨越几行或几列，通过td和th元素的colspan和rowspan属性。

<tr>
  <th>3rd Favorite:</th>
  <td>Pomegranate</td>
  <td colspan="2" rowspan="2">
    Pomegranates and cherries can both come in a range of colors
    and sizes.
  </td>
  <td>203</td>
</tr>

11.5 把表头与单元格关联起来

<table>
  <thead>
    <tr>
      <th id="rank">Rank</th>
      <th id="name">Name</th>
      <th id="color">Color</th>
      <th id="sizeAndVotes" colspan="2">Size & Votes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="first" headers="rank">Favorite:</th>
      <td headers="name first">Apples</td>
      <td headers="color first">Green</td>
      <td headers="sizeAndVote first">Medium</td>
      <td headers="sizeAndVote first">500</td>
    </tr>
    <tr>
      <th id="second" headers="rank">2nd Favorite:</th>
      <td headers="name second">Oranges</td>
      <td headers="color second">Orange</td>
      <td headers="sizeAndVote second">Large</td>
      <td headers="sizeAndVote second">450</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
    </tr>                
  </tfoot>
</table>

11.6 为表格添加标题

元素：caption 元素类型：N 允许具有的父元素：table元素局部属性：N 内容：流内容（但不能是table元素）标签用法：开始标签和结束标签在HTML5中的变化：align属性已不再使用习惯样式：caption { display: table-caption; text-align: center; }

一个表格只能包含一个caption元素。它不必是表格是第一个子元素，但是无论定义在什么位置，它总会显示在表格上方。

11.7 处理列

colgroup代表一组列。

元素：colgroup 元素类型：N 允许具有的父元素：table元素局部属性：span 内容：零个或多个col元素（只有未设置span属性时才能使用）标签用法：开始标签和结束标签在HTML5中的变化：width、char、charoff和valign属性已不再使用习惯样式：colgroup { display: table-column-group; }

<colgroup id="colgroup1" span="3"/> <!-- 负责前3列 -->
<colgroup id="colgroup2" span="2"/> <!-- 负责后2列 -->

colgroup元素的影响范围覆盖了列中所有的单元格，包括那些位于thead和tfoot元素中的单元格，不管它们是用th还是td元素定义的。

表格个别的列

元素：col 元素类型：N 允许具有的父元素：colgroup元素局部属性：span 内容：N 标签用法：虚元素形式在HTML5中的变化：align、width、char、charoff和valign属性已不再使用习惯样式：col { display: table-column; }

<colgroup id="colgroup1">
  <col id="col1And2" span="2"/>
  <col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>

11.8 设置表格边框

border属性的值必须设置为1或空字符串（""）。

<table border="1"></table>

第12章表单

12.1 制作基本表单

制作一个基本的表单需要三个元素：form、input和button元素。

12.1.1 定义表单

元素：form 元素类型：流元素允许具有的父元素：任何可以包含流元素的元素。但form元素不能是其他form元素的后代元素局部属性：action、method、enctype、name、accept-charset、novalidate、target和autocomplete 内容：流内容（但主要是label元素和input元素）标签用法：开始标签和结束标签在HTML5中的变化：novalidate和autocomplete是H5新增的习惯样式：form { display: block; margin-top: 0em; }

元素：input 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：name、disabled、form、type，以及取决于type属性值的其他一些属性内容：无标签用法：虚元素形式在HTML5中的变化：新增了type属性的一些新的值。习惯样式：N。这种元素的外观取决于type属性

元素：button 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：name、disabled、form、type、value、autofocus，以及取决于type属性值的其他一些属性内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：新增了一些属性，取决于type属性值。习惯样式：N

12.2 配置表单

12.2.1 配置表单的action属性

action属性说明了提交表单时浏览器应该把从用户收集的数据发送到什么地方。

<form method="post" action="http://localhost:8080/form">
  <input name="fave"/>
  <button>Submit Vote</button>
</form>

使用base元素指定URL，base元素将影响HTML文档中所有的相对URL。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <base href="http://titan:8080"/>
    </head>
    <body>
        <form method="post" action="/form">
            <input name="fave"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

12.2.3 配置数据编码

enctype属性指定了浏览器对发送给服务器的数据采用的编码方式。

该属性的值由三个：

值	说明
`application/x-www-form-urlencoded`	默认值。它不能用来将文件上次到服务器
`mutipart/form-data`	用于将文件上传到服务器
`text/plain`	该编码方式因浏览器而异（浏览器支持各异，谨慎使用）

12.2.4 控制表单的自动完成功能

使用form元素的autocomplete属性，值有on和off，默认为on。

<form autocomplete="off" method="post" action="http://127.0.0.1:8080/form">
  <input autocomplete="on" name="fave"/>
  <input name="name"/>
  <button>Submit Vote</button>
</form>

12.2.5 指定表单反馈信息的目标显示位置

默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面，使用form元素的target属性可以改变。

属性值	说明
_blank	将浏览器反馈信息显示在新窗口或标签页中
_parent	将浏览器反馈信息显示在父窗框组中
_self	将浏览器反馈信息显示在当前窗口中（default）
_top	将浏览器反馈信息显示在顶层窗口中
`<frame>`	将浏览器反馈信息显示在指定窗框中

12.2.6 设置表单名称

使用form元素的name属性。

12.3 在表单中添加说明标签

元素：label 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：for、form 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：form属性是H5新增的习惯样式：label { cursor: default; }

<form method="post" action="http://titan:8080/form">
  <p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
  <p><label for="name">Name: <input id="name" name="name"/></label></p>
  <button>Submit Vote</button>
</form>

<!-- label和input可以独立开来 -->
<form method="post" action="http://titan:8080/form">
  <p><label for="fave">Fruit: </label><input id="fave" name="fave"/></p>
  <p><label for="name">Name: </label><input id="name" name="name"/></p>
  <button>Submit Vote</button>
</form>

12.4 自动聚焦到某个input元素

使用input元素的autofocus属性。

<form method="post" action="http://titan:8080/form">
  <p>
    <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
  </p>
  <p><label for="name">Name: <input id="name" name="name"/></label></p>
  <button>Submit Vote</button>
</form>

autofocus属性只能用在一个input元素上。

12.5 禁用单个input元素

使用input元素的disabled属性。

<form method="post" action="http://titan:8080/form">
  <p>
    <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
  </p>
  <p>
    <label for="name">Name: <input disabled id="name" name="name"/></label>
  </p>
  <button>Submit Vote</button>
</form>

12.6 对表单元素编组

对于更复杂的表单，有时需要将一些元素组织在一起，可以使用fieldset元素。

元素：fieldset 元素类型：流元素允许具有的父元素：任何可以包含流元素的元素，通常是form元素的后代元素局部属性：name、form、disabled 内容：流内容。在开头位置可以包含一个legend元素标签用法：开始标签和结束标签在HTML5中的变化：form属性是H5新增的习惯样式：fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end: 0.75em; padding-after: 0.625em; border: 2px groove; }

<form method="post" action="http://titan:8080/form">
  <fieldset>
    <p><label for="name">Name: <input id="name" name="name"/></label></p>
    <p><label for="name">City: <input id="city" name="city"/></label></p>
  </fieldset>
  <fieldset>
    <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
    <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
    <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
  </fieldset>
  <button>Submit Vote</button>
</form>

12.6.1 为fieldset元素添加说明标签

元素：legend 元素类型：N 允许具有的父元素：fieldset元素局部属性：N 内容：短语内容标签用法：开始标签和结束标签在HTML5中的变化：form属性是H5新增的习惯样式：legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }

legend元素必须是fieldset元素的第一个子元素。

<form method="post" action="http://titan:8080/form">
  <fieldset>
    <legend>Enter Your Details</legend>
    <p><label for="name">Name: <input id="name" name="name"/></label></p>
    <p><label for="name">City: <input id="city" name="city"/></label></p>
  </fieldset>
  <fieldset>
    <legend>Vote For Your Three Favorite Fruits</legend>
    <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
    <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
    <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
  </fieldset>
  <button>Submit Vote</button>
</form>

12.6.2 用fieldset禁用整组input元素

<form method="post" action="http://titan:8080/form">
  <fieldset disabled>
    <legend>Vote For Your Three Favorite Fruits</legend>
    <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
    <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
    <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
  </fieldset>
  <button>Submit Vote</button>
</form>

12.7 使用button元素

button元素的type属性有3个值：

submit：表示按钮的用途是提交表单。
reset：表示按钮的用途是重置表单。
button：表示按钮没有具体语义。

12.7.1 用button元素提交表单（默认）

使用该方式时，有额外的属性可用：

属性	说明
form	指定按钮关联的表单
formaction	覆盖form元素的action属性
formenctype	覆盖form元素的enctype属性
formmethod	覆盖form元素的method属性
formtarget	覆盖form元素的target属性
formvalidate	覆盖form元素的novalidate属性

<form>
  <p>
    <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
  </p>
  <p>
    <label for="name">Name: <input id="name" name="name"/></label>
  </p>
  <button type="submit" formaction="http://titan:8080/form"
          formmethod="post">Submit Vote</button>
</form>

12.7.2 用button元素重置按钮

<button type="reset">Reset</button>

12.7.3 把button作为一般元素使用

<button type="button">Do <strong>NOT</strong> press this button</button>

12.8 使用表单外的元素

<body>
  <form id="voteform" method="post" action="http://titan:8080/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
    </p>
  </form>
  <p>
    <label for="name">Name: <input form="voteform" id="name" name="name"/>
    </label>
  </p>

  <button form="voteform" type="submit">Submit Vote</button>
  <button form="voteform" type="reset">Reset</button>
</body>

第13章定制input元素

13.1 用input元素输入文字（type="text"）

text型input元素可用的额外属性

属性	说明
list	指定为文本框提供建议值的datalist元素，其值为datalist元素的id值
maxlength	输入字符的最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	提示
readonly	把文本框设为只读以阻止用户编辑其内容
required	表明用户必须输入一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	设置文本框的初始值

13.1.1 设定元素大小

<p>
  <label for="name">
    Name: <input maxlength="10" id="name" name="name"/>
  </label>
</p>
<p>
  <label for="city">
    City: <input size="10" id="city" name="city"/>
  </label>
</p>

13.1.2 设置初始值和占位提示

<p>
  <label for="name">
    Name: <input placeholder="Your name" id="name" name="name"/>
  </label>
</p>
<p>
  <label for="city">
    City: <input placeholder="Where you live" id="city" name="city"/>
  </label>
</p>            
<p>
  <label for="fave">
    Fruit: <input value="Apple" id="fave" name="fave"/>
  </label>
</p>

13.1.3 使用数据列表

元素：datalist 元素类型：短语允许具有的父元素：任何可以包含短语元素的元素局部属性：N 内容：option元素和短语内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

元素：option 元素类型：N 允许具有的父元素：datalist、select、optgroup 局部属性：disabled、selected、label和value 内容：字符数据标签用法：虚元素形式，或开始标签与结束标签一起使用在HTML5中的变化：N 习惯样式：N

<form method="post" action="http://titan:8080/form">        
    <label for="fave">
      Fruit: <input list="fruitlist" id="fave" name="fave"/>
    </label>
</form>
<datalist id="fruitlist">
  <option value="Apples" label="Lovely Apples"/>
  <option value="Oranges">Refreshing Oranges</option>
  <option value="Cherries"/>
</datalist>

13.1.4 生成只读或被禁用的文本框

<p>
  <label for="name">
    Name: <input value="Adam" disabled id="name" name="name"/>
  </label>
</p>
<p>
  <label for="city">
    City: <input value="Boston" readonly id="city" name="city"/>
  </label>
</p>

13.2 用input元素输入密码（type="password"）

属性	说明
maxlength	最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	提示
readonly	把文本框设为只读以阻止用户编辑其内容
required	表明用户必须输入一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	设置初始密码值

<label for="password">
  Password: <input type="password" placeholder="Min 6 characters"
                   id="password" name="password"/>
</label>

13.3 用input元素生成按钮（type="submit、reset、button"）

<input type="submit" value="Submit Vote"/>
<input type="reset" value="Reset Form"/>
<input type="button" value="My Button"/>

13.4 用input元素为输入数据把关

用于输入受限数据的input元素的type属性值

属性	说明
checkbox	将输入限制为在一个“是/否”二态复选框中进行选择
color	只能输入颜色信息
date	只能输入日期
datetime	只能输入带时区信息的世界时（包括日期和时间）
datetime-local	只能输入不带时区信息的世界时（包括日期和时间）
email	只能输入规范的电子邮箱地址
month	只能输入年和月
number	只能输入整数或浮点数
radiobutton	将输入限制为在一组固定选项中进行选择
range	只能输入指定范围内的数值
tel	只能输入规范的电话号码
time	只能输入时间信息
week	只能输入年及星期信息
url	只能输入完全限定的URL

13.4.1 用input元素获取数值（type="number"）

属性	说明
list	指定为文本框提供建议值的datalist元素。
min	最小值
max	最大值
readonly
require
step	指定上下调节数值的步长
value	指定元素的初始值

<label for="price">
  $ per unit in your area:
  <input type="number" step="2" min="0" max="100"
         value="1" id="price" name="price"/>
</label>

13.4.2 用input元素获取指定范围内的数值（type="range"）

range支持的属性与number类型相同。

<label for="price">
  $ per unit in your area: 1
  <input type="range" step="1" min="0" max="100"
         value="1" id="price" name="price"/>100
</label>

13.4.3 用input元素获取布尔值零输入

属性	说明
checked	勾选状态
required	必须勾选
value	提交给服务器的数据值

<label for="veggie">
  Are you vegetarian: <input type="checkbox" id="veggie" name="veggie"/>
</label>

13.4.4 用input元素生成一组固定选项（type="radio"）

属性	说明
checked	勾选状态
required	必须勾选
value	提交给服务器的数据值

<fieldset>
  <legend>Vote for your favorite fruit</legend>
  <label for="apples">
    <input type="radio" checked value="Apples" id="apples"
           name="fave"/>
    Apples
  </label>
  <label for="oranges">
    <input type="radio" value="Oranges" id="oranges" name="fave"/>
    Oranges
  </label>
  <label for="cherries">
    <input type="radio" value="Cherries" id="cherries" name="fave"/>
    Cherries
  </label>
</fieldset>

13.4.6 用input元素获取时间和日期(type="datetime、datetime-local、date、month、time、week")

type属性值	示例
datetime	2021-08-31T07:15:15.491Z
datetime-local	2021-08-31T07:15:15.491
date	2021-08-31
month	2021-08
time	207:15:15.491
week	2011-W30

13.4.7 用input元素获取颜色值（type="color"）

<label for="color">
  Color: <input type="color" id="color" name="color"/>
</label>

13.5 用input元素获取搜索用词（type="search"）

13.6 用input元素生成隐藏的数据项（type="hidden"）

13.7 用input元素生成图像按钮和分区响应图（type="image"）

<input type="image" src="accept.png" name="submit"/>

13.8 用input元素上传文件（type="accept、multiple、required"）

file型input元素可用的额外属性：

属性	说明
accept	指定接受的MIME类型
mutiple	上传多个文件
required	必填

<input type="file" multiple name="filedata"/>

第14章其他表单元素及输入验证

14.1 使用其他表单元素

14.1.1 生成选项列表

元素：select 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：name、disabled、form、size、multiple、autofocus和required 内容：option和optgroup元素标签用法：开始标签与结束标签在HTML5中的变化：form、autofocus和required是H5新增的习惯样式：N

<select id="fave" name="fave">
  <option value="apples" label="Apples">Apples</option>
  <option value="oranges" label="Oranges">Oranges</option>
  <option value="cherries" selected label="Cherries">Cherries</option>
  <option value="pears" label="Pears">Pears</option>
</select>

在`select`元素中建立结构

元素：optgroup 元素类型：N 允许具有的父元素：select元素局部属性：label、disabled 内容：option 标签用法：开始标签与结束标签在HTML5中的变化：N 习惯样式：N

14.1.2 输入多行文字

元素：textarea 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素，但通常是form元素局部属性：name、disabled、form、readonly、maxlength、autofocus、required、placeholder、dirname、rows、wrap和cols 内容：文本，也即该元素的内容标签用法：开始标签与结束标签在HTML5中的变化：form、autofocus、required、placeholder和wrap属性是H5新增的 习惯样式：N

textarea元素的rows和cols属性可用来设置其大小。wrap属性有两个值：hard和soft，可用来控制在用户输入的文字中插入换行符的方式。

<textarea cols="20" rows="5" wrap="hard" id="story"
          name="story">Tell us why this is your favorite fruit</textarea>

14.1.3 表示计算结果

元素：output 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：name、form、for 内容：短语内容标签用法：开始标签与结束标签在HTML5中的变化：N 习惯样式：output { display: inline; }

<form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
  <fieldset>
    <legend>Price Calculator</legend>
    <input type="number" name="quant" id="quant"> x 
    <input type="number" name="price" id="price"> =
    <output for="quant name" name="res"></output>
  </fieldset>
</form>

14.2 使用输入验证

验证属性：

required
min、max
pattern

14.3 禁用输入验证

使用form元素的novalidate属性，可以绕过验证。

第15章嵌入内容

15.1 嵌入图像

元素：img 元素类型：短语元素允许具有的父元素：任何可以包含短语元素的元素局部属性：src、alt、height、width、usemap、ismap 内容：N 标签用法：虚元素形式在HTML5中的变化：border、longdesc、name、align、hspace和vspace属性在H5已被废弃 习惯样式：N

alt属性定义img元素的备用内容。指定width和height属性让浏览器能够在图像尚未载入时正确摆放网页里的各个元素。

15.1.1 在超链接里嵌入图像

<a href="otherpage.html">
  <img src="triathlon.png" ismap alt="Triathlon Image" 
       width="200" height="67"/>
</a>

15.1.2 创建客户端分区响应图

元素：map 元素类型：在包含短语内容时被视为短语元素，包含流内容时被视为流元素允许具有的父元素：任何可以包含短语或流内容的元素局部属性：name 内容：一个或多个area元素标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

map元素包含一个或多个area元素，它们各自代表了图像上可被点击的一块区域。

元素：area 元素类型：短语允许具有的父元素：map元素局部属性：alt、href、target、rel、media、hreflang、type、shape、coords 内容：N 标签用法：虚元素形式习惯样式：area { display: none; }

<map name="mymap">
  <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/>
  <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/>
  <area href="otherpage.html" shape="default" alt="default"/>
</map>

15.2 嵌入另一张HTML文档

元素：iframe 元素类型：短语允许具有的父元素：任何可以包含短语内容的元素局部属性：src、srcodc、name、width、height、sandbox、seamless 内容：字符数据标签用法：开始标签和结束标签习惯样式：iframe { border: 2px inset; }

<body>
  <header>
    <h1>Things I like</h1>
    <nav>
      <ul>
        <li>
          <a href="fruits.html" target="myframe">Fruits I Like</a>
        </li>
        <li>
          <a href="activities.html" target="myframe">Activities I Like</a>
        </li>
      </ul>
    </nav>
  </header>
  <iframe name="myframe" width="300" height="100">
  </iframe>
</body>

15.3 通过插件嵌入内容

15.3.1 使用`embed`元素

元素：embed 元素类型：短语允许具有的父元素：任何可以包含短语内容的元素局部属性：src、type、height、width 内容：N 标签用法：虚元素形式习惯样式：N

<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3"
       type="application/x-shockwave-flash" width="560" height="349"
       allowfullscreen="true"/>

15.3.2 使用object和param元素

元素：object 元素类型：在包含短语内容时被视为短语元素，包含流内容时被视为流元素允许具有的父元素：任何可以包含短语或流内容的元素局部属性：data、type、height、width、usemap、name、form 内容：空白或任意数量的param元素，并可选择添加短语或流内容作为备用内容标签用法：开始标签和结束标签在HTML5中的变化：form属性是H5新增的习惯样式：N

使用param元素来定义将要传递给插件的参数。

元素：param 元素类型：N 允许具有的父元素：object元素局部属性：name、value 内容：N 标签用法：虚元素形式习惯样式：param { display: none; }

<object width="560" height="349" 
        data="http://www.youtube.com/v/qzA60hHca9s?version=3"
        type="application/x-shockwave-flash">
  <param name="allowFullScreen" value="true"/>
  <b>Sorry!</b> We can't display this content
</object>

第四部分使用DOM

第25章理解DOM

DOM是一组对象的集合，这些对象代表了HTML文档里的各个元素，它是HTML文档的结构和内容与JavaScript之间的桥梁。

HTMLElement对象是最基本的DOM对象，所有对象都是在它的基础上进行拓展。

25.2 理解DOM Level和兼容性

DOM Level是标准化过程中的版本号，在大多数情况下应该忽略它们。

25.3 DOM快速查询

25.3.1 Document的成员

Document对象

名称	说明	返回
activeElement	返回代表文档中当前获得焦点元素的对象	HTMLElement
body	body元素	HTMLElement
characterSet	返回文档的字符集编码。	string
childNodes	返回子元素的集合	HTMLElement[]
compatMode	获取文档的兼容性模式	string
cookie	获取或设置当前文档的cookie	string
defaultCharset	获取浏览器所使用的默认字符编码	string
defaultView	返回当前文档的Window对象。	Window
domain	获取或设置文档的域名	string
firstChild	返回某个元素的第一个子元素	HTMLElement
getElementById(`<id>`)	返回指定id值的元素	HTMLElement
getElementByClassName(`<class>`)	返回指定class值的元素	HTMLElement[]
getElementByName(`<name>`)	返回指定name值的元素	HTMLElement[]
getElementByTagName(`<tag>`)	返回指定类型的元素	HTMLElement[]
hasChildNodes()	判断是否有子元素	boolean
head	head元素对象	HTMLHeadElement
lastChild	返回最后一个子元素	HTMLElement
lastModified	返回文档的最后修改时间	string
location	提供关于当前文档URL的信息	Location
nextSibling	返回位于当前元素之后的兄弟元素	HTMLElement
parentNode	返回父元素	HTMLElement
previousSibling	返回位于当前元素之前的兄弟元素	HTMLElement
querySelector(`<selector>`)	返回匹配特定CSS选择器的第一个元素	HTMLElement
querySelectorAll(`<selector>`)	返回匹配特定CSS选择器的所有元素	HTMLElement[]
readyState	返回当前文档的状态	string
referrer	返回链接到当前文档的文档URL	string
title	获取或设置当前文档的标题	string

Location对象

名称	说明	返回
assign(`<URL>`)	导航到指定的URL上	void
hash	获取或设置文档URL的锚（#）部分	string
host	获取或设置文档URL的主机名和端口号部分	string
hostname	获取或设置文档URL的主机名部分	string
href	获取或设置文档的地址	string
pathname	获取或设置文档URL的路径部分	string
port	获取或设置文档URL的端口号	string
protocol	获取或设置文档URL的协议部分	string
reload()	重新加载当前文档	void
replace(`<URL>`)	清除当前文档并导航到URL所指的的新文档	void
resolveURL(`<URL>`)	将指定的相对URL解析为绝对URL	string
search	获取或设置文档URL的查询（？）部分	string

25.3.2 Window的成员

Window对象

名称	说明	返回
alert(`<msg>`)	向用户显示一个对话框窗口并等候其被关闭	void
blur()	让窗口失去键盘焦点	void
clearInterval(`<id>`)	清除定时器	void
clearTimeout(`<id>`)	清除定时器	void
close()	关闭窗口	void
confirm(`<msg>`)	显示一个带有确认和取消提示的对话框窗口	boolean
defaultView	返回活动文档的Window	Window
document	返回与此窗口关联的Document对象	Document
focus()	让窗口获取键盘焦点	void
frames	返回文档内嵌iframe元素的Window对象数组	Window[]
history	提供对浏览器历史的访问	History
innerHeight	获取窗口内容区域的高度	number
innerWidth	获取窗口内容区域的宽度	number
length	返回文档内嵌的iframe元素的数量	number
location	提供当前文档地址的详细信息	Location
opener	返回打开当前浏览器上下文环境Window	Window
outerHeight	获取窗口的高度，包括边框和菜单栏等	number
outerWidth	获取窗口的宽度，包括边框和菜单栏等	number
pageXOffset	获取窗口从左上角算起水平滚动过的像素数	number
pageYOffset	获取窗口从左上角算起垂直滚动过的像素数	number
parent	返回当前Window的父Window	Window
postMessage(`<msg>, <origin>`)	给另一个文档发送消息	void
print()	提示用户打印页面	void
prompt(`<msg>, <val>`)	显示对话框提示用户输入一个值	string
screen	返回一个描述屏幕的Screen对象	Screen
screenLeft，screenX	获取从窗口左边缘到屏幕左边缘的像素数	number
screenTop，screenY	获取从窗口上边缘到屏幕上边缘的像素数	number
scrollBy(`<x>, <y>`)	让文档相对其当前位置进行滚动	void
scrollTo(`<x>, <y>`)	滚动到指定的位置	void
self	返回当前文档的Window	Window
setInterval(`<function>, <time>`)	创建一个定时器，每time毫秒后执行指定函数	void
setTimeout(`<functioN>, <time>`)	创建一个定时器，等待time毫秒后执行指定函数	void
stop()	停止载入文档	void
top	返回最上层的Window	Window

History对象

名称	说明	返回
back()	在浏览历史里后退一步	void
forward()	在浏览历史里前进一步	void
go(`<index>`)	转到相对于当前文档的某个浏览历史位置。正值是前进，负值的后退	void
length	返回浏览历史里的项目数量	number
pushState(`<state>, <title>, <url>`)	向浏览器历史添加一个条目	void
replaceState(`<state>, <title>, <url>`)	替换浏览器历史中的当前条目	void
state	返回浏览器历史里关联当前文档的状态数据	object

Screen对象

名称	说明	返回
availHeight	返回屏幕上可供显示窗口部分的高度（排除工具栏之类）	number
availWidth	返回屏幕上可供显示窗口部分的宽度（排除工具栏之类）	number
colorDepth	返回屏幕的颜色深度	number
height	返回屏幕的高度	number
width	返回屏幕的宽度	number

25.3.3 HTMLElement的成员

HTMLElement对象

名称	说明	返回
checked	获取或设置checked属性的存在状态	boolean
classList	获取或设置元素所属类的列表	DOMTokenList
className	获取或设置元素所属类的列表	string
dir	获取或设置dir属性的值	string
disabled	获取或设置disabeld属性的存在状态	boolean
hidden	获取或设置hidden属性的存在状态	boolean
id	获取或设置id属性的值	string
lang	获取或设置lang属性的值	string
spellcheck	获取或设置spellcheck属性的存在状态	boolean
tabIndex	获取或设置tabindex属性的值	number
tagName	返回标签名	string
title	获取或设置title属性的值	string
add(`<class>`)	给元素添加指定的类	void
contains(`<class>`)	如果元素属于指定的类则返回true	boolean
length	返回元素所属类的数量	number
remove(`<class>`)	从元素上移除指定的类	void
toggle(`<class>`)	如果类不存在就添加它，如果存在则移除它	boolean
attributes	返回应用到元素上的属性	Attr[]
dataset	返回以data-开头的属性	string[`<name>`]
getAttribute(`<name>`)	返回指定属性的值	string
hasAttribute(`<name>`)	如果元素带有指定属性则返回true	boolean
removeAttribute(`<name>`)	从元素上移除指定属性	void
setAttribute(`<name>, <value>`)	应用一个指定名称和值的属性	void
appendChild(HTMLElement)	将指定元素附加到当前元素的子元素	HTMLElement
cloneNode(boolean)	复制某个元素	HTMLElement
compareDocumentPosition(HTMLElement)	判断某个元素的相对位置	number
innerHTML	获取或设置元素的内容	string
insertAdjacentHTML(`<pos>, <text>`)	相对于元素的位置插入HTML	void
insertBefore(`<newelem>, <childElem>`)	将第一个元素插入到第二个（子）元素之前	HTMLElement
isEqualNode(`<HTMLElement>`)	判断指定元素是否与当前元素等同	boolean
isSameNode(HTMLElement)	判断指定元素是否就是当前元素	boolean
outerHTML	获取或设置某个元素的HTML和内容	string
removeChild(HTMLElement)	从当前元素上移除指定的子元素	HTMLElement
replaceChild(HTMLElement, HTMLElement)	替换当前元素的某个子元素	HTMLElement
createElement(`<tag>`)	用指定标签类型创建一个新的HTMLElement对象	HTMLElement
createTextNode(`<text>`)	用指定内容创建一个新的Text对象	Text

Text对象

名称	说明	返回
appendData(`<string>`)	在文本块的末尾添加指定字符串	Void
data	获取或设置文本	string
deleteData(`<offset>, <count>`)	移除字符串中的文本	void
insertData(`<offset>, <string>`)	在指定的偏移量位置插入指定字符串	void
length	返回字符数量	number
replaceData(`<offset>, <count>, <string>`)	用指定字符串替换一部分文本	void
replaceWholeText(`<string>`)	替换全部文本	Text
splitText(`<number>`)	将现有的Text元素在指定的偏移量处一分为二	Text
substringData(`<offset>, <count>`)	返回文本的子串	string
wholeText	获取文本	string

25.3.4 Dom里的CSS属性

基本所有的属性都支持CSS属性。

25.3.5 DOM中的事件

名称	说明
blur	在元素失去焦点时触发
click	在按下鼠标按钮后释放时触发
dblclick	在两次按下鼠标按钮并释放时触发
focus	在元素获得键盘焦点时触发
focusin	在元素即将获取键盘焦点时触发
focusout	在元素即将失去键盘焦点时触发
keydown	在用户按下某个键时触发
keypress	在用户按下某个键并释放时触发
keyup	在用户释放某个键时触发
mousedown	在鼠标按钮被按下时触发
mouseenter	在光标移入元素或其下属元素所占据的屏幕区域时触发
mouseleave	在光标移出元素或其下属元素所占据的屏幕区域时触发
mousemove	在光标位于元素上方并移动时触发
mouseout	与mouseleave相似，区别是当光标还在下属元素上方时此事件也会被触发
mouseover	与mouseenter相似，区别是当光标还在下属元素上方时此事件也会被触发
mouseup	在鼠标按钮被释放时触发
onabort	在文档或资源的加载过程被中止时触发
onafterprint	在用户打印文档后触发
onbeforeprint	在调用Window.print()方式之后，向用户呈现打印选项之前触发
onerror	在文档或资源载入出错时触发
onhashchange	在地址的锚（#）部分变动时触发
onload	在文档或资源载入完成时触发
onpopstate	触发时会提供一个关联浏览器历史的状态对象
onresize	在窗口大小改变时触发
onunload	在文档从窗口或浏览器中卸载时触发
readystatechange	在readyState属性的值改变时触发
reset	在某张表单被重置时触发
submit	在某张表单被提交时触发

第26章使用Document对象

26.1 使用Document元数据

26.1.1 获取文档信息

Document对象的用途之一是向你提供关于文档的信息。

document.writeln("characterSet: " + document.characterSet);
document.writeln("charset: " + document.charset);
document.writeln("compatMode: " + document.compatMode);
document.writeln("defaultCharset: " + document.defaultCharset);
document.writeln("dir: " + document.dir);
document.writeln("domain: " + document.domain);
document.writeln("lastModified: " + document.lastModified);
document.writeln("referrer: " + document.referrer);
document.writeln("title: " + document.title);

26.1.2 使用Location对象

Location对象

document.writeln("protocol: " + document.location.protocol);
document.writeln("host: " + document.location.host);
document.writeln("hostname: " + document.location.hostname);
document.writeln("port: " + document.location.port);
document.writeln("pathname: " + document.location.pathname);            
document.writeln("search: " + document.location.search);
document.writeln("hash: " + document.location.hash);

26.1.3 读取和写入cookie

当你想要创建新的cookie时，要指派一个新的名称/值对作为cookie属性的值，它将会被添加到文档的cookie集合。一次只能设置一个cookie。

可以添加到cookie的额外字段

额外项	说明
`path=<path>`	设置cookie关联的路径，如果没有指定默认使用当前文档的路径
`domain=<domain>`	设置cookie关联的域名，如果没有指定则默认使用当前文档的域名
`max-age=<seconds>`	设置cookie的有效期，以秒的形式从它创建之时起开始计算
`expires=<date>`	设置cookie的有效期，用的是GMT格式的日期
`secure`	只有在安全（HTTPS）连接时才会发送cookie

26.1.4 理解就绪状态

document.readyState提供了加载和解析HTML文档过程中当前处于哪个阶段的信息。

readyState属性返回的值

loading—浏览器正在加载和处理此文档
interactive—文档已被解析，但浏览器还在加载其中链接的资源
complete—文档已被解析，所有的资源也已加载完毕

26.2 获取HTML元素对象

26.2.1 使用属性获取元素对象

var elems = document.images; // 返回HTMLCollection对象

26.2.2 使用数组标记获取已命名元素

var elems = document["apple"]; // 采用深度优先搜索name或id为apple的属性
var elems = document.apple; // 采用深度优先搜索name或id为apple的属性

26.2.3 搜索元素

var resultsElement = document.getElementById("results");             
var pElems = document.getElementsByTagName("p");
var fruitsElems = document.getElementsByClassName("fruits");
var nameElems = document.getElementsByName("apple");

var resultsElement = document.getElementById("results");             
var elems = document.querySelectorAll("p, img#apple")

26.2.4 合并进行链式搜索

getElementById只有Document对象才能使用它。

var resultsElement = document.getElementById("results");
var elems = document.getElementById("tblock").getElementsByTagName("span");
var elems2 = document.getElementById("tblock").querySelectorAll("span");
var selElems = document.querySelectorAll("#tblock > span");

26.3 在DOM树里导航

element = element.parentNode;
element = element.firstChild;
element = element.previousSibling;
element = element.nextSibling;

第27章使用Window对象

27.1 获取Window对象

使用Document对象上的defaultView，或者使用window变量，或者使用globalthis变量。

document.defaultView
window
globalthis

27.2 获取窗口信息

Window对象的基本功能涉及当前文档所显示的窗口。

window.outerWidth;
window.outerHeight;
window.innerHeight;
window.innerHeight;
window.screen.width;
window.screen.height;

27.3 与窗口进行交互

blur()，close()，focus()，print()，scrollBy(<x>, <y>)，scrollTo(<x>, <y>)，stop()

27.4 对用户进行提示

alert()，confirm()，prompt()

27.5 获取基本信息

document，history，location

27.6 使用浏览器历史History

back()，forward()，go()，length，pushState()，replaceState()，state

27.7 使用跨文档消息传递

postMessage(<msg>, <origin>)发送消息。

使用message事件监听消息。

第28章使用DOM元素

28.1 使用元素对象

checked，classList，className，dir，disabeld，hidden，id，lang，spellcheck，tabIndex，tagName，title

28.1.1 使用类

classList属性返回一个DOMTokenList对象，对象包含了一些属性和方法，add(<class>)，contains(<class>)，length，remove(<calss>)，toggle(<class>)。

28.1.2 使用元素属性

attributes，dataset，getAttribute(<name>)，setAttribute(<name>, <val>)，hasAttribute(<name>)，removeAttribute(<name>)。

28.2 使用Text对象

当浏览器在文档模型里生成p元素的代表时，元素自身会有一个HTMLElement对象，内容则会有一个Text对象。

没有什么方便的方法能定位Text元素，只能先找到它们的父元素对象，然后再其子对象中查找。

28.3 修改模型

对DOM层级结构所做的改动会立即反映到浏览器中。

修改DOM层级结构的属性和方法：appendChild(HTMLElement)，cloneNode(boolean)，compareDocumentPosition(HTMLElment)，innerHTML，insertAdjacentHTML(<pos>, <text>)，insertBefore(<newElem>, <childElem>)，isEqualNode(<HTMLElement>)，isSameNode(HTMLElement)，outerHTML，removeChild(HTMLElement)，replaceChild(HTMLElmemnt, HTMLElement)。

Document对象上创建新元素的方法，createElement(<tag>)，createNode(<text>)。

28.3.1 创建和删除元素

var row = document.createElement("tr");
row.setAttribute("id", "newrow");
row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Plum"));
row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Purple"));
tableBody.appendChild(row);

row.parentNode.removeChild(row);

28.3.2 复制元素

cloneNode(true)方法的参数为true时复制该元素的所有子元素。

var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true)

28.3.3 移动元素

appendChild()方法会将选中的元素移动到另外一个元素上。

var elem = document.getElementById("apple");
document.getElementById("fruitsBody").appendChild(elem);

28.3.4 比较元素对象

isSameNode()简单地检查它们是否代表了同一个元素。

isEqualNode()，如果多个元素具有相同的类型，带有相同的属性值，其子元素也相同并且顺序一致，那么它们就是相同的。

elemByID.isSameNode(elemByPos)
elems[0].isEqualNode(elems[1])

28.3.5 使用HTML片段

innerHTML和outerHTML的区别是outerHTML会获取自身DOM的元素展示出来，而innerHTML只获取当前DOM下的子元素。

insertAdjacentHTML()用于插入HTML片段。

定位参数有：afterbegin，afterend，beforebegin，beforeend

target.insertAdjacentHTML("afterbegin", "<td>After Begin</td>");

第29章为DOM元素设置样式

29.1 使用样式表

可以通过document.styleSheets属性访问文档中可用的CSS样式表。每一个样式表都由一个CSSStyleSheet对象组成

CSSStyleSheet对象的成员：

成员	说明	返回
cssRules	返回样式表的规则集合	CSSRuleList
deleteRule(`<pos>`)	从样式表中移除一条规则	void
disabled	获取或设置样式表的禁用状态	boolean
href	返回链接样式表的href	string
insertRule(`<rule>, <pos>`)	插入一条新规则到样式表中	number
media	返回应用到样本表上的媒介限制集合	MediaList
ownerNode	返回样式所定义的元素	HTMLElement
title	返回title属性的值	string
type	返回type属性的值	string

29.1.4 CSSRuleList对象的成员

CSSStyleSheet.cssRules属性会返回一个CSSRuleList对象，它允许你访问样式表里的各种样式。

样式表里的每一种CSS样式都由一个CSSStyleRule对象代表。

成员	说明	返回
cssText	获取或设置样式的文本	string
parentStyleSheet	获取此样式所属的样式表	CSSStyleSheet
selectorText	获取或设置样式的选择器文本	string
style	获取一个代表具体样式属性的对象	CSSStyleDeclaration

29.3 使用`CSSStyleDeclaration`对象

HTMLElement对象的style属性会返回一个CSSStyleDeclaration对象。

CSSStyleDeclaration对象的成员

成员	说明	返回
cssText	获取或设置样式的文本	string
length	获取项目的数量	number
parentRule	如果存在样式规则就获取它	CSSStyleRule
removeProperty(`<name>`)	移除指定的属性	string
setProperty(`<name>, <value>, <priority>`)	设置指定属性的值和优先级	void
`<style>`	获取或设置指定CSS属性的便捷属性	string

29.4 使用计算样式

通过document.defaultView.getComputedStyle方法获取包含某一元素计算样式的CSSStyleDeclaration对象。

第30章使用事件

30.1 使用简单事件处理器

事件属性on<eventname>。

30.1.1 实现简单的内联事件处理器

<p onmouseover="this.style.background='white'; this.style.color='black'">
  There are lots of different kinds of fruit - there are over
  500 varieties of banana alone. By the time we add the countless types of
  apples, oranges, and other well-known fruit, we are faced with thousands of
  choices.
</p>

30.1.2 实现一个简单的事件处理函数

<!DOCTYPE HTML>
<html>
  <head>
    <title>Example</title>
    <style type="text/css">
      p {
        background: gray;
        color:white;
        padding: 10px;
        margin: 5px;
        border: thin solid black
      }
    </style>
    <script type="text/javascript">
      function handleMouseOver(elem) {
        elem.style.background='white'; 
        elem.style.color='black';
      }

      function handleMouseOut(elem) {
        elem.style.removeProperty('color');
        elem.style.removeProperty('background');
      }
    </script>
  </head>
  <body>        
    <p onmouseover="handleMouseOver(this)" onmouseout="handleMouseOut(this)">
      There are lots of different kinds of fruit - there are over
      500 varieties of banana alone. By the time we add the countless types of
      apples, oranges, and other well-known fruit, we are faced with thousands of
      choices.
    </p>
    <p onmouseover="handleMouseOver(this)" onmouseout="handleMouseOut(this)">
      One of the most interesting aspects of fruit is the variety available in
      each country. I live near London, in an area which is known for
      its apples. 
    </p>
  </body>
</html>

30.2 使用DOM和事件对象

var pElems = document.getElementsByTagName("p");
for (var i = 0; i < pElems.length; i++) {
  pElems[i].onmouseover = handleMouseOver;
  pElems[i].onmouseout = handleMouseOut;
}


var pElems = document.getElementsByTagName("p");
for (var i = 0; i < pElems.length; i++) {
  pElems[i].addEventListener("mouseover", handleMouseOver);
  pElems[i].addEventListener("mouseout", handleMouseOut);
}
document.getElementById("pressme").onclick = function() {
  document.getElementById("block2").removeEventListener("mouseout", handleMouseOut);
}


function handleMouseOver(e) {
  e.target.style.background='white'; 
  e.target.style.color='black';
}
function handleMouseOut(e) {
  e.target.style.removeProperty('color');
  e.target.style.removeProperty('background');
}

Event对象的函数和属性

名称	说明	返回
type	事件的名称	string
target	事件指向的元素	HTMLElement
currentTarget	带有当前被触发事件监听器的元素	HTMLElement
eventPhase	事件生命周期的阶段	number
bubble	如果事件会在文档里冒泡则返回true，否则返回false	boolean
cancelable	如果事件带有可撤销的默认行为则返回true，否则返回false	boolean
timeStamp	事件的创建时间，如果时间不可用则为0	string
stopPropagation()	在当前元素的事件监听器被触发后终止事件在元素树的流动	void
stopImmediatePropagation()	立即终止事件在元素树中的流动。当前元素上未被触发的事件监听器会被忽略	void
preventDefault()	防止浏览器执行与事件关联的默认操作	void
defaultPrevented	如果调用过preventDefault()则返回true	boolean

30.2.2 理解事件流

一个事件的生命周期包括三个阶段：捕捉（capture）、目标（target）和冒泡（bubbling）。

1.捕获阶段

当某个事件被触发时，浏览器会找出事件涉及的元素，它被称为该事件的目标。浏览器会找出body元素和目标之间的所有元素并分别检查它们，看看它们是否带有事件处理器且要求获得其后代元素触发事件的通知。浏览器会先触发这些事件处理器，然后才会轮到目标自身的处理器。

Event.eventPhase属性的值

名称	说明
CAPTURING_PHASE	此事件处于捕捉阶段
AT_TARGET	此事件处于目标阶段
BUBBLING_PHASE	此事件处于冒泡阶段

2.理解目标阶段

当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器。

3.理解冒泡阶段

完成目标阶段之后，浏览器开始转而沿着上级元素链朝body元素前进。在沿途的每个元素上，浏览器都会检查是否存在针对该事件类型但没有启用捕捉的监听器（addEventListener函数第三个参数为false）。

提示
不是所有的事件都支持冒泡，可以用bubbles属性来检查某个事件能否冒泡。

30.2.3 使用可撤销事件

有些事件定义了一种默认的行为，会在事件被触发时执行。当某一事件拥有默认行为时，它的cancelable属性会是true。

e.preventDefault()

调用preventDefault()函数不会阻止事件流经历捕捉、目标和冒泡阶段。可以通过读取defaultPrevented属性来检测preventDefault函数是否已经被之前的某个事件处理器的事件上调用过。

30.3 使用HTML事件

30.3.1 文档和窗口事件

Document对象事件

名称	说明
readystatechange	在readyState属性的值发生变化时触发

Window对象事件

名称	说明
onabort	在文档或资源加载过程被中止时触发
onafterprint	在已调用Window.print()方法，但尚未给用户提供打印选项时触发
onbeforeprint	在用户完成打印后触发
onerror	在文档或资源的加载发生错误时触发
onhashchange	在锚部分发生变化时触发
onload	在文档或资源加载完成时触发
onpopstate	触发后提供一个关联浏览器历史的状态对象
onresize	在窗口缩放时触发
onunload	在文档从窗口或浏览器中卸载时触发

30.3.2 使用鼠标事件

名称	说明
click	在按下鼠标按钮后释放时触发
dblclick	在两次按下鼠标按钮并释放时触发
mousedown	在鼠标按钮被按下时触发
mouseenter	在光标移入元素或其下属元素所占据的屏幕区域时触发
mouseleave	在光标移出元素或其下属元素所占据的屏幕区域时触发
mousemove	在光标位于元素上方并移动时触发
mouseout	与mouseleave相似，区别是当光标还在下属元素上方时此事件也会被触发
mouseover	与mouseenter相似，区别是当光标还在下属元素上方时此事件也会被触发
mouseup	在鼠标按钮被释放时触发

MouseEvent对象

名称	说明	返回
button	标明点击的是哪个键。0是鼠标主键，1是中键，2是右键	number
altKey	如果在事件触发时按下了alt/option键则返回true	boolean
clientX	鼠标相对于元素视口的X坐标	number
clientY	鼠标相对于元素视口的Y坐标	number
screenX	鼠标相对于屏幕坐标系的X坐标	number
screenY	鼠标相对于屏幕坐标系的Y坐标	number
shiftKey	如果在事件触发时按下了Shift键则返回true	boolean
ctrlKey	如果在事件触发时按下了Ctril键则返回true	boolean

30.3.3 使用键盘焦点事件

名称	说明
blur	在元素失去焦点时触发
focus	在元素获得键盘焦点时触发
focusin	在元素即将获取键盘焦点时触发
focusout	在元素即将失去键盘焦点时触发

FocusEvent对象

名称	说明	返回
relatedTarget	元素即将获得或失去焦点。这个属性只用于focusin和focusout	HTMLElement

30.3.4 使用键盘事件

名称	说明
keydown	在用户按下某个键时触发
keypress	在用户按下某个键并释放时触发
keyup	在用户释放某个键时触发

KeyboardEvent对象

名称	说明	返回
char	返回按键代表的字符	string
key	返回所按的键	string
ctrlKey	如果在按键时Ctrl键处于按下状态则返回true	boolean
shiftKey	如果在按键时Shift键处于按下状态则返回true	boolean
altKey	如果在按键时Alt键处于按下状态则返回true	boolean
repeat	如果该键一直处于按下状态则返回true	boolean

第31章使用元素专属对象

31.5 表格元素

31.5.2 table元素

table元素由HTMLTableElement对象代表。

HTMLTableElement对象

名称	说明	返回
border	对应于border属性	string
caption	返回表格的caption元素	HTMLElement
createCaption()	返回表格的caption元素，如果有必要就创建它	HTMLElement
deleteCaption()	删除表格的caption元素	void
tHead	返回表格的thead元素	HTMLTableSectionElement
createTHead()	返回表格的thead元素，如果有必要就创建一个	HTMLTableSectionElement
deleteTHead()	删除表格的thead元素	void
tFoot	返回表格的tfoot元素	HTMLTableSectionElement
createTFoot()	返回表格的tfoot元素，如果有必要就创建一个	HTMLTableSectionElement
deleteTFoot()	删除表格的tfoot元素	void
tBodies	返回表格的tbody元素	HTMLTableSectionElement[]
createTBody()	返回表格的tbody元素，如果有必要就创建一个	HTMLTableSectionElement
rows	返回表格各行	HTMLTableRowElement[]
insertRow(`<index>`)	在表格的指定位置创建一个新行	HTMLTableRowElement
deleteRow(`<index>`)	删除指定索引出的表格行	void

31.5.3 thead、tbody和tfoot元素

thead、tbody和tfoot元素都由HTMLTableSectionElement代表。

31.6 表单元素

31.6.4 form元素

form元素由HTMLFormElement对象代表。

名称	说明	返回
acceptCharset	对应于accept-charset属性	string
action	对应于action属性	string
autocomplete	对应于autocomplete属性	string
elements	返回表单里的所有元素	HTMLElement[]
length	返回表单里的元素数量	number
[`<name>`]	返回具有指定名称的表单元素	HTMLElement
[`<index>`]	返回位于指定索引处的表单元素	HTMLElement
submit()	提交表单	void
reset()	重置表单	void
checkValidity()	如果所有表单元素都通过了输入验证就返回true，否则返回false	boolean

第五部分高级功能

第32章使用Ajax

32.1 Ajax起步

XMLHttpRequest 对象readyState属性的值

值	数值	说明
UNSENT	0	已创建XMLHttpRequest
OPENED	1	已调用open方法
HEADERS_RECEIVED	2	已收到服务器响应的标头
LOADING	3	已收到服务器响应
DONE	4	响应完成或已失败

32.2 使用Ajax事件

名称	说明
abort	在请求被中止时触发
error	在请求失败时触发
load	在请求成功完成时触发
loadend	在请求已完成时触发，无论成功还是发生错误
loadstart	在请求开始时触发
progress	触发以提示请求的进度
readystatechange	在请求生命周期的不同阶段触发
timeout	如果请求超时则触发

32.4 获取和设置标头

方法	说明	返回
setRequestHeader(`<header>, <value>`)	用指定值设置标头	void
getResponseHeader(`<header>`)	获取指定标头的值	string
getAllResponseHeaders()	以单个字符串的形式获取所有标头	string

32.5 生成跨源Ajax请求

从一个来源到另一个来源的Ajax请求被称为跨源请求。

这一策略的目的是降低跨站脚本攻击的风险，即诱导浏览器执行恶意脚本。

跨源资源共享（Cross-Origin Resourece Sharing，CORS）规范提供了一种合法的方式来生成跨源请求。

33.6 追踪上传进度

使用XMLHttpRequest对象的upload属性。

upload属性返回一个可用于监听进度的XMLHttpRequestUpload对象。

upload.onprogress = function(e) {
  progress.max = e.total;
  progress.value = e.loaded;
}

第34章使用多媒体

34.1 使用video元素

元素：video 元素类型：流/短语允许具有的父元素：任何能包含流或短语元素的元素局部属性：autoplay、preload、controls、loop、poster、height、width、muted、src 内容：source和track元素，以及短语和流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

<video width="360" height="240" src="timessquare.webm"
       autoplay controls preload="none" muted>
  Video cannot be displayed
</video>

video元素的属性

属性	说明
autoplay	如果存在，浏览器会尽可能立刻开始播放视频
preload	告诉浏览器是否要预先载入视频
controls	除非次属性存在，否则浏览器不会显示播放控件
loop	重复播放视频
poster	指定在视频数据载入时显示的图片
width/height	宽度/高度
muted	让视频一开始处于静音状态
src	指定要显示的视频

34.1.1 预先加载视频

preload属性所允许的值

none 用户开始播放之前不会载入视频。
metadata 用户开始播放之前只能载入视频的元数据（部分浏览器还是会加载资源）。
auto 请求浏览器尽快下载整个视频。默认行为。

34.1.2 显示占位图像

使用poster属性。

<video width="360" height="240" src="timessquare.webm"
       controls preload="none" poster="poster.png">
  Video cannot be displayed
</video>

34.1.3 设置视频尺寸

如果省略width和height属性，浏览器就会显示一个很小的占位元素，并在元数据可用时把它调整到视频原始尺寸的大小。

34.1.4 指定视频来源（和格式）

浏览器重点支持的视频格式

格式	说明	支持
WebM	此格式由谷歌提供支持，无专利约束，免版税。	Opera、Chrome、Firefox
Ogg/Theora	Ogg Theora是一种开发、免版税和无专利约束的格式	Opera、Chrome、Firefox
MP4/H.264		IE、Chrome、Safari

元素：source 元素类型：N 允许具有的父元素：video、audio 局部属性：src、type（指定视频的MIME类型，浏览器会进行判断，减少浏览器发多个请求）、media 内容：N 标签用法：虚元素形式在HTML5中的变化：N 习惯样式：N

<!-- 浏览器会沿着列表顺序寻找它能够播放的视频文件 -->
<video controls width="360" height="240">
  <source src="timessquare.webm" type="video/webm" />
  <source src="timessquare.ogv" type="video/ogg" />
  <source src="timessquare.mp4" type="video/mp4" />
  Video cannot be displayed
</video>

34.1.5 track元素

它提供了一套视频相关内容的实现机制，这些内容包括字慕、说明和章节标题。

元素：track 元素类型：N 允许具有的父元素：video、audio 局部属性：kind、src、srclang、label、default 内容：N 标签用法：虚元素形式在HTML5中的变化：N 习惯样式：N

34.2 使用audio元素

元素：audio 元素类型：流/短语允许具有的父元素：任何能包含流或短语元素的元素局部属性：autoplay、preload、controls、loop、muted、src 内容：source和track元素，以及短语和流内容标签用法：开始标签和结束标签在HTML5中的变化：N 习惯样式：N

34.3 通过DOM操作嵌入式媒体

34.3.1 获得媒体信息

HTMLMediaElement对象

成员	说明	返回
autoplay	获取或设置autoplay属性是否存在	boolean
canPlayType(`<type>`)	获取浏览器能否播放特定MIME类型的提示	string
currentSrc	获取当前的来源	字符串
controls	获取或设置controls属性是否存在	boolean
defaultMuted	获取或设置muted属性一开始是否存在	boolean
loop	获取或设置loop属性是否存在	boolean
muted	获取或设置muted属性是否存在	boolean
preload	获取或设置preload的值	string
src	获取或设置src	string
volume	获取或设置音量，范围从0.0到1.0	number

HTMLVideoElement对象

成员	说明	返回
height	获取或设置height	number
poster	获取或设置poster	string
videoHeight	获取视频的原始高度	number
videoWidth	获取视频的原始宽度	number
width	获取或设置width	number

34.3.2 评估回放能力

canPlayType方法。

34.3.3 控制媒体回放

HTMLMediaElement对象的回放成员

成员	说明	返回
currentTime	返回媒体文件当前的回放点	number
duration	返回媒体文件的总时长	number
ended	如果媒体文件已经播放完毕则返回true	boolean
pause()	暂停媒体回放	void
paused	如果回放暂停就返回true，否则返回false	boolean
play()	开始回放媒体	void

第37章使用拖放

37.1 创建来源项目

draggable属性的值

值	说明
true	此元素能被拖动
false	此元素不能被拖动
auto	浏览器可以自主决定某个元素是否能被拖动

处理拖动事件

名称	说明
dragstart	在元素开始被拖动时触发
drag	在元素被拖动时反复触发
dragend	在拖动操作完成时触发

<div id="src">
  <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
  <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
  <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
</div>

37.2 创建释放区

释放区事件

名称	说明
dragenter	当被拖动元素进入释放区所占据的屏幕空间时触发
dragover	当被拖动元素在释放区内移动时触发
dragleave	当被拖动元素没有放下就离开释放区时触发
drop	当被拖放元素在释放区里放下时触发

37.3 使用DataTransfer对象

DragEvent对象定义的属性：

dataTransfer返回用于传输数据到释放区的对象，返回DataTransfer。

DataTransfer对象定义的属性

名称	说明	返回
types	返回数据的格式	string[]
getData(`<format>`)	返回指定格式的数据	string
setData(`<format>, <data>`)	设置指定格式的数据	void
clearData(`<format>`)	移除指定格式的数据	void
files	返回已被拖动文件的列表	FileList

当我们拖放文件到释放区时，files属性返回一个FileList对象。

名称	说明	返回
name	获取文件名	string
type	获取文件类型，以MIME类型表示	string
size	获取文件大小（以字节计算）	number

第38章使用地理定位

38.1 使用地理定位

通过navigator.geolocation访问地理定位功能，它会返回一个Geolocation对象

Geolocation对象

名称	说明	返回
getCurrentPosition(callback, errorCallback, options)	获取当前位置	void
watchPosition(callback, error, options)	开始监控当前位置	number
clearWatch	停止监控当前位置	void

成功回调函数参数包含一个Position对象，返回当前位置信息。

38.2 处理地理定位错误

getCurrentPosition的第二个参数errorCallback函数参数带有一个PositionError对象

名称	说明	返回
code	返回代表错误类型的代码	string
message	返回描述错误的字符串	string

38.3 指定地理位置选项

getCurrentPosition第三个参数options用于控制位置信息的获取方式。

名称	说明	返回
enableHighAccuracy	告诉浏览器我们希望得到可能的最佳结果	boolean
timeout	限制请求位置的时间，设置多少毫秒后会报告一个超时错误	number
maximumAge	告诉浏览器我们愿意接受缓存过的位置	number

38.4 监控位置

watchPosition(callback, error, options)会被反复调用，获取最新的位置信息。

第39章使用Web存储

Storage对象

名称	说明	返回
clear()	移除保存的键值对	void
getItem(`<key>`)	取得与指定键关联的值	string
key(`<index>`)	取得指定索引的键	string
length	返回已保存的键值对数量	number
removeItem(`<key>`)	移除指定键对应的键值对	string
setItem(`<key>, <value>`)	添加一个新的键值对，如果键已使用就更新它的值	void
`[<key>]`	用数据的访问形式取得与指定键关联的值	string

监听存储事件straoge

StorageEvent对象

名称	说明	返回
key	返回发生变化的键	string
oldValue	返回关联此键的旧值	string
newValue	返回关联此键的新值	string
url	返回制造变化的文档URL	string
storageArea	返回发生变化的Storage对象	Storage

# 模板

# 第一部分 开篇

# 第1章 HTML5背景知识

# 1.2 HTML5简介

# 第3章 初识HTML

# 3.3 创建HTML文档

# 3.3.1 外层结构

# 3.3.2 元数据

# 3.3.5 了解元素类型

# 3.4 使用HTML实体

# 3.5 HTML全局属性

# accesskey属性

# class属性

# contenteditable属性（New）

# contextmenu属性（尚无支持这个属性的浏览器）

# dir属性

# draggable属性

# dropzone属性

# hidden属性

# id属性

# lang属性

# spellcheck属性

# style属性

# tabindex属性

# title属性

# 第二部分 HTML元素

# 第6章 HTML5元素背景知识

# 6.1 语义与呈现分离

# 6.2 元素选用规则

# 6.4 元素速览

# 6.4.1 文档和元数据元素

# 6.4.2 文本元素

# 6.4.3 对内容分组

# 6.4.4 划分内容

# 6.4.5 制表

# 6.4.6 创建表单

# 6.4.7 嵌入内容

# 第7章 创建HTML文档

# 7.1 构筑基本的文档结构

# 7.1.1 DOCTYPE元素

# 7.1.2 html元素（根元素）

# 7.1.3 head元素

# 7.1.4 body元素

# 7.2 用元数据元素说明文档

# 7.2.1 设置文档表题title

# 7.2.2 设置相对URL的解析基准

# 7.2.3 用元数据说明文档

# 1.指定名/值元数据对

# 2.声明字符编码

# 3.模拟HTTP标头字段

# 7.2.4 定义CSS样式

# 7.2.5 指定外部资源

# 7.3 使用脚本元素

# 7.3.1 script元素

# 推迟执行脚本

# 7.3.2 noscript元素

# 第8章 标记文字

# 8.1 生成超链接

# 8.1.3 生成内部超链接

# 8.1.4 设定浏览环境

# 8.2 用基本的文字元素标记内容

# 8.2.1 表示关键字和产品名称

# 8.2.2 加以强调

# 8.2.3 表示外文词语或科技术语

# 8.2.4 表示不准确或校正

# 8.2.5 表示重要的文字

# 8.2.7 添加小号字体内容

# 8.2.8 添加上标和下标

# 8.3 换行

# 8.3.1 强制换行br

# 8.3.2 指明可以安全换行的建议位置wbr

# 8.4 表示输入和输出

# 8.5 使用标题引用、引文、定义和缩写

# 8.5.1 表示缩写

# 8.5.2 定义术语

# 8.5.3 引用来自他处的内容

# 8.5.4 引用其他作品的标题

# 8.6 使用语言元素

# 8.6.1 ruby、rt和rp元素

# 8.7 其他文本元素

模板