HTML5+CSS3 Web前端開(kāi)發(fā)技術(shù)（第2版）

第1部分　HTML5及其應(yīng)用
第1章　HTML5概述　2
1．1　HTML5簡(jiǎn)介　2
1．1．1　HTML　2
1．1．2　HTML5　3
1．2　HTML5與HTML4的區(qū)別　4
1．2．1　HTML5文檔結(jié)構(gòu)的變化　4
1．2．2　HTML5語(yǔ)法的變化　5
1．2．3　HTML5增加和刪除的元素　6
1．2．4　HTML5的全局屬性　8
1．3　HTML5的特性　10
1．4　HTML5的開(kāi)發(fā)環(huán)境　11
1．4．1　HTML5的開(kāi)發(fā)工具簡(jiǎn)介　11
1．4．2　WebStorm集成開(kāi)發(fā)環(huán)境　12
1．4．3　使用XAMPP搭建服務(wù)器環(huán)境　13
1．4．4　支持HTML5的瀏覽器和幫助文檔　15
思考與練習(xí)　16
第2章　HTML5的文檔結(jié)構(gòu)元素　17
2．1　HTML的元素和屬性　17
2．2　HTML文檔的基本結(jié)構(gòu)元素　19
2．3　HTML5新增的結(jié)構(gòu)元素　20
2．3．1　用DIV描述的網(wǎng)頁(yè)布局　20
2．3．2　HTML5增加的結(jié)構(gòu)元素　21
思考與練習(xí)　28
第3章　HTML5的基本頁(yè)面元素　29
3．1　文本元素　29
3．1．1　段落標(biāo)記和換行標(biāo)記
　29
3．1．2　標(biāo)題標(biāo)記　30
3．1．3　塊標(biāo)記和　31
3．2　列表元素　31
3．2．1　有序列表標(biāo)記　32
3．2．2　無(wú)序列表標(biāo)記　33
3．2．3　自定義列表　34
3．3　超鏈接元素　35
3．3．1　超鏈接屬性　35
3．3．2　超鏈接類(lèi)型　36
3．3．3　超鏈接路徑　37
3．4　圖像元素和多媒體元素　39
3．4．1　圖像標(biāo)記　39
3．4．2　多媒體文件標(biāo)記　42
3．5　表格元素　44
3．5．1　HTML的表格標(biāo)記　44
3．5．2　HTML表格的屬性　46
3．5．3　表格嵌套　48
3．6　內(nèi)嵌框架　50
3．7　頁(yè)面基本元素的應(yīng)用　53
3．7．1　多層嵌套列表示例　53
3．7．2　旅游網(wǎng)站首頁(yè)示例　54
3．7．3　內(nèi)嵌框架示例　56
思考與練習(xí)　58
第4章　HTML5的表單元素　60
4．1　表單定義元素form　60
4．2　HTML表單輸入元素及屬性　61
4．2．1　表單輸入元素input　61
4．2．2　列表框元素select　64
4．2．3　文本域輸入元素textarea　65
4．3　HTML5新增的表單元素和屬性　66
4．3．1　HTML5新增input類(lèi)型　66
4．3．2　HTML5表單新增屬性　69
4．4　一個(gè)會(huì)員注冊(cè)表單　72
思考與練習(xí)　75
第5章　HTML5的video元素和audio元素　77
5．1　HTML5的video元素　77
5．1．1　使用video標(biāo)記插入視頻　77
5．1．2　video元素的訪問(wèn)控制　79
5．2　HTML5的audio元素　83
5．2．1　使用audio標(biāo)記插入音頻　83
5．2．2　audio元素的訪問(wèn)控制　84
5．3　使用track元素添加字幕　85
5．3．1　使用track標(biāo)記插入字幕文件　85
5．3．2　建立WebVTT文件　86
思考與練習(xí)　89
第6章　HTML5的canvas繪圖　90
6．1　canvas概述　90
6．1．1　創(chuàng)建canvas元素　90
6．1．2　canvas繪圖的步驟　91
6．2　繪制矩形　92
6．2．1　繪制矩形的方法　92
6．2．2　繪圖時(shí)的顏色與透明度屬性　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　使用坐標(biāo)變換和矩陣變換繪圖　105
6．5．1　canvas的坐標(biāo)系統(tǒng)　105
6．5．2　坐標(biāo)變換　105
6．5．3　使用路徑繪制圖形的坐標(biāo)變換　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繪制動(dòng)畫(huà)　116
6．8．1　繪制動(dòng)畫(huà)的步驟　116
6．8．2　繪制動(dòng)畫(huà)的示例　116
思考與練習(xí)　121
第7章　HTML5的SVG繪圖　123
7．1　SVG概述　123
7．1．1　SVG優(yōu)缺點(diǎn)　123
7．1．2　SVG調(diào)用方式　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．6　SVG繪圖的屬性　130
7．3　變換　132
7．3．1　平移　132
7．3．2　旋轉(zhuǎn)　132
7．3．3　縮放　132
7．3．4　傾斜　132
7．4　組合與重用　133
7．4．1　g元素　133
7．4．2　use元素　134
7．4．3　defs元素　135
7．5　漸變與透明度　136
7．5．1　漸變　136
7．5．2　透明度　141
7．6　濾鏡　142
7．6．1　濾鏡的定義　142
7．6．2　濾鏡的應(yīng)用　143
思考與練習(xí)　145
第8章　獲取瀏覽器的地理位置信息　147
8．1　地理位置信息概述　147
8．1．1　地理位置信息的內(nèi)容　147
8．1．2　地理位置信息的來(lái)源　148
8．2　地理位置信息使用過(guò)程　148
8．3　地理位置API　149
8．3．1　getCurrentPosition()方法　149
8．3．2　watchPosition()方法　150
8．4　獲取地理位置信息的應(yīng)用　150
思考與練習(xí)　156
第9章　離線Web應(yīng)用與Web存儲(chǔ)　158
9．1　離線Web應(yīng)用　158
9．1．1　離線Web應(yīng)用概述　158
9．1．2　實(shí)現(xiàn)離線Web應(yīng)用的步驟　159
9．2　離線Web應(yīng)用的實(shí)現(xiàn)　159
9．2．1　manifest文件　160
9．2．2　更新緩存　163
9．2．3　檢測(cè)在線狀態(tài)　164
9．3　Web Storage概述　165
9．3．1　Web Storage的概念　165
9．3．2　Web Storage API　166
9．4　Web Storage應(yīng)用　167
9．4．1　使用localStorage和sessionStorage的網(wǎng)頁(yè)計(jì)數(shù)器　167
9．4．2　使用localStorage保存、讀取和清除數(shù)據(jù)　168
9．4．3　使用localStorage實(shí)現(xiàn)電話(huà)簿管理　169
9．4．4　使用JSON對(duì)象改進(jìn)電話(huà)簿的功能　171
思考與練習(xí)　174
第10章　使用Web Workers處理線程　175
10．1　Web Workers概述　175
10．1．1　Web Workers的引入　175
10．1．2　使用Web Workers創(chuàng)建線程　177
10．2　頁(yè)面與線程的數(shù)據(jù)交互　179
10．3　使用SharedWorker創(chuàng)建共享線程　181
思考與練習(xí)　186
第11章　HTML5的IndexedDB數(shù)據(jù)庫(kù)　187
11．1　IndexedDB數(shù)據(jù)庫(kù)概述　187
11．2　創(chuàng)建數(shù)據(jù)庫(kù)　188
11．3　數(shù)據(jù)庫(kù)的版本更新和事務(wù)處理　190
11．3．1　版本更新　191
11．3．2　事務(wù)處理　192
11．4　創(chuàng)建對(duì)象倉(cāng)庫(kù)　193
11．5　創(chuàng)建索引　194
11．6　保存和刪除數(shù)據(jù)　196
11．6．1　保存數(shù)據(jù)　196
11．6．2　檢索數(shù)據(jù)　198
11．6．3　刪除數(shù)據(jù)　201
11．7　使用游標(biāo)檢索批量數(shù)據(jù)　202
11．7．1　openCursor()方法及其參數(shù)　202
11．7．2　數(shù)據(jù)遍歷　203
思考與練習(xí)　206
第12章　HTML5的文件操作與拖放操作　207
12．1　file對(duì)象和FileList對(duì)象　207
12．1．1　file對(duì)象　207
12．1．2　FileList對(duì)象　208
12．2　ArrayBuffer對(duì)象與ArrayBufferView對(duì)象　209
12．2．1　ArrayBuffer和ArrayBufferView概念　209
12．2．2　ArrayBuffer對(duì)象　210
12．2．3　ArrayBufferView對(duì)象　210
12．2．4　DataView對(duì)象　212
12．3　Blob對(duì)象　213
12．3．1　使用Blob對(duì)象獲取文件大小和類(lèi)型　213
12．3．2　通過(guò)slice()方法分割文件　216
12．4　FileReader接口　217
12．4．1　FileReader接口的方法　217
12．4．2　FileReader接口的事件　218
12．4．3　FileReader接口的應(yīng)用　218
12．5　拖放API　221
12．5．1　拖放API簡(jiǎn)介　222
12．5．2　拖放的實(shí)現(xiàn)過(guò)程　222
12．6　DataTransfer對(duì)象的屬性與方法　224
12．6．1　DataTransfer對(duì)象的屬性及拖放視覺(jué)效果　224
12．6．2　DataTransfer對(duì)象的方法　225
12．7　拖放的應(yīng)用　227
12．7．1　拖動(dòng)網(wǎng)頁(yè)元素　227
12．7．2　拖動(dòng)上傳圖片　229
思考與練習(xí)　231
第2部分　CSS3及其應(yīng)用
第13章　CSS3的選擇器　233
13．1　CSS3概述　233
13．1．1　CSS3簡(jiǎn)介　233
13．1．2　CSS的一個(gè)示例　234
13．2　CSS的基本選擇器　237
13．2．1　標(biāo)記選擇器　238
13．2．2　類(lèi)選擇器　238
13．2．3　ID選擇器　239
13．3　在HTML中使用CSS的方法　241
13．3．1　行內(nèi)樣式　241
13．3．2　嵌入樣式　241
13．3．3　鏈接樣式　242
13．3．4　導(dǎo)入樣式　243
13．3．5　樣式的優(yōu)先級(jí)　244
13．4　CSS復(fù)合選擇器　247
13．4．1　交集選擇器　247
13．4．2　并集選擇器　248
13．4．3　后代選擇器　249
13．4．4　子選擇器　251
13．4．5　相鄰選擇器　251
13．5　CSS3新增的選擇器　252
13．5．1　屬性選擇器　253
13．5．2　偽類(lèi)選擇器　254
13．5．3　偽元素選擇器　259
13．6　使用CSS設(shè)計(jì)網(wǎng)站頁(yè)面　261
思考與練習(xí)　266
第14章　使用CSS3設(shè)置元素樣式　267
14．1　用CSS3設(shè)置文本樣式　267
14．1．1　字體屬性　267
14．1．2　文本屬性　270
14．2　用CSS3設(shè)置顏色與背景　275
14．2．1　顏色設(shè)置　275
14．2．2　背景設(shè)置　276
14．2．3　圓角邊框和圖像邊框　278
14．3　用CSS3設(shè)置圖像效果　280
14．3．1　為圖片添加邊框　280
14．3．2　圖片縮放　282
14．3．3　圖文混排　284
14．4　用CSS3美化頁(yè)面的應(yīng)用　286
14．4．1　用CSS樣式美化表單　286
14．4．2　設(shè)置圖形項(xiàng)目符號(hào)　288
思考與練習(xí)　289
第15章　CSS3的盒模型及網(wǎng)頁(yè)布局　291
15．1　CSS盒模型　291
15．1．1　盒模型的組成　291
15．1．2　盒的類(lèi)型　296
15．1．3　CSS3新增的與盒相關(guān)的屬性　298
15．2　CSS布局常用屬性　303
15．2．1　定位屬性　303
15．2．2　浮動(dòng)屬性　307
15．3　CSS的網(wǎng)頁(yè)布局　309
15．3．1　單列布局　309
15．3．2　兩列布局　311
15．3．3　使用CSS3盒布局的三列布局　315
15．4　DIV+CSS布局的應(yīng)用　318
15．4．1　圖文混排的實(shí)現(xiàn)　318
15．4．2　制作二級(jí)導(dǎo)航菜單　322
思考與練習(xí)　328
第16章　CSS3的響應(yīng)式布局　329
16．1　響應(yīng)式布局簡(jiǎn)介　329
16．1．1　媒體查詢(xún)模塊　329
16．1．2　Media Queries的應(yīng)用示例　332
16．2　使用Bootstrap實(shí)現(xiàn)響應(yīng)式布局　336
16．2．1　Bootstrap框架簡(jiǎn)介　336
16．2．2　Bootstrap框架中的各種元素　338
16．2．3　應(yīng)用Bootstrap框架構(gòu)建的網(wǎng)頁(yè)　343
思考與練習(xí)　347
第3部分　綜合案例
第17章　綜合案例1——在線旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)　349
17．1　使用HTML 5結(jié)構(gòu)元素組織網(wǎng)頁(yè)　349
17．1．1　網(wǎng)頁(yè)結(jié)構(gòu)描述　349
17．1．2　用CSS 3定義網(wǎng)站全局樣式　351
17．2　頁(yè)頭部分的設(shè)計(jì)　352
17．2．1　頁(yè)頭的結(jié)構(gòu)描述　352
17．2．2　頁(yè)頭元素及CSS樣式代碼分析　353
17．3　側(cè)邊導(dǎo)航和焦點(diǎn)圖的設(shè)計(jì)　355
17．3．1　側(cè)邊導(dǎo)航和焦點(diǎn)圖板塊的內(nèi)容　355
17．3．2　側(cè)邊導(dǎo)航和焦點(diǎn)圖板塊的代碼分析　356
17．4　快速搜索、滑動(dòng)Tab和在線咨詢(xún)板塊設(shè)計(jì)　361
17．4．1　快速搜索、滑動(dòng)Tab和在線咨詢(xún)板塊的內(nèi)容　361
17．4．2　快速搜索板塊的代碼分析　361
17．4．3　滑動(dòng)Tab板塊的代碼分析　364
17．4．4　在線咨詢(xún)板塊的代碼分析　366
17．5　特色線路板塊的設(shè)計(jì)　368
17．5．1　特色線路板塊的內(nèi)容　368
17．5．2　特色線路板塊的代碼分析　369
17．6　頁(yè)腳的設(shè)計(jì)　371
17．6．1　頁(yè)腳的結(jié)構(gòu)描述　371
17．6．2　頁(yè)腳的代碼分析　372
思考與練習(xí)　374
第18章　綜合案例2——訂單管理網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)　376
18．1　案例功能描述　376
18．2　用戶(hù)登錄注冊(cè)模塊設(shè)計(jì)　378
18．2．1　頁(yè)面結(jié)構(gòu)代碼分析　378
18．2．2　CSS代碼分析　379
18．2．3　JavaScript代碼分析　380
18．3　訂單管理模塊設(shè)計(jì)　383
18．3．1　頁(yè)面結(jié)構(gòu)代碼分析　383
18．3．2　CSS代碼分析　385
18．3．3　JavaScript代碼分析　387
18．4　客戶(hù)管理模塊設(shè)計(jì)　393
18．4．1　頁(yè)面結(jié)構(gòu)代碼和CSS代碼分析　394
18．4．2　JavaScript代碼分析　395
思考與練習(xí)　396
附錄　HTML標(biāo)記列表　398
參考文獻(xiàn)　402