第 1部分　HTML5及其应用

第 1章　HTML5概述　2
1.1　HTML5简介　2
1.1.1　HTML　2
1.1.2　HTML5　3
1.2　HTML5与HTML4的区别　4
1.2.1　HTML5文档结构的变化　4
1.2.2　HTML5语法的变化　5
1.2.3　HTML5增加和删除的元素　6
1.2.4　HTML5的全局属性　8
1.3　HTML5的特性　10
1.4　HTML5的开发环境　11
1.4.1　HTML5的开发工具简介　11
1.4.2　WebStorm集成开发环境　12
1.4.3　使用XAMPP搭建服务器环境　13
1.4.4　支持HTML5的浏览器和帮助文档　15
思考与练习　16
第 2章　HTML5的文档结构元素　17
2.1　HTML的元素和属性　17
2.2　HTML文档的基本结构元素　19
2.3　HTML5新增的结构元素　20
2.3.1　用DIV描述的网页布局　20
2.3.2　HTML5增加的结构元素　21
思考与练习　29
第3章　HTML5的基本页面元素　30
3.1　文本元素　30
3.1.1　段落标记<p>和换行标记<br/>　30
3.1.2　标题标记<hn>　31
3.1.3　块标记<div>和<span>　32
3.2　列表元素　32
3.2.1　有序列表标记<ol>　33
3.2.2　无序列表标记<ul>　34
3.2.3　自定义列表<dl>　35
3.3　超链接元素　36
3.3.1　超链接属性　36
3.3.2　超链接类型　37
3.3.3　超链接路径　38
3.4　图像元素和多媒体元素　40
3.4.1　图像标记<img>　40
3.4.2　多媒体文件标记<embed>　43
3.5　表格元素　45
3.5.1　HTML的表格标记　46
3.5.2　HTML表格的属性　47
3.5.3　表格嵌套　49
3.6　内嵌框架　52
3.7　页面基本元素的应用　54
3.7.1　多层嵌套列表示例　54
3.7.2　旅游网站首页示例　55
3.7.3　内嵌框架示例　57
思考与练习　60
第4章　HTML5的表单元素　61
4.1　表单定义元素form　61
4.2　HTML表单输入元素及属性　62
4.2.1　表单输入元素input　62
4.2.2　列表框元素select　65
4.2.3　文本域输入元素textarea　66
4.3　HTML5新增的表单元素和属性　67
4.3.1　HTML5新增input类型　67
4.3.2　HTML5表单新增属性　70
4.4　一个会员注册表单　73
思考与练习　77
第5章　HTML5的Video元素和Audio
元素　78
5.1　HTML5的Video元素　78
5.1.1　使用video标记插入视频　79
5.1.2　video元素的访问控制　80
5.2　HTML5的Audio元素　84
5.2.1　使用audio标记插入音频　84
5.2.2　audio元素的访问控制　86
5.3　使用track元素添加字幕　86
5.3.1　使用track标记插入字幕文件　86
5.3.2　建立WebVTT文件　88
思考与练习　90
第6章　HTML5的canvas绘图　91
6.1　canvas概述　91
6.1.1　创建canvas元素　92
6.1.2　canvas绘图的步骤　93
6.2　绘制矩形　93
6.2.1　绘制矩形的方法　94
6.2.2　绘图时的颜色与透明度属性　95
6.3　使用路径绘制图形　97
6.3.1　绘制圆形　97
6.3.2　绘制直线　99
6.3.3　绘制曲线　102
6.4　绘制颜色渐变的图形　104
6.4.1　绘制线性渐变　104
6.4.2　绘制径向渐变　105
6.5　使用坐标变换和矩阵变换绘图　107
6.5.1　canvas的坐标系统　107
6.5.2　坐标变换　107
6.5.3　使用路径绘制图形的坐标变换　109
6.5.4　矩阵变换　110
6.6　在canvas中使用图像　112
6.6.1　绘制图像　113
6.6.2　图像平铺　114
6.6.3　图像裁剪　116
6.7　绘制文字　117
6.8　使用canvas绘制动画　118
6.8.1　绘制动画的步骤　118
6.8.2　绘制动画的示例　119
思考与练习　123
第7章　HTML5的SVG绘图　125
7.1　SVG概述　125
7.1.1　SVG优缺点　125
7.1.2　SVG调用方式　126
7.2　绘制SVG基本图形　128
7.2.1　绘制矩形和直线　128
7.2.2　绘制圆和椭圆　129
7.2.3　绘制折线和多边形　130
7.2.4　绘制路径　130
7.2.5　绘制文本和图形　131
7.2.6　SVG绘图的属性　133
7.3　变换　134
7.3.1　平移　134
7.3.2　旋转　134
7.3.3　缩放　134
7.3.4　倾斜　134
7.4　组合与重用　135
7.4.1　g元素　135
7.4.2　use元素　136
7.4.3　defs元素　137
7.5　渐变与透明度　138
7.5.1　渐变　138
7.5.2　透明度　143
7.6　滤镜　144
7.6.1　滤镜的定义　144
7.6.2　滤镜的应用　144
思考与练习　147
第8章　获取浏览器的地理位置
信息　148
8.1　地理位置信息概述　148
8.1.1　地理位置信息的内容　148
8.1.2　地理位置信息的来源　149
8.2　地理位置信息使用过程　149
8.3　地理位置API　150
8.3.1　getCurrentPosition()方法　150
8.3.2　watchPosition()方法　151
8.4　获取地理位置信息的应用　151
思考与练习　157
第9章　离线Web应用与Web
存储　158
9.1　离线Web应用　158
9.1.1　离线Web应用概述　158
9.1.2　实现离线Web应用的步骤　159
9.2　离线Web应用的实现　159
9.2.1　manifest文件　160
9.2.2　更新缓存　162
9.2.3　检测在线状态　164
9.3　Web Storage概述　165
9.3.1　Web Storage的概念　165
9.3.2　Web Storage API　166
9.4　Web Storage应用　167
9.4.1　使用localStorage和sessionStorage的
网页计数器　167
9.4.2　使用localStorage保存、读取和
清除数据　168
9.4.3　使用localStorage实现电话簿
管理　169
9.4.4　使用JSON对象改进电话簿的
功能　171
思考与练习　173
第 10章　使用Web Workers处理
　线程　175
10.1　Web Workers概述　175
10.1.1　Web Workers的引入　175
10.1.2　使用Web Workers创建线程　177
10.2　页面与线程的数据交互　179
10.3　使用SharedWorker创建共享
线程　181
思考与练习　186
第 11章　HTML5的IndexedDB
　数据库　187
11.1　IndexedDB数据库概述　187
11.2　创建数据库　188
11.3　数据库的版本更新和事务处理　190
11.3.1　版本更新　191
11.3.2　事务处理　192
11.4　创建对象仓库　193
11.5　创建索引　194
11.6　保存和删除数据　196
11.6.1　保存数据　196
11.6.2　检索数据　198
11.6.3　删除数据　201
11.7　使用游标检索批量数据　202
11.7.1　openCursor()方法及其参数　202
11.7.2　数据遍历　203
思考与练习　206
第 12章　HTML5的文件操作与
　拖放操作　207
12.1　file对象和FileList对象　207
12.1.1　file对象　208
12.1.2　FileList对象　209
12.2　ArrayBuffer对象与ArrayBufferView
对象　210
12.2.1　ArrayBuffer和ArrayBufferView
　概念　210
12.2.2　ArrayBuffer对象　210
12.2.3　ArrayBufferView对象　210
12.2.4　DataView对象　213
12.3　Blob对象　214
12.3.1　使用Blob对象获取文件大小和
　类型　214
12.3.2　通过slice()方法分割文件　216
12.4　FileReader接口　218
12.4.1　FileReader接口的方法　218
12.4.2　FileReader接口的事件　218
12.4.3　FileReader接口的应用　219
12.5　拖放API　222
12.5.1　拖放API简介　223
12.5.2　拖放的实现过程　223
12.6　DataTransfer对象的属性与方法　225
12.6.1　DataTransfer对象的属性及拖放
　视觉效果　225
12.6.2　DataTransfer对象的方法　226
12.7　拖放的应用　228
12.7.1　拖动网页元素　228
12.7.2　拖动上传图片　230
思考与练习　231

第 2部分　CSS3及其应用

第 13章　CSS3的选择器　234
13.1　CSS3概述　234
13.1.1　CSS3简介　234
13.1.2　CSS的一个示例　235
13.2　CSS的基本选择器　238
13.2.1　标记选择器　239
13.2.2　类选择器　239
13.2.3　ID选择器　241
13.3　在HTML中使用CSS的方法　242
13.3.1　行内样式　242
13.3.2　嵌入样式　243
13.3.3　链接样式　243
13.3.4　导入样式　245
13.3.5　样式的优先级　246
13.4　CSS复合选择器　248
13.4.1　交集选择器　248
13.4.2　并集选择器　249
13.4.3　后代选择器　250
13.4.4　子选择器　252
13.4.5　相邻选择器　253
13.5　CSS3新增的选择器　254
13.5.1　属性选择器　254
13.5.2　伪类选择器　256
13.5.3　伪元素选择器　261
13.6　使用CSS设计网站页面　263
思考与练习　267
第 14章　使用CSS3设置元素
　样式　269
14.1　用CSS3设置文本样式　269
14.1.1　字体属性　269
14.1.2　文本属性　272
14.2　用CSS3设置颜色与背景　277
14.2.1　颜色设置　278
14.2.2　背景设置　278
14.2.3　圆角边框和图像边框　280
14.3　用CSS3设置图像效果　282
14.3.1　为图片添加边框　283
14.3.2　图片缩放　285
14.3.3　图文混排　286
14.4　用CSS3美化表单的应用　288
思考与练习　290
第 15章　CSS3的盒模型及网页
　布局　292
15.1　CSS盒模型　292
15.1.1　盒模型的组成　293
15.1.2　盒的类型　298
15.1.3　CSS3新增的与盒相关的
　属性　299
15.2　CSS布局常用属性　304
15.2.1　定位属性　304
15.2.2　浮动属性　309
15.3　CSS的网页布局　311
15.3.1　单列布局　311
15.3.2　两列布局　312
15.3.3　使用CSS3盒布局的三列
　布局　316
15.4　DIV+CSS布局的应用　319
15.4.1　图文混排的实现　320
15.4.2　制作二级导航菜单　324
思考与练习　329



第3部分　综合案例

第 16章　综合案例　332
16.1　使用HTML 5结构元素组织网页　332
16.1.1　网页结构描述　332
16.1.2　用CSS 3定义网站全局样式　334
16.2　页头部分的设计　335
16.2.1　页头的结构描述　335
16.2.2　页头元素及CSS样式代码分析　336
16.3　侧边导航和焦点图的设计　338
16.3.1　侧边导航和焦点图板块的
　内容　338
16.3.2　侧边导航和焦点图板块的代码
　分析　339
16.4　快速搜索、滑动Tab和在线咨询板块
设计　344
16.4.1　快速搜索、滑动Tab和在线咨询
　板块的内容　344
16.4.2　快速搜索板块的代码分析　344
16.4.3　滑动Tab板块的代码分析　346
16.4.4　在线咨询板块的代码分析　349
16.5　特色线路板块的设计　350
16.5.1　特色线路板块的内容　350
16.5.2　特色线路板块的代码分析　351
16.6　页脚的设计　354
16.6.1　页脚的结构描述　354
16.6.2　页脚的代码分析　355
思考与练习　357
附录　HTML标记列表　359
参考文献　362