第1章 HTML5基础 1
1.1 HTML5概述 2
1.1.1 HTML版本概览 2
1.1.2 HTML5诞生记 2
1.1.3 HTML5组织 4
1.1.4 HTML5开发规则 4
1.1.5 HTML5特性 4
1.1.6 浏览器检测 6
1.2 HTML5设计原则 6
1.2.1 避免不必要的复杂性 6
1.2.2 支持已有内容 7
1.2.3 解决实际问题 7
1.2.4 用户怎么使用就怎么设计规范 8
1.2.5 优雅地降级 8
1.2.6 支持的优先级 9
1.3 HTML5语法特性 9
1.3.1 文档和标记 9
1.3.2 宽松的约定 10
1.4 案例实战 11
1.4.1 编写第一个HTML5文档 11
1.4.2 比较HTML4与HTML5文档结构 12
1.4.3 设计一个较详细的HTML5文档模板 13
1.5 HTML5 API 14
1.5.1 新增的API 14
1.5.2 修改的API 14
1.5.3 扩展Document 15
1.5.4 扩展HTMLElement 15
1.5.5 扩展DOM HTML 15
1.5.6 弃用的API 15
1.6 在线练习 15
第2章 HTML5新增元素和文档结构 16
2.1 HTML5元素 17
2.1.1 新元素分类 17
2.1.2 废除的元素 17
2.2 设计新的文档结构 17
2.2.1 article——文章块 17
2.2.2 section——区块 18
2.2.3 nav——导航条 21
2.2.4 aside——辅助栏 22
2.2.5 main——主要区域 24
2.2.6 header——标题栏 25
2.2.7 hgroup——标题组 25
2.2.8 footer——页脚栏 26
2.3 设计新的语义信息 27
2.3.1 address——联系信息 27
2.3.2 time——显示时间 27
2.3.3 figure和figcaption流媒体 29
2.3.4 details和summary——详细内容 29
2.3.5 mark——记号文本 31
2.3.6 progress——进度条 32
2.3.7 meter——度量 33
2.3.8 dialog——模态对话框 34
2.3.9 bdi——隔离文本 35
2.3.10 wbr——换行断点 36
2.3.11 ruby、 rt、 rp——文本注释 36
2.3.12 command——菜单命令 37
2.4 完善旧元素 38
2.4.1 a——超链接 38
2.4.2 ol——有序列表 39
2.4.3 dl——定义列表 39
2.4.4 cite ——引用文本 40
2.4.5 small——小号字体 41
2.4.6 iframe——浮动框架 41
2.4.7 script——脚本 41
2.5 HTML5新的全局属性 42
2.5.1 contentEditable——可编辑内容 42
2.5.2 contextmenu——快捷菜单 43
2.5.3 data——自定义属性 44
2.5.4 draggable——可拖动 45
2.5.5 dropzone——拖动数据 45
2.5.6 hidden——隐藏 45
2.5.7 spellcheck——语法检查 46
2.5.8 translate——可翻译 46
2.6 HTML5文档大纲 47
2.6.1 定义文档节段 47
2.6.2 隐式分节 47
2.6.3 特殊分节 47
2.7 案例实战 47
2.8 在线练习 50
第3章 HTML5表单 51
3.1 HTML5表单特性 52
3.2 新的Input类型 53
3.2.1 email——Email地址框 53
3.2.2 url——URL地址框 54
3.2.3 number——数字框 55
3.2.4 range——范围框 56
3.2.5 date pickers——日期选择器 57
3.2.6 search——搜索框 62
3.2.7 tel——电话号码框 63
3.2.8 color——拾色器 63
3.3 新的input属性 64
3.3.1 autocomplete——自动完成 64
3.3.2 autofocus——自动获取焦点 65
3.3.3 form——归属表单 66
3.3.4 表单重写 67
3.3.5 height和width——高和宽 67
3.3.6 list——列表选项 68
3.3.7 min、 max和step——最小值、最大值和步长 68
3.3.8 multiple——多选 68
3.3.9 pattern——匹配模式 69
3.3.10 placeholder——替换文本 69
3.3.11 required——必填 70
3.4 新的表单元素 71
3.4.1 datalist——数据列表 71
3.4.2 keygen——密钥对生成器 71
3.4.3 output——输出结果 72
3.5 新的 form属性 73
3.5.1 autocomplete——自动完成 73
3.5.2 novalidate——禁止验证 73
3.6 案例实战 74
3.6.1 设计HTML5注册表单 74
3.6.2 设计HTML5验证表单 75
3.7 在线练习 75
第4章 HTML5绘图和动画 76
4.1 使用canvas 77
4.2 绘制图形 79
4.2.1 矩形 79
4.2.2 路径 80
4.2.3 直线 81
4.2.4 圆弧 82
4.2.5 二次方曲线 83
4.2.6 三次方曲线 85
4.3 定义样式和颜色 86
4.3.1 颜色 86
4.3.2 不透明度 87
4.3.3 实线 88
4.3.4 虚线 90
4.3.5 线性渐变 91
4.3.6 径向渐变 92
4.3.7 图案 93
4.3.8 阴影 94
4.3.9 填充规则 95
4.4 图形变形 95
4.4.1 保存和恢复状态 95
4.4.2 清除画布 96
4.4.3 移动坐标 97
4.4.4 旋转坐标 98
4.4.5 缩放图形 100
4.4.6 变换图形 100
4.5 图形合成 102
4.5.1 合成 102
4.5.2 裁切 104
4.6 绘制文本 105
4.6.1 填充文字 105
4.6.2 轮廓文字 106
4.6.3 文本样式 107
4.6.4 测量宽度 108
4.7 使用图像 109
4.7.1 导入图像 109
4.7.2 缩放图像 111
4.7.3 裁切图像 111
4.7.4 平铺图像 112
4.8 像素操作 114
4.8.1 认识ImageData对象 114
4.8.2 创建图像数据 114
4.8.3 将图像数据写入画布 114
4.8.4 在画布中复制图像数据 115
4.8.5 保存图片 116
4.9 Path2D对象 117
4.9.1 Canvas 2D API新功能 117
4.9.2 使用Path2D对象 119
4.10 案例实战 121
4.10.1 设计基本动画 122
4.10.2 颜色选择器 122
4.10.3 给图像去色 123
4.10.4 缩放图像和反锯齿处理 123
4.10.5 设计运动动画 123
4.10.6 设计地球和月球公转动画 124
4.11 在线练习 124
第5章 HTML5音频和视频 125
5.1 使用HTML 5音频和视频 126
5.1.1 使用〈audio〉 126
5.1.2 使用〈video〉 127
5.1.3 设置属性 129
5.1.4 设置方法 132
5.1.5 设置事件 133
5.2 案例实战 135
5.2.1 设计音乐播放器 135
5.2.2 获取播放进度 136
5.2.3 设计视频播放器 136
5.2.4 视频自动截图 137
5.2.5 视频同步字幕 138
5.2.6 使用HTML5 Web Audio API增加声音 142
5.2.7 访问多媒体属性、方法和事件 143
5.3 在线练习 143
第6章 数据存储 144
6.1 Web Storage 145
6.1.1 使用Web Storage 145
6.1.2 案例：设计登录页 147
6.1.3 案例：流量统计 148
6.2 Web SQL Database 149
6.2.1 使用Web SQL Database 150
6.2.2 案例：设计登录页 154
6.2.3 案例：设计留言板 156
6.3 indexedDB 163
6.3.1 建立连接 163
6.3.2 更新版本 165
6.3.3 新建仓库 166
6.3.4 新建索引 168
6.3.5 使用事务 170
6.3.6 保存数据 171
6.3.7 访问数据 173
6.3.8 访问键值 174
6.3.9 访问属性 176
6.4 案例：设计录入表单 178
6.5 在线练习 179
第7章 应用程序缓存 180
7.1 ApplicationCache API基础 181
7.1.1 认识ApplicationCache API 181
7.1.2 配置服务器 182
7.1.3 认识manifest 183
7.1.4 使用ApplicationCache 185
7.1.5 事件监听 189
7.2 案例实战 190
7.2.1 缓存首页 190
7.2.2 离线编辑 193
7.3 在线练习 193
第8章 多线程编程 194
8.1 Web Workers基础 195
8.1.1 认识Web Workers 195
8.1.2 创建Web Workers 196
8.1.3 Workers通信 198
8.1.4 使用Web Workers 199
8.2 案例实战 202
8.2.1 求和运算 202
8.2.2 过滤运算 204
8.2.3 并发运算 206
8.2.4 多运算通信 206
8.2.5 数列运算 206
8.3 在线练习 206
第9章 位置信息 207
9.1 Geolocation API基础 208
9.1.1 Geolocation API应用场景 208
9.1.2 位置信息来源 208
9.1.3 位置信息表示方式 208
9.1.4 获取位置信息 209
9.1.5 浏览器兼容性 211
9.1.6 监测位置信息 211
9.1.7 停止获取位置信息 211
9.1.8 保护隐私 212
9.1.9 处理位置信息 212
9.1.10 使用position 212
9.2 案例：设计位置地图 214
9.3 在线练习 215
第10章 历史记录 216
10.1 History API基础 217
10.1.1 了解History API 217
10.1.2 使用History API 218
10.1.3 注意事项 220
10.2 案例实战 220
10.2.1 设计导航页面 220
10.2.2 设计无刷新网站 223
10.2.3 设计无刷新灯箱广告 226
10.2.4 设计可后退画板 226
10.3 在线练习 227
第11章 文件操作 228
11.1 FileList 229
11.2 Blob 230
11.2.1 访问Blob 230
11.2.2 创建Blob 231
11.2.3 截取Blob 233
11.2.4 保存Blob 234
11.3 FileReader 235
11.3.1 读取文件 235
11.3.2 事件监测 237
11.4 ArrayBuffer和ArrayBufferView 238
11.4.1 使用ArrayBuffer 239
11.4.2 使用ArrayBuffer View 239
11.4.3 使用DataView 240
11.5 FileSystem API 243
11.5.1 认识FileSystem API 243
11.5.2 访问FileSystem 243
11.5.3 申请配额 245
11.5.4 新建文件 248
11.5.5 写入数据 250
11.5.6 添加数据 252
11.5.7 读取数据 253
11.5.8 复制文件 254
11.5.9 删除文件 255
11.5.10 创建目录 256
11.5.11 读取目录 259
11.5.12 删除目录 260
11.5.13 复制目录 261
11.5.14 重命名目录 262
11.5.15 使用filesystem：URL 264
11.6 案例：设计资源管理器 265
11.7 在线练习 266
第12章 HTML5通信 267
12.1 跨文档消息传递 268
12.1.1 postMessage基础 268
12.1.2 案例：设计简单的跨域通话 269
12.1.3 案例：设计跨域动态对话 272
12.1.4 案例：设计通道通信 275
12.2 WebSockets通信 277
12.2.1 WebSocket基础 278
12.2.2 使用WebSockets API 279
12.2.3 在PHP中建立socket 282
12.2.4 WebSockets API开发框架 284
12.2.5 案例：设计简单的“呼-应”通信 284
12.2.6 案例：发送JSON对象 289
12.2.7 案例：使用Workerman框架通信 290
12.2.8 案例：推送信息 291
12.3 在线练习 292
第13章 WebRTC视频直播 293
13.1 WebRTC基础 294
13.2 案例实战 294
13.2.1 访问本地设备 294
13.2.2 视频截图 296
13.2.3 视频对话基础 297
13.2.4 视频对话实现 298
13.2.5 SDP交换 305
13.2.6 ICE交换 310
13.3 在线练习 312
第14章 跨窗口操作 313
14.1 通知API 314
14.1.1 Notification API基础 314
14.1.2 案例：设计桌面通知 316
14.1.3 案例：关闭通知 317
14.1.4 案例：设计多条通知 318
14.2 页面可见API 319
14.2.1 Page Visibility基础 319
14.2.2 案例：设计视频页面 321
14.2.3 案例：设计登录页面 322
14.3 全屏API 324
14.3.1 Fullscreen API基础 324
14.3.2 案例：设计全屏显示 326
14.3.3 案例：设计全屏播放 327
14.4 在线练习 328
第15章 拖放操作 329
15.1 拖放API基础 330
15.1.1 拖放功能实现 330
15.1.2 DataTransfer对象 333
15.2 案例实战 336
15.2.1 设计垃圾箱 336
15.2.2 设计接纳箱 338
15.2.3 拖选对象 339
15.2.4 可视化删除 339
15.3 在线练习 339
第16章 异步交互 340
16.1 XMLHttpRequest 2基础 341
16.1.1 请求时限 341
16.1.2 FormData数据对象 341
16.1.3 上传文件 342
16.1.4 跨域访问 342
16.1.5 响应不同类型数据 342
16.1.6 接收二进制数据 342
16.1.7 监测数据传输进度 343
16.2 案例实战 344
16.2.1 接收ArrayBuffer对象 344
16.2.2 接收Blob对象 347
16.2.3 发送字符串 347
16.2.4 发送表单数据 348
16.2.5 发送二进制文件 350
16.2.6 发送Blob对象 351
16.2.7 跨域请求 351
16.2.8 设计文件上传进度条 352
16.3 在线练习 352
第17章 延迟处理 353
17.1 延迟处理基础 354
17.1.1 从回调函数到异步队列 354
17.1.2 使用promise对象 357
17.2 案例实战 360
17.2.1 队列操作 360
17.2.2 异常处理 361
17.2.3 创建序列 363
17.2.4 并行处理 366
17.3 在线练习 367
第18章HTML5其他API 368
18.1 指针锁定API 369
18.1.1 认识鼠标指针锁定API 369
18.1.2 案例：设计全屏鼠标指针锁定 369
18.2 requestAnimationFrame 370
18.2.1 认识requestAnimFrame 370
18.2.2 案例：设计进度条 372
18.2.3 案例：设计旋转的小球 372
18.3 Mutation Observer 374
18.3.1 认识Mutation Observer 374
18.3.2 案例：观察DOM元素 376
18.3.3 案例：观察DOM属性 376
18.4 在线练习 377
第19章 CSS3基础 378
19.1 CSS3概述 379
19.1.1 CSS3模块 379
19.1.2 CSS3开发状态 379
19.1.3 浏览器支持状态 380
19.2 CSS3选择器概述 381
19.3 使用CSS3选择器 384
19.3.1 兄弟选择器 384
19.3.2 属性选择器 385
19.3.3 伪类选择器 386
19.3.4 伪对象选择器 387
19.4 案例实战 388
19.4.1 设计按钮样式 388
19.4.2 设计列表样式 389
19.4.3 设计表格样式 389
19.4.4 设计表单样式 390
19.4.5 设计锚点样式 391
19.4.6 设计超链接样式 391
19.5 在线练习 392
第20章 CSS3文本样式 393
20.1 CSS3文本模块 394
20.1.1 文本模块概述 394
20.1.2 文本溢出 395
20.1.3 文本换行 396
20.1.4 书写模式 399
20.1.5 initial值 401
20.1.6 inherit值 402
20.1.7 unset值 403
20.1.8 all属性 403
20.2 色彩模式 404
20.2.1 rgba（）函数 404
20.2.2 hsl（）函数 405
20.2.3 hsla（）函数 408
20.2.4 opacity属性 409
20.2.5 transparent值 410
20.2.6 currentColor值 411
20.3 文本阴影 412
20.3.1 定义text-shadow 413
20.3.2 案例：设计特效字 414
20.4 内容生成和替换 418
20.4.1 定义content 418
20.4.2 案例：应用content 420
20.5 网络字体 421
20.5.1 使用＠font-face 421
20.5.2 案例：设计字体图标 423
20.6 案例实战 424
20.6.1 设计黑科技网站首页 424
20.6.2 设计消息提示框 425
20.7 在线练习 425
第21章 CSS3背景图像和渐变背景 426
21.1 设计背景图像 427
21.1.1 设置定位原点 427
21.1.2 设置裁剪区域 428
21.1.3 设置背景图像大小 430
21.1.4 设置多重背景图像 431
21.2 设计渐变背景 433
21.2.1 定义线性渐变 433
21.2.2 设计线性渐变样式 435
21.2.3 案例：设计网页渐变色 438
21.2.4 案例：设计条纹背景 439
21.2.5 定义重复线性渐变 442
21.2.6 定义径向渐变 443
21.2.7 设计径向渐变样式 445
21.2.8 定义重复径向渐变 447
21.2.9 案例：设计网页背景色 448
21.2.10 案例：设计图标 450
21.3 案例实战 451
21.3.1 设计优惠券 451
21.3.2 设计桌面纹理背景 451
21.3.3 设计按钮 452
21.3.4 渐变特殊应用场景 452
21.3.5 设计栏目折角效果 453
21.4 在线练习 453
第22章 CSS3用户接口样式 454
22.1 界面显示 455
22.1.1 显示方式 455
22.1.2 调整尺寸 456
22.1.3 缩放比例 457
22.2 轮廓样式 458
22.2.1 定义轮廓 458
22.2.2 设计轮廓线 460
22.3 边框样式 462
22.3.1 定义边框图像源 462
22.3.2 定义边框图像平铺方式 463
22.3.3 定义边框图像宽度 464
22.3.4 定义边框图像分割方式 464
22.3.5 定义边框图像扩展 465
22.3.6 案例：应用边框图像 466
22.3.7 定义圆角边框 468
22.3.8 案例：设计椭圆图形 470
22.4 盒子阴影 471
22.4.1 定义盒子阴影 472
22.4.2 案例：box-shadow的应用 474
22.4.3 案例：设计翘边阴影 476
22.5 案例实战 478
22.5.1 设计内容页 478
22.5.2 设计应用界面 479
22.6 在线练习 479
第23章 CSS3伸缩盒布局 480
23.1 多列布局 481
23.1.1 设置列宽 481
23.1.2 设置列数 482
23.1.3 设置间距 482
23.1.4 设置列边框 483
23.1.5 设置跨列显示 484
23.1.6 设置列高度 485
23.2 旧版伸缩盒 485
23.2.1 启动伸缩盒 485
23.2.2 设置宽度 486
23.2.3 设置顺序 488
23.2.4 设置方向 488
23.2.5 设置对齐方式 489
23.3 新版伸缩盒 491
23.3.1 认识Flexbox系统 491
23.3.2 启动伸缩盒 492
23.3.3 设置主轴方向 493
23.3.4 设置行数 494
23.3.5 设置对齐方式 495
23.3.6 设置伸缩项目 497
23.4 伸缩盒版本比较和兼容 499
23.4.1 版本比较和兼容方法 500
23.4.2 案例：设计3栏页面 503
23.4.3 案例：设计3行3列应用 503
23.5 在线练习 504
第24章 CSS3动画 505
24.1 CSS3变形 506
24.1.1 认识Transform 506
24.1.2 设置原点 506
24.1.3 2D旋转 507
24.1.4 2D缩放 508
24.1.5 2D平移 509
24.1.6 2D倾斜 509
24.1.7 2D矩阵 510
24.1.8 设置变形类型 511
24.1.9 设置透视距离和原点 511
24.1.10 3D平移 515
24.1.11 3D缩放 516
24.1.12 3D旋转 517
24.1.13 透视函数 517
24.1.14 变形原点 518
24.1.15 背景可见 518
24.2 过渡动画 519
24.2.1 设置过渡属性 519
24.2.2 设置过渡时间 520
24.2.3 设置延迟过渡时间 521
24.2.4 设置过渡动画类型 521
24.2.5 设置过渡触发动作 522
24.3 帧动画 527
24.3.1 设置关键帧 527
24.3.2 设置动画属性 528
24.4 案例实战 530
24.4.1 设计图形 530
24.4.2 设计冒泡背景按钮 531
24.4.3 设计动画效果菜单 531
24.4.4 设计照片特效 532
24.4.5 设计立体盒子 532
24.4.6 旋转盒子 533
24.4.7 设计翻转广告 533
24.4.8 设计跑步效果 533
24.4.9 设计折叠面板 534
24.5 在线练习 534
第25章 CSS3媒体查询 535
25.1 媒体查询基础 536
25.1.1 媒体类型和媒体查询 536
25.1.2 使用＠media 537
25.1.3 应用＠media 538
25.2 案例实战 541
25.2.1 判断显示屏幕宽度 541
25.2.2 设计响应式版式 542
25.2.3 设计响应式菜单 543
25.2.4 设计自动隐藏布局 544
25.2.5 设计自适应手机页面 544
25.3 在线练习 545