文章目录
- 第一部分 开篇
- 第二部分 HTML元素
- 第6章 HTML5元素背景知识
- 第7章 创建HTML文档
- 第8章 标记文字
- 第9章 组织内容
- 第10章 文档分节
- 第11章 表格元素
- 第12章 表单
- 第13章 定制input元素
- 第14章 其他表单元素及输入验证
- 第15章 嵌入内容
- 第四部分 使用DOM
- 第五部分 高级功能
第一部分 开篇
第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 | 投影机 |
| 打印预览和打印页面时 | |
| 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">© 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 | 只能输入不带时区信息的世界时（包括日期和时间） |
| 只能输入规范的电子邮箱地址 | |
| 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.innerWidth;
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 |
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
