第1章 HTML 5概述 1
1.1 了解HTML 5 1
1.1.1 HTML 5简介 1
1.1.2 HTML 5的组织 2
1.1.3 HTML 5的特性 2
1.1.4 HTML 5的优点 4
1.1.5 HTML 5的发展趋势 4
1.2 HTML 5与其他技术的区别 4
1.2.1 与XHTML的区别 5
1.2.2 与Silverlight和Flash的区别 6
1.3 HTML 5与HTML 4的区别 7
1.3.1 语法的改变 7
1.3.2 新增元素和废除元素 10
1.3.3 新增属性和废除属性 14
1.3.4 全局属性 17
1.4 HTML 5的浏览器支持情况 19
1.4.1 支持HTML 5的浏览器说明 20
1.4.2 在线测试当前浏览器的支持情况 21
1.5 实验指导1-1：简单安装傲游浏览器 24
1.6 常用的浏览器内核 25
思考与练习 26
第2章 HTML 5中的新增元素 28
2.1 新增的结构元素 28
2.1.1 header元素 28
2.1.2 article元素 29
2.1.3 section元素 30
2.1.4 nav元素 33
2.1.5 footer元素 35
2.1.6 address元素 36
2.1.7 hgroup元素 37
2.2 新增的块级语义元素 38
2.2.1 aside元素 38
2.2.2 figure元素 40
2.2.3 dialog元素 41
2.3 新增的行内语义元素 42
2.3.1 mark元素 42
2.3.2 cite元素 43
2.3.3 time元素 44
2.3.4 meter元素 45
2.3.5 progress元素 47
2.4 新增的交互元素 48
2.4.1 details元素 48
2.4.2 menu元素 50
2.4.3 command元素 52
2.4.4 datagrid元素 53
2.5 改良HTML 4元素的功能 54
2.5.1 ul元素 54
2.5.2 ol元素 55
2.5.3 嵌套列表 57
2.6 实验指导2-1：使用新增元素构建网页 58
思考与练习 64
第3章 HTML 5中的表单应用 66
3.1 认识和创建HTML表单 66
3.1.1 认识HTML表单 66
3.1.2 input元素的基本类型 67
3.1.3 其他输入元素 70
3.2 新增的表单元素 70
3.2.1 datalist元素 71
3.2.2 output元素 72
3.2.3 keygen元素 73
3.2.4 optgroup元素 74
3.3 新增的表单类型 76
3.3.1 email类型 76
3.3.2 url类型 78
3.3.3 number类型 78
3.3.4 range类型 79
3.3.5 tel类型 80
3.3.6 color类型 81
3.3.7 search类型 82
3.3.8 日期和时间类型 82
3.4 新增的表单属性 86
3.4.1 form属性 86
3.4.2 表单重写属性 88
3.4.3 placeholder属性 89
3.4.4 required属性 90
3.4.5 pattern属性 91
3.4.6 autocomplete属性 92
3.4.7 autofocus属性 93
3.5 表单验证 93
3.5.1 自动验证 93
3.5.2 显式验证 94
3.5.3 自定义验证 96
3.5.4 验证事件 97
3.5.5 取消验证 98
3.6 实验指导3-1：会员资料注册 99
思考与练习 102
第4章 HTML 5中的文件应用 103
4.1 选择文件 103
4.1.1 选择单个文件 103
4.1.2 选择多个文件 105
4.1.3 限制选择文件类型 107
4.2 实验指导4-1：将文件上传到服务器端 109
4.3 读取文件 111
4.3.1 认识FileReader接口 112
4.3.2 读取二进制文件 115
4.3.3 显示预览图像 116
4.3.4 读取文本文件 118
4.4 错误处理方案 120
4.4.1 产生错误的原因 120
4.4.2 FileError接口 121
4.4.3 错误处理练习 121
4.5 文件拖放API和常用对象 123
4.5.1 拖放API 123
4.5.2 认识DataTransfer对象 125
4.5.3 DataTransfer对象的方法 126
4.5.4 DataTransfer对象的属性 127
4.6 实验指导4-2：拖动文字到网页的指定区域 129
4.7 实验指导4-3：拖放实现带进度条的文件上传 130
思考与练习 138
第5章 HTML 5中的多媒体元素 140
5.1 HTML 5多媒体概述 140
5.1.1 HTML 4中的多媒体应用 140
5.1.2 HTML 5中的多媒体 141
5.2 多媒体元素的属性 144
5.2.1 audio和video的共同属性 144
5.2.2 audio元素显示音频文件 146
5.2.3 video元素显示视频文件 149
5.3 向多媒体元素中添加source元素 152
5.3.1 认识source元素 152
5.3.2 source元素常用的支持格式 152
5.3.3 多媒体元素添加source元素 153
5.3.4 视频文件添加source元素 154
5.4 多媒体元素的方法 155
5.5 多媒体元素的事件 157
5.5.1 audio和video的共同事件 157
5.5.2 video元素添加事件 159
5.6 认识embed元素 162
5.7 实验指导5-1：制作绚丽的音乐播放器 164
思考与练习 172
第6章 数据存储 174
6.1 认识Web Storage 174
6.1.1 Web Storage介绍 174
6.1.2 Web Storage的优缺点 175
6.2 localStorage对象 175
6.2.1 判断浏览器是否支持 176
6.2.2 localStorage的常用方法 176
6.2.3 统计访问人数 177
6.2.4 及时更新访问人数 179
6.3 sessionStorage对象 182
6.3.1 与localStorage对象的不同 182
6.3.2 判断浏览器是否支持 183
6.3.3 方法和事件 183
6.4 JSON对象操作数据 185
6.5 认识Web SQL 191
6.5.1 Web SQL介绍 191
6.5.2 Web SQL API操作 191
6.5.3 数据的简单操作 193
6.6 实验指导6-1：基于Web SQL的留言簿 196
思考与练习 202
第7章 Canvas API动态绘图 204
7.1 认识canvas元素 204
7.1.1 canvas基础知识 204
7.1.2 canvas API的基本使用 206
7.1.3 与SVG的简单区别 208
7.2 通过路径绘图 209
7.2.1 基本方法 209
7.2.2 绘制直线 210
7.2.3 绘制圆形 212
7.2.4 绘制三角形 215
7.3 实验指导7-1：绘制复杂图形 215
7.4 贝塞尔曲线 217
7.4.1 二次方曲线 217
7.4.2 三次方曲线 219
7.5 绘制渐变图形 221
7.5.1 了解渐变 221
7.5.2 线性渐变 221
7.5.3 径向渐变 224
7.6 高级绘图操作 225
7.6.1 绘图状态 225
7.6.2 坐标变换 226
7.6.3 矩阵变换 233
7.6.4 合成图形 235
7.7 实验指导7-2：实现时钟的动画效果 237
7.8 图像操作 240
7.8.1 创建图像 240
7.8.2 绘制图像 241
7.8.3 缩放图像 242
7.8.4 裁剪图像 244
7.8.5 输出图像 245
7.9 文字和阴影效果 246
7.9.1 绘制文字 247
7.9.2 阴影特效 247
思考与练习 248
第8章 离线缓存 250
8.1 离线应用程序概述 250
8.1.1 认识离线应用程序 250
8.1.2 离线缓存与浏览器缓存 251
8.1.3 创建离线缓存应用 252
8.2 Cache Manifest文件 255
8.2.1 认识Cache Manifest文件 255
8.2.2 Cache Manifest的组成 255
8.2.3 向manifest文件添加注释 257
8.2.4 Cache Mainifest的遵循原则 258
8.2.5 配置ⅡS服务器 258
8.3 离线访问系统当前时间 260
8.4 浏览器与服务器的交互过程 263
8.4.1 首次载入页面 263
8.4.2 再次载入页面 263
8.5 离线存储对象：applicationCache 264
8.5.1 认识applicationCache 264
8.5.2 检测本地缓存状态 265
8.5.3 检测在线状态 266
8.5.4 本地缓存更新 269
8.5.5 事件执行顺序 270
8.6 实验指导8-1：制作离线使用的日程备忘录 273
思考与练习 277
第9章 通信API和地理位置获取 279
9.1 跨文档消息传输 279
9.1.1 Message API概述 279
9.1.2 跨域获取传递消息 280
9.2 Web Sockets通信 283
9.2.1 Web Sockets API概述 284
9.2.2 使用Web Sockets API 284
9.2.3 向.NET端发送数据 286
9.3 Web Workers线程 290
9.3.1 线程概述 290
9.3.2 Worker对象 291
9.3.3 计算数字结果 293
9.3.4 线程嵌套处理 297
9.4 Geolocatin API概述 299
9.4.1 getCurrentPosition()方法 300
9.4.2 watchCurrentPosition()方法 301
9.4.3 clearWatch()方法 302
9.5 Position对象显示当前位置 302
9.6 实验指导9-1：Google地图锁定当前位置 305
思考与练习 308
第10章 CSS 3和新增颜色及文本样式 310
10.1 了解CSS 3 310
10.1.1 什么是CSS 3 310
10.1.2 CSS 3的支持情况 311
10.1.3 CSS 3的新增特性 312
10.2 新增颜色 316
10.2.1 RGBA 316
10.2.2 HSL 318
10.2.3 HSLA 320
10.2.4 opaticy 321
10.3 文本样式 322
10.3.1 text-overflow属性 322
10.3.2 text-shadow属性 326
10.3.3 word-wrap属性 329
10.4 字体样式规则：@font-face 331
10.4.1 语法规则 331
10.4.2 基本练习 332
10.4.3 字体与字体样式 334
10.4.4 注意事项 336
10.5 实验指导10-1：定义文章的标题和内容样式 336
思考与练习 339
第11章 CSS 3中的新增选择器 340
11.1 属性选择器 340
11.1.1 E[att^＝"val"]选择器 340
11.1.2 E[att$="val"]选择器 342
11.1.3 E[att＊="val"]选择器 343
11.2 结构化伪类选择器 345
11.2.1 E:root选择器 345
11.2.2 E:nth-child（n）选择器 347
11.2.3 E:nth-last-child（n）选择器 348
11.2.4 E:nth-of-type（n）和E:nth-last-of-type（n）选择器 351
11.2.5 E:last-child选择器 354
11.2.6 E:first-of-type和E:last-of-type选择器 355
11.2.7 E:only-child选择器 357
11.2.8 E:only-of-type选择器 357
11.2.9 E:empty选择器 358
11.3 UI元素状态伪类选择器 360
11.3.1 E:enabled选择器 360
11.3.2 E:disabled选择器 362
11.3.3 E:checked选择器 363
11.3.4 E::selection选择器 364
11.4 其他新增选择器 366
11.4.1 否定伪类选择器：E:not（s） 366
11.4.2 目标伪类选择器：E:target 367
11.4.3 通用兄弟元素选择器：E～F 368
11.5 新增内容属性：content 370
11.5.1 基本语法 370
11.5.2 插入图像 371
11.5.3 插入项目编码 372
11.5.4 插入嵌套符号 374
11.5.5 编号嵌套 375
11.6 实验指导11-1：结构化的数据表格设计 376
思考与练习 379
第12章 弹性盒模型与样式布局 381
12.1 新增的盒模型属性 381
12.1.1 box-orient属性 381
12.1.2 box-direction属性 384
12.1.3 box-ordinal-group属性 385
12.1.4 box-flex属性 387
12.1.5 box-flex-group属性 389
12.1.6 box-pack属性 390
12.1.7 box-align属性 392
12.1.8 box-lines属性 393
12.2 多列类布局属性 394
12.2.1 columns属性 394
12.2.2 column-width属性 396
12.2.3 column-count属性 397
12.2.4 column-gap属性 397
12.2.5 column-rule属性 399
12.2.6 column-span属性 400
12.2.7 column-fill属性 401
12.2.8 分列打印属性 401
12.3 用户界面布局 402
12.3.1 box-sizing属性 402
12.3.2 resize属性 404
12.3.3 zoom属性 406
12.3.4 outline-offset属性 407
12.3.5 nav-index属性 408
12.3.6 定义方向键控制顺序 410
12.4 实验指导12-1：简单设计博客网页 411
思考与练习 413
第13章 边框、背景和渐变 415
13.1 边框设计 415
13.1.1 border-radius属性 415
13.1.2 border-image属性 417
13.1.3 box-shadow属性 421
13.1.4 border-colors属性 423
13.2 背景样式 424
13.2.1 变更属性 424
13.2.2 background-origin属性 427
13.2.3 background-clip属性 428
13.2.4 background-size属性 430
13.3 渐变特效 431
13.3.1 WebKit引擎实现渐变 431
13.3.2 Gecko引擎实现渐变 433
13.3.3 重复渐变 435
13.4 实验指导13-1：制作下拉导航菜单 436
思考与练习 439
第14章 HTML 5+CSS 3制作旅游网页 440
14.1 旅游网站分析 440
14.1.1 产生背景 440
14.1.2 发展趋势 441
14.1.3 基本结构 441
14.2 设计首页 442
14.2.1 网页效果 442
14.2.2 添加头部 443
14.2.3 添加底部 446
14.2.4 添加内容 446
14.3 设计关于我们网页 448
14.3.1 网页效果 448
14.3.2 关于我们 448
14.3.3 最新公告 449
14.4 设计国内旅游网页 450
14.4.1 网页效果 450
14.4.2 国内旅游 451
14.4.3 其他内容 451
14.5 设计出境旅游网页 452
14.6 设计留言咨询网页 453
14.6.1 网页效果 453
14.6.2 清空留言 453
14.6.3 提交留言 454
14.6.4 查看位置 455
附录 思考与练习答案 459