HTML 5+CSS 3网页设计经典范例

01HTML5概述1
1.1HTML5介绍1
1.2HTML5的发展历程2
1.3认识HTML53
1.3.1兼容性3
1.3.2用户优先和效率3
1.3.3化繁为简4
1.3.4通用访问4
1.4HTML5的新增功能5
1.4.1字符集和DOCTYPE的改进5
1.4.2新元素5
1.4.3标准改进6
1.4.4使用SelectorsAPI简化选取操作6
1.4.5window.JSON8
1.5使用HTML5的优势9
1.6HTML5的未来发展9
1.6.1InternetExplorer89
1.6.2众多全新浏览器的支持9
1.7本章小结10
02HTML5与HTML4的区别11
2.1语法上的差异11
2.1.1HTML5的语法变化11
2.1.2HTML5中的标记方法12
2.1.3HTML5与旧版本的兼容性12
2.2元素上的差异13
2.2.1HTML5中新增加的元素13
2.2.2HTML5中废除的元素19
2.3属性上的差异19
2.3.1HTML5中新增加的属性元素19
2.3.2HTML5中废除的属性20
2.3.3全局属性20
2.4本章小结22
03HTML5的结构23
3.1新的主体结构元素23
3.1.1article元素23
3.1.2section元素24
3.1.3nav元素25
3.1.4aside元素27
3.1.5time元素与微格式28
3.1.6pubdate属性29
3.2新的非主体结构元素30
3.2.1header元素30
3.2.2hgroup元素30
3.2.3footer元素31
3.2.4address元素32
3.3HTML5的结构阐述32
3.3.1HTML5大纲33
3.3.2对新的结构元素使用样式35
3.4本章小结36
04绘图功能的实现37
4.1canvasAPI概述37
4.1.1canvas是什么37
4.1.2canvas的历史38
4.1.3canvas坐标38
4.1.4什么情况下不使用canvas39
4.1.5替代内容39
4.1.6CSS和canvas39
4.1.7浏览器对canvas的支持39
4.1.8canvas的核心Context40
4.2如何使用canvasAPI40
4.2.1检测浏览器是否支持40
4.2.2在页面中加入canvas41
4.2.3上机操作——绘制矩形41
4.3应用canvasAPI绘制曲线路径45
4.3.1路径45
4.3.2上机操作——描边样式46
4.3.3上机操作——对矩形填充样式47
4.3.4上机操作——绘制曲线48
4.4应用canvasAPI绘制图像49
4.4.1上机操作——在canvas中插入图像49
4.4.2上机操作——绘制渐变图像50
4.4.3上机操作——缩放canvas对象52
4.4.4上机操作——canvas变换53
4.5canvas文本应用55
4.5.1上机操作——canvas文本绘制55
4.5.2上机操作——应用阴影56
4.5.3上机操作——像素数据57
4.6实例精讲——动态时钟58
4.7本章小结62
05网络上的视频和音频应用63
5.1HTML5中audio和video概述63
5.1.1视频容器63
5.1.2音频和视频编解码器65
5.1.3HTML5音视频的问题67
5.1.4哪些浏览器支持Audio和Video元素67
5.1.5HTML5音视频支持格式68
5.2HTML5中audio和video元素的应用69
5.2.1检测浏览器是否支持69
5.2.2audio元素70
5.2.3上机操作——使用audio元素72
5.2.4video元素72
5.2.5上机操作——使用video元素74
5.3实例精讲——在HTML4中实现音频和视频的播放75
5.4实例精讲——在HTML5中实现音频和视频的播放78
5.5本章小结82
06表单的应用83
6.1HTML5Forms概述83
6.1.1Forms和XForms83
6.1.2HTML5Forms的新特性84
6.1.3浏览器对HTML5Forms的支持情况84
6.1.4输入型控件86
6.2表单新特性与函数86
6.2.1新增属性87
6.2.2大幅度地增加与改良input元素的种类90
6.2.3上机操作——对新的表单元素使用样式93
6.2.4上机操作——追加output元素95
6.3验证表单95
6.3.1验证状态对象95
6.3.2上机操作——自动验证96
6.3.3上机操作——显示验证97
6.3.4取消验证98
6.3.5上机操作——自定义错误信息98
6.4实例精讲——HTML5中的Forms应用99
6.5本章小结102
07全新的文件应用103
7.1新增的页面元素103
7.1.1上机操作——figure元素Forms103
7.1.2上机操作——figcaption元素Forms104
7.1.3上机操作——details元素Forms104
7.1.4上机操作——mark元素Forms105
7.1.5上机操作——progress元素Forms105
7.1.6上机操作——meter元素Forms106
7.1.7上机操作——menu元素Forms107
7.1.8上机操作——command元素Forms108
7.2增强的页面元素109
7.2.1上机操作——ol列表109
7.2.2上机操作——dl列表111
7.2.3上机操作——cite元素111
7.2.4上机操作——small元素112
7.3文件API112
7.3.1filelist对象与file对象112
7.3.2blob对象113
7.3.3FileReader接口113
7.4拖放API115
7.4.1实现拖放API的过程115
7.4.2dataTransfer对象的属性与方法116
7.4.3上机操作——设置拖放时的
视觉效果116
7.4.4上机操作——自定义拖放图标118
7.5实例精讲——在HTML5中实现文件拖放120
7.6本章小结123
08地理位置信息处理125
8.1关于地理位置信息125
8.1.1经度和纬度坐标125
8.1.2IP地址定位数据126
8.1.3GPS地理定位数据126
8.1.4Wi—Fi地理定位数据126
8.1.5手机地理定位数据126
8.1.6用户自定义的地理定位127
8.2浏览器对Geolocation的支持127
8.2.1GeolocationAPI概述127
8.2.2HTML5Geolocation的浏览器支持情况130
8.3隐私的处理131
8.3.1应用隐私保护机制131
8.3.2处理位置信息132
8.4使用GeolocationAPI132
8.4.1检测浏览器是否支持132
8.4.2位置请求133
8.5实例精讲——在网页中使用电子地图135
8.6本章小结136
09Web本地存储应用137
9.1WebStorage概述137
9.1.1WebStorage介绍137
9.1.2上机操作——简易的Web留言本138
9.1.3上机操作——简单的数据库应用142
9.2WebStorage的浏览器支持情况145
9.3使用WebStorageAPI145
9.3.1检测浏览器的支持情况145
9.3.2上机操作——设置和获取数据147
9.3.3封堵数据泄露148
9.3.4localStorage与sessionStorage148
9.3.5探索WebStorage148
9.4本地数据库149
9.4.1什么是本地数据库149
9.4.2用executesql来执行查询的实现方法150
9.4.3上机操作——使用数据库实现网页留言150
9.4.4transaction方法155
9.5本章小结156
10离线Web应用157
10.1离线Web概述157
10.1.1离线Web介绍157
10.1.2离线Web应用的浏览器支持情况158
10.2使用离线Web158
10.2.1构建简单的离线应用程序158
10.2.2支持离线行为159
10.2.3mannifest文件介绍159
10.2.4上机操作——applicationCache对象161
10.3实例精讲——HTML5中离线Web的具体应用166
10.4本章小结172
11WebWorkersAPI应用173
11.1WebWorkers概述173
11.1.1WebWorkers介绍173
11.1.2上机操作——WebWorkers的简单应用174
11.2使用WebWorkersAPI176
11.2.1上机操作——检测浏览器是否支持176
11.2.2创建WebWorkers177
11.2.3多线程文件的加载与执行177
11.2.4上机操作——与WebWorkers通信178
11.3WebWorkers线程应用179
11.3.1上机操作——与线程进行数据的交互180
11.3.2上机操作——线程嵌套182
11.3.3上机操作——在多个子线程中进行数据交互185
11.4实例精讲——HTML5中的WebWorkers应用189
11.5本章小结194
12应用WebSocketsAPI通信195
12.1WebSockets概述195
12.1.1WebSockets介绍195
12.1.2实时通信与HTTP请求195
12.1.3WebSockets工作原理196
12.1.4WebSockets的浏览器支持情况197
12.2上机操作——编写简单的EchoWebSocket服务器198
12.3WebSockets通信202
12.3.1WebSockets通信的基本知识202
12.3.2上机操作——使用WebSocketsAPI203
12.4实例精讲——HTML5中的WebSockets应用程序205
12.5本章小结208
13CSS样式入门209
13.1CSS概述209
13.1.1CSS的概念209
13.1.2CSS的特点210
13.1.3CSS选择器分类210
13.2CSS选择器类型211
13.2.1CSS选择器分类211
13.2.2通用选择器212
13.2.3多元素的组合选择器213
13.2.4属性选择器214
13.2.5伪元素和伪类选择器218
13.3CSS的继承特性238
13.3.1继承关系238
13.3.2CSS继承的局限性238
13.4样式表的类型239
13.4.1内联样式表239
13.4.2嵌入样式表239
13.4.3外部样式表240
13.4.4导入样式表240
13.5本章小结240
14使用CSS控制文字样式241
14.1字体设置241
14.1.1字体样式241
14.1.2字体大小243
14.1.3字体粗细243
14.1.4字体颜色244
14.1.5斜体245
14.1.6字体变体246
14.1.7字符转换247
14.1.8文本修饰247
14.2设置段落样式248
14.2.1设置段落对齐248
14.2.2设置行间距251
14.2.3设置字间距和字母间距252
14.2.4文本缩进253
14.2.5首字下沉254
14.2.6处理空白符255
14.3本章小结256
15使用CSS设置背景257
15.1设置背景257
15.1.1设置背景颜色257
15.1.2设置背景图片258
15.1.3设置背景图片重复259
15.1.4设置图片的位置260
15.1.5设置背景滚动模式261
15.1.6设置背景定位264
15.1.7设置背景裁剪265
15.1.8设置背景图像的大小267
15.2设置图片样式269
15.2.1设置图片边框269
15.2.2设置图片缩放271
15.3设置其他边框样式272
15.3.1border—radius属性272
15.3.2border—image属性273
15.4本章小结274
16使用CSS控制列表275
16.1列表控制简述275
16.1.1列表的控制原则275
16.1.2列表符号类型276
16.2列表相关属性279
16.2.1设置列表类型279
16.2.2设置列表项图像281
16.2.3设置列表符号位置282
16.2.4列表综合属性283
16.3本章小结283
17CSS盒模型285
17.1盒模型的概念285
17.1.1什么是盒模型285
17.1.2设置外边距的大小286
17.1.3设置边框287
17.1.4设置内边距的大小289
17.1.5外边距合并290
17.2盒的浮动292
17.2.1元素的浮动属性292
17.2.2清除浮动属性293
17.3盒的定位294
17.3.1静态定位294
17.3.2相对定位295
17.3.3绝对定位296
17.3.4固定定位298
17.3.5z—index空间位置299
17.4本章小结300
18Div+CSS布局方法301
18.1Div概述301
18.1.1什么是Div301
18.1.2插入Div302
18.2CSS布局方式304
18.2.1两列布局304
18.2.2三列布局307
18.2.3多列布局308
18.3使用Div+CSS布局网页311
18.3.1网页布局页面分析311
18.3.2制作网页312
18.4本章小结319