HTML5+CSS3 Web前端开发技术 第2版 刘德山,章增安,林彬 编 大中专 文轩网

第1部分HTML5及其应用
第1章HTML5概述2
1．1HTML5简介2
1．1．1HTML2
1．1．2HTML53
1．2HTML5与HTML4的区别4
1．2．1HTML5文档结构的变化4
1．2．2HTML5语法的变化5
1．2．3HTML5增加和删除的元素6
1．2．4HTML5的全局属性8
1．3HTML5的特性10
1．4HTML5的开发环境11
1．4．1HTML5的开发工具简介11
1．4．2WebStorm集成开发环境12
1．4．3使用XAMPP搭建服务器环境13
1．4．4支持HTML5的浏览器和帮助文档15
思考与练习16
第2章HTML5的文档结构元素17
2．1HTML的元素和属性17
2．2HTML文档的基本结构元素19
2．3HTML5新增的结构元素20
2．3．1用DIV描述的网页布局20
2．3．2HTML5增加的结构元素21
思考与练习28
第3章HTML5的基本页面元素29
3．1文本元素29
3．1．1段落标记和换行标记29
3．1．2标题标记30
3．1．3块标记和31
3．2列表元素31
3．2．1有序列表标记32
3．2．2无序列表标记33
3．2．3自定义列表34
3．3超链接元素35
3．3．1超链接属性35
3．3．2超链接类型36
3．3．3超链接路径37
3．4图像元素和多媒体元素39
3．4．1图像标记39
3．4．2多媒体文件标记42
3．5表格元素44
3．5．1HTML的表格标记44
3．5．2HTML表格的属性46
3．5．3表格嵌套48
3．6内嵌框架50
3．7页面基本元素的应用53
3．7．1多层嵌套列表示例53
3．7．2旅游网站首页示例54
3．7．3内嵌框架示例56
思考与练习58
第4章HTML5的表单元素60
4．1表单定义元素form60
4．2HTML表单输入元素及属性61
4．2．1表单输入元素input61
4．2．2列表框元素select64
4．2．3文本域输入元素textarea65
4．3HTML5新增的表单元素和属性66
4．3．1HTML5新增input类型66
4．3．2HTML5表单新增属性69
4．4一个会员注册表单72
思考与练习75
第5章HTML5的video元素和audio元素77
5．1HTML5的video元素77
5．1．1使用video标记插入视频77
5．1．2video元素的访问控制79
5．2HTML5的audio元素83
5．2．1使用audio标记插入音频83
5．2．2audio元素的访问控制84
5．3使用track元素添加字幕85
5．3．1使用track标记插入字幕文件85
5．3．2建立WebVTT文件86
思考与练习89
第6章HTML5的canvas绘图90
6．1canvas概述90
6．1．1创建canvas元素90
6．1．2canvas绘图的步骤91
6．2绘制矩形92
6．2．1绘制矩形的方法92
6．2．2绘图时的颜色与透明度属性93
6．3使用路径绘制图形96
6．3．1绘制圆形96
6．3．2绘制直线98
6．3．3绘制曲线101
6．4绘制颜色渐变的图形102
6．4．1绘制线性渐变102
6．4．2绘制径向渐变104
6．5使用坐标变换和矩阵变换绘图105
6．5．1canvas的坐标系统105
6．5．2坐标变换105
6．5．3使用路径绘制图形的坐标变换106
6．5．4矩阵变换107
6．6在canvas中使用图像110
6．6．1绘制图像110
6．6．2图像平铺112
6．6．3图像裁剪113
6．7绘制文字115
6．8使用canvas绘制动画116
6．8．1绘制动画的步骤116
6．8．2绘制动画的示例116
思考与练习121
第7章HTML5的SVG绘图123
7．1SVG概述123
7．1．1SVG优缺点123
7．1．2SVG调用方式124
7．2绘制SVG基本图形126
7．2．1绘制矩形和直线126
7．2．2绘制圆和椭圆127
7．2．3绘制折线和多边形127
7．2．4绘制路径128
7．2．5绘制文本和图形128
7．2．6SVG绘图的属性130
7．3变换132
7．3．1平移132
7．3．2旋转132
7．3．3缩放132
7．3．4倾斜132
7．4组合与重用133
7．4．1g元素133
7．4．2use元素134
7．4．3defs元素135
7．5渐变与透明度136
7．5．1渐变136
7．5．2透明度141
7．6滤镜142
7．6．1滤镜的定义142
7．6．2滤镜的应用143
思考与练习145
第8章获取浏览器的地理位置信息147
8．1地理位置信息概述147
8．1．1地理位置信息的内容147
8．1．2地理位置信息的来源148
8．2地理位置信息使用过程148
8．3地理位置API149
8．3．1getCurrentPosition()方法149
8．3．2watchPosition()方法150
8．4获取地理位置信息的应用150
思考与练习156
第9章离线Web应用与Web存储158
9．1离线Web应用158
9．1．1离线Web应用概述158
9．1．2实现离线Web应用的步骤159
9．2离线Web应用的实现159
9．2．1manifest文件160
9．2．2更新缓存163
9．2．3检测在线状态164
9．3WebStorage概述165
9．3．1WebStorage的概念165
9．3．2WebStorageAPI166
9．4WebStorage应用167
9．4．1使用localStorage和sessionStorage的网页计数器167
9．4．2使用localStorage保存、读取和清除数据168
9．4．3使用localStorage实现电话簿管理169
9．4．4使用JSON对象改进电话簿的功能171
思考与练习174
第10章使用WebWorkers处理线程175
10．1WebWorkers概述175
10．1．1WebWorkers的引入175
10．1．2使用WebWorkers创建线程177
10．2页面与线程的数据交互179
10．3使用SharedWorker创建共享线程181
思考与练习186
第11章HTML5的IndexedDB数据库187
11．1IndexedDB数据库概述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．1openCursor()方法及其参数202
11．7．2数据遍历203
思考与练习206
第12章HTML5的文件操作与拖放操作207
12．1file对象和FileList对象207
12．1．1file对象207
12．1．2FileList对象208
12．2ArrayBuffer对象与ArrayBufferView对象209
12．2．1ArrayBuffer和ArrayBufferView概念209
12．2．2ArrayBuffer对象210
12．2．3ArrayBufferView对象210
12．2．4DataView对象212
12．3Blob对象213
12．3．1使用Blob对象获取文件大小和类型213
12．3．2通过slice()方法分割文件216
12．4FileReader接口217
12．4．1FileReader接口的方法217
12．4．2FileReader接口的事件218
12．4．3FileReader接口的应用218
12．5拖放API221
12．5．1拖放API简介222
12．5．2拖放的实现过程222
12．6DataTransfer对象的属性与方法224
12．6．1DataTransfer对象的属性及拖放视觉效果224
12．6．2DataTransfer对象的方法225
12．7拖放的应用227
12．7．1拖动网页元素227
12．7．2拖动上传图片229
思考与练习231
第2部分CSS3及其应用
第13章CSS3的选择器233
13．1CSS3概述233
13．1．1CSS3简介233
13．1．2CSS的一个示例234
13．2CSS的基本选择器237
13．2．1标记选择器238
13．2．2类选择器238
13．2．3ID选择器239
13．3在HTML中使用CSS的方法241
13．3．1行内样式241
13．3．2嵌入样式241
13．3．3链接样式242
13．3．4导入样式243
13．3．5样式的优先级244
13．4CSS复合选择器247
13．4．1交集选择器247
13．4．2并集选择器248
13．4．3后代选择器249
13．4．4子选择器251
13．4．5相邻选择器251
13．5CSS3新增的选择器252
13．5．1属性选择器253
13．5．2伪类选择器254
13．5．3伪元素选择器259
13．6使用CSS设计网站页面261
思考与练习266
第14章使用CSS3设置元素样式267
14．1用CSS3设置文本样式267
14．1．1字体属性267
14．1．2文本属性270
14．2用CSS3设置颜色与背景275
14．2．1颜色设置275
14．2．2背景设置276
14．2．3圆角边框和图像边框278
14．3用CSS3设置图像效果280
14．3．1为图片添加边框280
14．3．2图片缩放282
14．3．3图文混排284
14．4用CSS3美化页面的应用286
14．4．1用CSS样式美化表单286
14．4．2设置图形项目符号288
思考与练习289
第15章CSS3的盒模型及网页布局291
15．1CSS盒模型291
15．1．1盒模型的组成291
15．1．2盒的类型296
15．1．3CSS3新增的与盒相关的属性298
15．2CSS布局常用属性303
15．2．1定位属性303
15．2．2浮动属性307
15．3CSS的网页布局309
15．3．1单列布局309
15．3．2两列布局311
15．3．3使用CSS3盒布局的三列布局315
15．4DIV+CSS布局的应用318
15．4．1图文混排的实现318
15．4．2制作二级导航菜单322
思考与练习328
第16章CSS3的响应式布局329
16．1响应式布局简介329
16．1．1媒体查询模块329
16．1．2MediaQueries的应用示例332
16．2使用Bootstrap实现响应式布局336
16．2．1Bootstrap框架简介336
16．2．2Bootstrap框架中的各种元素338
16．2．3应用Bootstrap框架构建的网页343
思考与练习347
第3部分综合案例
第17章综合案例1——在线旅游网站的设计与实现349
17．1使用HTML5结构元素组织网页349
17．1．1网页结构描述349
17．1．2用CSS3定义网站全局样式351
17．2页头部分的设计352
17．2．1页头的结构描述352
17．2．2页头元素及CSS样式代码分析353
17．3侧边导航和焦点图的设计355
17．3．1侧边导航和焦点图板块的内容355
17．3．2侧边导航和焦点图板块的代码分析356
17．4快速搜索、滑动Tab和在线咨询板块设计361
17．4．1快速搜索、滑动Tab和在线咨询板块的内容361
17．4．2快速搜索板块的代码分析361
17．4．3滑动Tab板块的代码分析364
17．4．4在线咨询板块的代码分析366
17．5特色线路板块的设计368
17．5．1特色线路板块的内容368
17．5．2特色线路板块的代码分析369
17．6页脚的设计371
17．6．1页脚的结构描述371
17．6．2页脚的代码分析372
思考与练习374
第18章综合案例2——订单管理网站的设计与实现376
18．1案例功能描述376
18．2用户登录注册模块设计378
18．2．1页面结构代码分析378
18．2．2CSS代码分析379
18．2．3JavaScript代码分析380
18．3订单管理模块设计383
18．3．1页面结构代码分析383
18．3．2CSS代码分析385
18．3．3JavaScript代码分析387
18．4客户管理模块设计393
18．4．1页面结构代码和CSS代码分析394
18．4．2JavaScript代码分析395
思考与练习396
附录HTML标记列表398
参考文献402