HTML5+CSS3开发实战PDF电子书下载

第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