深入理解HTML5

内容概要

关于作者

Anselm Bradford 是新西兰奥克兰大学（AUT）的数字媒体讲师。他的研究领域是交互性媒体、网页媒体和视觉沟通。他从1996年开始从事互联网相关的开发工作，当时他手写了自己的第一个网站。他的Twitter账号是@anselmbradford，偶尔也会在AnselmBradford.com发表博客文章。

Paul Haine是一个在伦敦工作的网页设计师，他的个人博客是 joeblade.com。

关于技术审阅人

Jeffrey Sambells 从事他喜爱的工作。他是个父亲、设计师、开发者、作家和企业家，还有更多其他的头衔。十多年前他开始在互联网上发表各种想法，并且这成为他热爱的事情——不断发现更多的可能性。他有创建流程用户体验的专业技能，总是站在技术（特别是移动设备）尖端。

你可以在这里找到他的有趣作品：http://jeffreysambells. com，或者在Twitter @iamamused上发现他正在进行的秘密作品。

关于封面设计者

Corné van Dooren 设计了本书的封面。在离开ED的朋友，进行Foundation系列的新设计后，他从事结合技术和有机体形式的设计工作，本书的封面就是其成果。

Corné小时候在任何东西上画画，然后开始探索多媒体世界，他并不止步于此。他的信念是“多媒体的极限是人的想象力”，这也促使他不断进步。

Corné为很多国际客户工作，为多媒体杂志编写评论，测试软件，从事多媒体研究，并且参与很多其他ED丛书的工作。可以通过他的网站联系他，或更多了解他：www.cornevandooren.com。

书籍目录

关于作者
xiv

关于技术审阅人
xv

关于封面设计者
xvi

致谢
xvii

引言
xix

第1章　起步：HTML5的演变
1

1.1　HTML5 = HTML • HTML5
1

1.1.1　HTML5出现之前
1

1.1.2　为什么XHTML 2.0消失了，而HTML5流行了
2

1.1.3　WHATWG的理念
2

1.1.4　HTML5的现状
3

1.2　剖析HTML5文档
4

1.3　HTML术语和概念
5

1.3.1　元素
6

1.3.2　属性
6

1.3.3　文档模型
7

1.4　HTML5的新特性
9

1.4.1　向后兼容
9

1.4.2　错误处理
9

1.4.3　简化的doctype
10

1.4.4　简化的字符编码
11

1.4.5　新的内容模型类别
12

1.4.6　新元素
13

1.4.7　微数据
13

1.4.8　内嵌MathML和SVG
13

1.4.9　API
14

1.4.10  不再遵循SGML（又一次！）
14

1.4.11  废弃的特性
14

1.5　XHTML消失了吗
17

1.5.1　MIME类型的问题
18

1.6　在HTML和XHTML之间选择
18

1.7　浏览器支持情况
19

1.8　浏览器开发工具
20

小结
21



第2章　各司其职的标签
22

2.1　全局属性
23

2.1.1　可访问性
24

2.1.2　元数据（metadata）
25

2.1.3　唯一标识
26

2.1.4　可编辑性
28

2.1.5　拼写检查
28

2.1.6　隐藏元素
28

2.1.7　拖曳
29

2.1.8　样式
29

2.1.9　文字方向
29

2.1.10  自定义数据
30

2.2　内容模型类别
30

2.3　根元素
31

2.3.1　html元素的属性
33

2.4　文档元数据和脚本元素
33

2.4.1　网页信息：title和meta
34

2.4.2　链接、样式和资源：base、link和style
36

2.4.3　增加行为和后备内容：script 和 noscript
38

2.5　文档区块元素
40

2.5.1　语义区块元素
40

2.6　内容分组元素
41

2.6.1　无法避免的段落：p
42

2.6.2　打断内容：hr
43

2.6.3　保持格式：pre
43

2.6.4　引用文字：blockquote
43

2.6.5　列表
43

2.6.6　图表、照片、图示：figure和figcaption
47

2.6.7　创建分块：div
47

2.7　文本级语义元素
48

2.8　表格数据元素
49

2.8.1　表格基础
50

2.8.2　添加表头
51

2.8.3　增加说明：caption
52

2.8.4　增加结构：thead、tfoot 和 tbody
52

2.8.5　添加更多结构：colgroup和 col
54

2.9　表单元素
56

2.10  内嵌内容元素
57

2.11  交互元素
59

2.11.1　显示更多：summary 和 details
60

2.11.2　工具条：menu和command
62

小结
62



第3章　认识语义
63

3.1　什么是语义，跟我有什么关系
63

3.2　用大纲思考
64

3.3　HTML5 大纲算法
65

3.4　用标题内容隐性地创建大纲
66

3.5　用区块内容创建大纲
67

3.5.1　提高大纲的语义
68

3.6　头和尾
70

3.6.1　使用hgroup
71

3.6.2　格式化有地址的尾部
71

3.6.3　确定头尾内容
72

3.7　查看HTML5大纲
73

3.8　div和span过时了吗
74

3.9　案例学习：《城市新闻报》
74

3.9.1　添加文本级语义
76

3.10  其他文本级元素
84

3.10.1　作品标题：cite
85

3.10.2　格式化计算机输入/输出：code、var、samp、kbd
85

3.10.3　标记文本编辑：ins和del
85

3.10.4　处理外来脚本
85

小结
87



第4章　精通表单
88

4.1　表单元素复习
88

4.1.1　分析表单元素
89

4.1.2　表单元素属性
90

4.2　获取输入
91

4.2.1　最初的输入类型
93

4.2.2　新输入类型
98

4.3　校验和提交表单
102

4.3.1　输入字段必填
103

4.3.2　用按钮和图片提交表单
103

4.4　其他常用input元素属性
105

4.4.1　提供占位符文字
105

4.4.2　字段只读
106

4.4.3　autocomplete 和 autofocus
106

4.4.4　使用数据列表
107

4.5　其他表单控件
108

4.5.1　菜单
108

4.5.2　文本块
111

4.5.3　显示进度
112

4.5.4　显示度量
112

4.5.5　显示计算的输出
114

4.5.6　密钥生成器
115

4.6　用fieldset和label添加结构
115

4.7　完整的表单
117

4.7.1　第一页：收集用户详情
117

4.7.2　第二页：收集评论
121

4.7.3　第三页： 确认信息
123

4.8　表单可用性
124

4.8.1　各司其职的输入类型
124

4.8.2　保持简洁
124

4.8.3　别让我思考、别让我费力、别骗我
125

4.8.4　记住互联网是全球的
125

4.8.5　需要时提供后备方案
125

小结
126



第5章　多媒体：视频、音频和内嵌媒体
127

5.1　一切的开始：img
127

5.2　图像映射
130

5.3　嵌入其他媒体
132

5.3.1　embed元素
132

5.3.2　object元素
133

5.4　嵌入的HTML：iframe
135

5.4.1　处理iframe元素里的内容
136

5.4.2　新的iframe元素属性
137

5.4.3　指向iframe
138

5.5 　视频
139

5.5.1　视频格式
139

5.5.2　版权问题
140

5.5.3　处理视频源
140

5.5.4　视频属性
144

5.6　音频
146

5.6.1　音频格式
147

5.7　文字轨
148

5.8　编码音频和视频
149

5.9　最后一个重要元素
150

小结
150



第6章　CSS3
151

6.1　当前状态：CSS2.1
151

6.2　CSS3 模块
152

6.3　使用CSS
153

6.3.1　附上样式表
153

6.3.2　CSS样式规则
155

6.3.3　基本的CSS选择器语法
157

6.3.4　高级选择器
161

6.3.5　高效使用选择器
175

6.3.6　CSS盒模型
176

6.4　背景和边框
180

6.4.1　基本背景色和图片
180

6.4.2　多重背景
184

6.4.3　圆角
185

6.4.4　阴影
185

6.5　颜色
186

6.5.1　屏幕上的颜色
186

6.5.2　功能符语法
188

6.5.3　色调、饱和度、亮度
188

6.5.4　不透明度
189

6.6　网页字体的编排设计
190

6.6.1　网页字体
190

6.6.2　多列
192

6.6.3　文字特效
192

6.6.4　字体的规则
193

小结
194



第7章　用户交互和HTML5 API
195

7.1　使用本章的JavaScript
195

7.1.1　操作DOM属性和方法
196

7.1.2　控制台日志
197

7.1.3　事件
199

7.2　历史API
200

7.2.1　非常简单的Ajax
201

7.2.2　基于历史的Ajax
203

7.3　构建自定义视频控制器
205

7.4　2D Canvas API 编程
208

7.4.1　画布绘图
211

7.4.2　画布状态
215

7.4.3　画布的交互
216

7.4.4　画布动画
217

7.5　拖曳操作
219

7.5.1　用拖曳排序列表
225

小结
227



第8章　前方的路
228

8.1　移动互联网的挑战
228

8.2　响应式设计
229

8.2.1　viewport
229

8.2.2　媒体查询
231

8.3　离线应用缓存
233

8.4　其他HTML5技术
234

8.4.1　微数据
234

8.4.2　撤销管理器API
236

8.4.3　即将到来的CSS技术
236

小结
237



附录A　相关技术
239

索引
251

作者简介

HTML5并不一定适用于所有网站，而是面向未来的网站！本书面向的读者是致力于创建有更好的多媒体、交互性和语义的网站的开发者和设计师。

本书介绍了HTML5里的新元素和它们的用法，包括不太常用的元素。书中也包含了巧妙的样式和脚本技巧，可以运用于你的网站。本书完全遵循技术标准和最新网站设计技术。

 深入理解HTML5下载