第1章 HTML5：现在，而不是2022年 1
1.1 基本原则 1
1.1.1 Web标准方法 1
1.1.2 Web设计之道：接纳不确定性 4
1.1.3 可访问性 6
1.1.4 制作标记 6
1.2 HTML5是如何形成的 7
1.2.1 超越HTML4 7
1.2.2 XHTML1.0 7
1.2.3 XHTML2.0与激烈反对 8
1.3 HTML5正在推进 9
1.4 HTML5的设计原则 10
1.4.1 支持现有内容 11
1.4.2 优雅降级 11
1.4.3 不要重新发明 11
1.4.4 铺平老路 12
1.4.5 进化而非革命 12
1.5 关于HTML5的若干荒诞说法 12
1.6 小结 14
1.6.1 作业 14
1.6.2 第1章 作业 15
1.6.3 导读 15
第2章 初识HTML5 17
2.1 作业回顾 17
2.1.1 用XHTML1标记的页面 17
2.1.2 84.8％的标记可以保留 19
2.2 关于＜head＞ 20
2.2.1 更完美的DOCTYPE 20
2.2.2 在HTML5中声明语言 21
2.2.3 字符编码 23
2.2.4 简单易记 23
2.3 “Hello World！”旅程 23
2.3.1 XHTML1.0风格的“Hello World！” 24
2.3.2 HTML4风格的“Hello World！” 24
2.3.3 HTML5“松散”风格的“Hello World！” 25
2.3.4 HTML5“严格”风格的“Hello World！” 26
2.4 让HTML5得到跨浏览器支持 26
2.4.1 浏览器如何处理未知元素 26
2.4.2 shiv 28
2.4.3 IE打印保护器 29
2.4.4 声明块级元素 30
2.5 HTML5样板页面 30
2.5.1 不再有type属性 31
2.5.2 填充材料与替换 32
2.6 验证 33
2.6.1 HTML5验证器 33
2.6.2 HTML Lint 34
2.7 重新讨论Miss Baker页面 35
2.8 小结 38
2.9 作业 38
第3章 新的结构化元素 39
3.1 工作流程仍在进化 39
3.2 新语义化开端 41
3.3 结构化构建块＜div＞、＜section＞ 和＜article＞ 43
3.3.1 ＜div＞、＜section＞和＜article＞的区别 43
3.3.2 选用哪一个 44
3.3.3 使用这些元素的基本结构 45
3.4 标题：＜header＞、＜hgroup＞、＜hl＞～＜h6＞以及＜footer＞ 46
3.4.1 带有一个标题的文章 48
3.4.2 带有标题和元数据的文章＜header＞ 48
3.4.3 以＜hgroup＞封装副标题的文章 48
3.4.4 带有标题、副标题以及元数据的文章 49
3.4.5 一些＜hgroup＞用法示例 49
3.5 HTML5的大纲算法 50
3.5.1 实际情况中的大纲 51
3.5.2 根分节元素 52
3.5.3 无标题小节的来源 53
3.6 HTML5风格的标题元素级别 54
3.6.1 嵌套标题元素级别示例 55
3.6.2 新风格的标题元素级别示例 56
3.7 更多的结构化元素：＜nav＞、＜aside＞、＜figure＞以及＜figcaption＞ 57
3.8 综合到一起 59
3.8.1 新内容分节元素小结 59
3.8.2 将一个简单的页面转换成HTML5 61
3.8.3 HTML4.5 介绍：通过＜div class=""""＞添加HTML5语义 66
3.8.4 通过ARIA路标角色对HTML4.5和HTML5添加语义 70
3.8.5 可访问性的现实瑕疵 71
3.9 HTML5与可访问性 71
3.9.1 进化中的可访问性技术 72
3.9.2 HTML5的其他可访问性问题 76
3.9.3 HTML5可访问性：新的希望 76
3.10 小结 76
3.11 作业 77
3.12 延伸阅读 77
第4章 更丰富的内容标记办法 79
4.1 以前的表现式元素与助手 79
4.1.1 赋予＜i＞和＜b＞元素新的语义含义 80
4.1.2 ＜smaN＞元素 83
4.1.3 ＜hr＞元素 84
4.1.4 ＜s＞元素以及＜del＞和＜ins＞元素 85
4.1.5 ＜u＞元素 87
4.1.6 表现式元素：过去时代的遗物 87
4.2 带有＜a＞元素的块级链接 87
4.2.1 编写一个块链接 88
4.2.2 Firefox 4以前版本的注意事项 89
4.3 其他HTML4略有变化的元素 90
4.3.1 ＜ol＞元素及其新（旧）属性 90
4.3.2 ＜dl＞元素 92
4.3.3 ＜cite＞元素 93
4.4 新的语义化元素 95
4.4.1 ＜mark＞元素 95
4.4.2 Ruby注释：＜ruby＞、＜rt＞和 ＜rp＞ 96
4.4.3 ＜time＞元素 100
4.5 扩展HTML5 102
4.5.1 ＜data＞元素 103
4.5.2 自定义的data属性（data-） 103
4.5.3 微格式 104
4.5.4 微格式的轻量级介绍 104
4.5.5 微数据：HTML5的语义点缀 108
4.5.6 微数据语法 109
4.5.7 微数据实战 113
4.5.8 微数据的最终想法 119
4.6 小结 120
4.7 延伸阅读与相关链接 120
第5章 富媒体 121
5.1 Flash面临的形势 121
5.1.1 专利模式与开放标准 122
5.1.2 步入HTML5并与之为友 122
5.1.3 HTML5预示着Flash的终结 123
5.2 HTML5的视频之路 123
5.2.1 视频格式 126
5.2.2 浏览器支持 128
5.2.3 添加视频源 129
5.2.4 track元素 132
5.2.5 更多的视频设置 136
5.2.6 卸掉沉重的负担 138
5.3 音频 140
5.3.1 音频编解码器 141
5.3.2 浏览器支持情况 142
5.3.3 添加音频源 142
5.3.4 使用jPlayer 143
5.3.5 视频和音频小结 143
5.4 Canvas 143
5.4.1 基于像素的自由 143
5.4.2 添加／实现canvas 144
5.4.3 canvas的威力与潜力 152
5.4.4 canvas的更多资源 157
5.5 SVG 158
5.5.1 向量的威力 158
5.5.2 用SVG发布向量 159
5.5.3 SVG相关读物 162
5.6 小结 162
5.7 作业 163
第6章 为Web应用程序铺平道路 165
6.1 HTML5表单 165
6.1.1 HTML5表单的历史 166
6.1.2 HTML5的表单特性 166
6.1.3 新的输入类型 173
6.1.4 验证与如何提供备用办法 185
6.1.5 当前浏览器的支持情况 187
6.1.6 表单实战 188
6.1.7 HTML5表单API 192
6.1.8 HTML5表单小结 192
6.2 Web应用程序 192
6.2.1 用于Web应用程序的元素简介 193
6.2.2 HTML5有关的API 196
6.3 光明前景：基于标准的Web、人人均可访问的、浏览器相互兼容的、运行于各种设备的时代 200
6.4 作业：使用已讨论过的新标记来标记“Join Gordo's Space Cadets（加入戈多的太空学员俱乐部）”表单 201
第7章 CSS3简介 203
7.1 对Web标准重要性的再认识 203
7.2 CSS 1、CSS 2.1、CSS3 204
7.3 CSS3准备好了吗 204
7.3.1 上下文 205
7.3.2 CSS3模块性 205
7.3.3 成熟度 206
7.4 CSS3的优点 206
7.4.1 流水线设计 207
7.4.2 减少工作区和修改 207
7.5 CSS基础回顾 208
7.5.1 规则（规则集）解剖 208
7.5.2 属性 208
7.5.3 值 208
7.5.4 声明 209
7.5.5 声明块 209
7.5.6 关键字 209
7.5.7 CSS单位 210
7.5.8 函数符号 210
7.5.9 选择器 211
7.5.10 组合器 211
7.5.11 At规则 212
7.5.12 厂商专有扩展名 212
7.6 CSS速记 212
7.7 级联、特性和继承 213
7.7.1 CSS级联 214
7.7.2 计算特性 214
7.7.3 CSS继承 215
7.8 CSS组织和维护 216
7.8.1 CSS协定 216
7.8.2 注释最佳实践 220
7.8.3 CSS重置和normalize.css 221
7.8.4 CSS架构和工具箱 224
7.8.5 可维护的CSS 224
7.8.6 CSS验证 228
7.8.7 CSS lint 229
7.9 浏览器支持、厂商前缀、填充物和渐进增强 230
7.9.1 渐进增强 230
7.9.2 CSS3浏览器支持 231
7.10 功能检测和填充物 236
7.10.1 填充物 237
7.10.2 IE专用的填充物 238
7.11 小结 239
7.12 作业 240
7.13 附录：CSS3模块状态 240
第8章 使用CSS选择器使标记尽量简短 243
8.1 选择器概述 243
8.2 CSS3选择器 245
8.2.1 组合器 245
8.2.2 特性和子串选择器 246
8.2.3 UI元素状态伪类 250
8.2.4 Target伪类 253
8.2.5 结构伪类 257
8.2.6 伪元素 266
8.2.7 否定伪类 268
8.3 浏览器支持 269
8.4 选择器的未来 270
8.5 小结 270
8.6 作业 271
8.7 附录 271
第9章 每种情形的布局 273
9.1 许多设备的Web 273
9.1.1 监视器尺寸的演变 274
9.1.2 为每个设备优化独立站点？但这太疯狂了 274
9.2 CSS的可见格式化模型——方框 276
9.3 CSS3布局 317
9.3.1 CSS Positioned Layout Module Level 3 318
9.3.2 CSS Fragmentation Module Level 3 318
9.3.3 Multi-column Layout Module 319
9.3.4 CSSRegions Module Level 3 322
9.3.5 CSS Exclusions and Shapes Module Level 3 324
9.3.6 CSS Paged Media Module Level 3 325
9.3.7 CSS Generated Content for Paged Media Module 327
9.3.8 Flexible Box Layout Module 329
9.3.9 CSS Grid Layout Module 335
9.3.10 CSS3布局模块小结 337
9.4 小结 337
9.5 延伸阅读 338
9.6 规范 339
9.7 作业 340
第10章 改进Web排版 341
10.1 字型和字体 341
10.2 输入的剖析 341
10.3 Web字体的简史 342
10.4 将文本作为图像 343
10.4.1 Farhner图像替代（FIR） 343
10.4.2 Leahy/Langridge方法 344
10.4.3 Phark方法 344
10.4.4 Gilder/Levin方法 344
10.4.5 JavaScript图像替代（JIR） 345
10.5 sIFR 345
10.6 Cufón 346
10.7 SVG字体 346
10.8 ＠font-face 347
10.8.1 Web字体 347
10.8.2 起源 347
10.8.3 ＠font-face回来了 348
10.8.4 解析fontface语法：＠font-face声明 348
10.8.5 ＠font-face的可靠语法 349
10.8.6 避免未样式化的文本闪屏（FOUT） 350
10.9 查找Web字体 353
10.9.1 免费的Web字体 353
10.9.2 商用Web字体 353
10.9.3 作为服务的字体 354
10.9.4 用Web字体设计 355
10.9.5 把Web字体用作图标 355
10.9.6 Web字体小结 355
10.10 基线 356
10.10.1 设置font-family 356
10.10.2 设置垂直间距 356
10.10.3 设置字号 357
10.11 用网格进行设计 357
10.11.1 使用像素 358
10.11.2 使用em 360
10.11.3 设置网格 361
10.11.4 自动改变垂直韵律 361
10.12 基线网格小结 362
10.13 使用Web字体 362
10.13.1 选择字形的粗细 362
10.13.2 选择正确的字宽 363
10.13.3 控制文本溢出 364
10.13.4 从基线开始垂直对齐文本 364
10.13.5 控制单词中各个字符之间的空白 365
10.13.6 调整字间距 366
10.13.7 打断长单词 367
10.13.8 控制空白和换行符 367
10.13.9 打印断字 368
10.14 控制引号字形 371
10.14.1 悬挂标点符号 372
10.14.2 控制非拉丁Web字体的显示 373
10.14.3 word-break 373
10.14.4 text-emphasis 373
10.14.5 使用连字和其他OpenType字体功能 373
10.15 小结 374
10.16 延伸阅读 374
第11章 应用CSS3的属性 377
11.1 颜色与透明度 377
11.1.1 RGB 377
11.1.2 RGBa透明度 378
11.1.3 HSLa 380
11.1.4 不透明度 382
11.2 背景 383
11.2.1 background-clip属性 383
11.2.2 background-origin属性 385
11.2.3 background-size属性 387
11.2.4 多重背景 391
11.3 边框 397
11.3.1 border-radius属性 397
11.3.2 border-image属性 402
11.4 下拉阴影 405
11.4.1 box-shadow属性 406
11.4.2 text-shadow属性 410
11.5 渐变 412
11.6 检测支持和辅助其他浏览器 422
11.6.1 使用Modernizr 422
11.6.2 CSS3 Pie 423
11.7 组合CSS3效果 423
11.8 小结 428
11.9 作业 429
第12章 变形、变换和动画 431
12.1 平移、旋转、缩放、斜切和变形：CSS的2D和3D变形 432
12.1.1 使用变形和变形函数 435
12.1.2 用透视和transform:perspective（）函数将3D对象置于透视角度 444
12.1.3 使用perspective-origin属性修改透视原点 446
12.1.4 用transform-origin修改变形 446
12.1.5 使用transform-style进行3D或平面变换 449
12.1.6 使用backface-visibility隐藏和显示变形元素的背面 450
12.1.7 浏览器对CSS变形的支持 452
12.1.8 CSS变形的不足 454
12.1.9 CSS变形的小结 454
12.2 CSS变换和CSS动画：比较与对照 455
12.3 CSS变换：4D空间中的瑰宝 457
12.3.1 使用transition-property设置可变换的属性 458
12.3.2 使用transition-duration控制变换的持续时间 462
12.3.3 transition-timing-function、三次贝塞尔曲线和steps（）函数 462
12.3.4 使用transition-delay推迟变换的起始时间 467
12.3.5 多个变换值和简写形式的变换属性 467
12.3.6 简写变换属性时值的排序 468
12.3.7 浏览器对CSS变换的支持 468
12.3.8 CSS变换的不足 469
12.3.9 CSS变换的小结 471
12.4 使用CSS动画制作关键帧动画 472
12.4.1 一个使用animation-name和animation-duration的简单动画示例 475
12.4.2 使用＠keyframes控制动画 477
12.4.3 使用animation-timing-function属性的计时函数 478
12.4.4 使用animation-delay修改动画的起始方式 480
12.4.5 动画运行多少次？animation-iteration-count可以告诉你答案 481
12.4.6 结合animation-direction 482
12.4.7 用animation-fill-mode控制元素在动画前后的表现 482
12.4.8 使用animation-play-state暂停动画 484
12.4.9 简略形式的动画属性以及用逗号分隔的animation-＊值 485
12.4.10 浏览器对CSS动画的支持 487
12.5 一些与动画相关的JavaScript迂回方法 489
12.5.1 动画的不足 490
12.5.2 CSS动画的小结 491
12.6 小结 492
12.7 延伸阅读 493
第13章 CSS的前景——即将来临的万众瞩目的事务 497
13.1 硬件加速与CSS性能 497
13.2 国际化 498
13.2.1 用CSS Counter Styles模块自定义列表计数器 498
13.2.2 calc（）和attr（）函数 499
13.2.3 变量、混合和嵌套 501
13.2.4 用CSS着色器将“OMG！”发挥至极致 502
13.3 继续前进，让未来更美好 502
13.4 附录：资料链接 503