HTML5+CSS3+JavaScript+jQuery程序設(shè)計(jì)基礎(chǔ)教程（第2版）

第1章　HTML5概述　1
1．1　HTML基礎(chǔ)　2
1．1．1　什么是HTML　2
1．1．2　HTML的歷史　2
1．2　HTML4基礎(chǔ)　3
1．2．1　設(shè)置網(wǎng)頁(yè)背景和顏色　3
1．2．2　設(shè)置字體屬性　4
1．2．3　超級(jí)鏈接　4
1．2．4　圖像和動(dòng)畫(huà)　6
1．2．5　表格　6
1．2．6　使用框架　8
1．2．7　其他常用標(biāo)簽　9
1．3　HTML5的新特性　12
1．3．1　簡(jiǎn)化的文檔類(lèi)型和字符集　12
1．3．2　HTML5的新結(jié)構(gòu)　13
1．3．3　HTML5的新增內(nèi)聯(lián)元素　16
1．3．4　支持動(dòng)態(tài)頁(yè)面　18
1．3．5　全新的表單設(shè)計(jì)　21
1．3．6　強(qiáng)大的繪圖和多媒體功能　21
1．3．7　打造桌面應(yīng)用的一系列新功能　22
1．3．8　獲取地理位置信息　22
1．3．9　支持多線程　23
1．3．10　small?元素　23
1．3．11　contenteditable屬性　23
1．3．12　placeholder屬性　23
1．3．13　廢棄的標(biāo)簽　24
1．4　支持HTML5的瀏覽器　25
練習(xí)題　26
第2章　JavaScript編程　28
2．1　在HTML中使用JavaScript語(yǔ)言　29
2．1．1　在HTML中插入JavaScript代碼　29
2．1．2　使用js文件　29
2．2　基本語(yǔ)法　30
2．2．1　數(shù)據(jù)類(lèi)型　30
2．2．2　變量　30
2．2．3　注釋　31
2．2．4　運(yùn)算符　31
2．3　常用語(yǔ)句　34
2．3．1　條件分支語(yǔ)句　34
2．3．2　循環(huán)語(yǔ)句　38
2．4　函數(shù)　41
2．4．1　創(chuàng)建自定義函數(shù)　42
2．4．2　調(diào)用函數(shù)　42
2．4．3　變量的作用域　43
2．4．4　函數(shù)的返回值　44
2．5　面向?qū)ο蟪绦蛟O(shè)計(jì)　44
2．5．1　面向?qū)ο蟪绦蛟O(shè)計(jì)思想簡(jiǎn)介　44
2．5．2　JavaScript內(nèi)置類(lèi)　45
2．5．3　HTML DOM　53
2．5．4　Window對(duì)象　54
2．5．5　Navigator對(duì)象　58
2．5．6　document對(duì)象　60
2．6　JavaScript事件處理　61
2．6．1　常用的HTML事件　61
2．6．2　Window對(duì)象的事件處理　63
2．6．3　Event對(duì)象　63
2．7　漸進(jìn)式前端框架Vue．js　64
2．7．1　下載和安裝Vue．js　64
2．7．2　MVVM開(kāi)發(fā)模式　65
2．7．3　Vue．js的開(kāi)發(fā)流程　66
2．7．4　Vue．js的常用指令　67
2．8　使用webpack+Vue構(gòu)建模塊化項(xiàng)目　72
2．8．1　webpack　72
2．8．2　Babel　76
練習(xí)題　81
第3章　HTML5表單及文件處理　83
3．1　HTML4表單　84
3．1．1　定義表單　84
3．1．2　文本框　84
3．1．3　文本區(qū)域　85
3．1．4　單選按鈕　86
3．1．5　復(fù)選框　86
3．1．6　組合框　87
3．1．7　按鈕　87
3．2　HTML5表單的新特性　89
3．2．1　新的標(biāo)簽類(lèi)型　89
3．2．2　新的表單元素　92
3．2．3　新的表單屬性　94
3．2．4　表單驗(yàn)證　95
3．3　在Vue．js表單控件上實(shí)現(xiàn)雙向數(shù)據(jù)綁定　97
3．3．1　在input和textarea元素上實(shí)現(xiàn)雙向數(shù)據(jù)綁定　97
3．3．2　在復(fù)選框上實(shí)現(xiàn)雙向數(shù)據(jù)綁定　99
3．3．3　在select列表上實(shí)現(xiàn)雙向數(shù)據(jù)綁定　100
3．3．4　在單選按鈕上實(shí)現(xiàn)雙向數(shù)據(jù)綁定　101
3．3．5　修飾符　102
3．4　文件處理　102
3．4．1　選擇文件的表單控件　102
3．4．2　檢測(cè)瀏覽器是否支持HTML5 File API　103
3．4．3　FileList接口　103
3．4．4　FileReader接口　105
練習(xí)題　107
第4章　最新版本的層疊樣式表——CSS3　109
4．1　CSS基礎(chǔ)　110
4．1．1　什么是CSS　110
4．1．2　在HTML文檔中應(yīng)用CSS　111
4．1．3　顏色與背景　113
4．1．4　設(shè)置字體　114
4．1．5　設(shè)置文本屬性　115
4．1．6　超鏈接　120
4．1．7　列表　122
4．1．8　表格　124
4．1．9　CSS 輪廓　127
4．1．10　浮動(dòng)元素　129
4．2　CSS3的新技術(shù)　130
4．2．1　實(shí)現(xiàn)圓角效果　130
4．2．2　多彩的邊框顏色　134
4．2．3　陰影　135
4．2．4　背景圖片　136
4．2．5　多列　138
4．2．6　嵌入字體　142
4．2．7　透明度　143
4．2．8　HSL和HSLA顏色表現(xiàn)方法　145
4．3　CSS3應(yīng)用實(shí)例　146
4．3．1　HTML5+CSS3設(shè)計(jì)頁(yè)面布局　147
4．3．2　設(shè)計(jì)漂亮的導(dǎo)航菜單　151
4．3．3　設(shè)計(jì)登錄頁(yè)面　153
4．4　前端CSS框架Bootstrap　156
4．4．1　下載和使用Bootstrap　156
4．4．2　布局容器　159
4．4．3　柵格系統(tǒng)　159
4．4．4　Bootstrap布局組件　160
練習(xí)題　163
第5章　HTML5拖放　165
5．1　概述　166
5．1．1　什么是拖放　166
5．1．2　設(shè)置元素為可拖放　166
5．1．3　拖放事件　166
5．2　傳遞拖曳數(shù)據(jù)　167
5．2．1　dataTransfer對(duì)象的屬性　167
5．2．2　dataTransfer對(duì)象的方法　168
5．3　HTML5拖放的實(shí)例　169
5．3．1　拖放HTML元素　169
5．3．2　拖放文件　170
5．4　在Vue．js中實(shí)現(xiàn)拖曳功能　171
5．4．1　require．js　171
5．4．2　注冊(cè)vuedraggable．js組件　172
5．4．3　在HTML中使用vuedraggable．js組件　172
5．4．4　應(yīng)用實(shí)例　174
練習(xí)題　176
第6章　使用Canvas API畫(huà)圖　177
6．1　Canvas元素　178
6．1．1　Canvas元素的定義語(yǔ)法　178
6．1．2　使用JavaScript獲取網(wǎng)頁(yè)中的Canvas對(duì)象　178
6．2　坐標(biāo)與顏色　179
6．2．1　坐標(biāo)系統(tǒng)　179
6．2．2　顏色的表示方法　179
6．3　繪制圖形　180
6．3．1　繪制直線　180
6．3．2　繪制貝塞爾曲線　182
6．3．3　繪制矩形　185
6．3．4　繪制圓弧　187
6．4　描邊和填充　188
6．4．1　描邊　189
6．4．2　填充圖形內(nèi)部　192
6．4．3　漸變顏色　193
6．4．4　透明顏色　197
6．5　繪制圖像與文字　198
6．5．1　繪制圖像　198
6．5．2　輸出文字　200
6．6　圖形的操作　203
6．6．1　保存和恢復(fù)繪圖狀態(tài)　204
6．6．2　移動(dòng)　205
6．6．3　縮放　206
6．6．4　旋轉(zhuǎn)　206
6．6．5　變形　207
6．7　組合和陰影　209
6．7．1　組合圖形　209
6．7．2　繪制陰影　212
6．8　HTML5 Canvas應(yīng)用實(shí)例　213
6．8．1　繪制漂亮的警告牌　213
6．8．2　動(dòng)畫(huà)實(shí)例：小型太陽(yáng)系模型　215
練習(xí)題　218
第7章　繪制可伸縮矢量圖形（SVG）　220
7．1　SVG概述　221
7．1．1　SVG的特性　221
7．1．2　XML基礎(chǔ)　221
7．1．3　SVG實(shí)例　222
7．1．4　SVG坐標(biāo)系統(tǒng)　223
7．1．5　在HTML5中使用SVG　223
7．2　SVG形狀　224
7．2．1　繪制直線　224
7．2．2　繪制折線　225
7．2．3　繪制矩形　226
7．2．4　繪制圓形　226
7．2．5　繪制橢圓　227
7．2．6　繪制多邊形　227
7．2．7　路徑　228
7．3　線條和填充　230
7．3．1　設(shè)置線條的屬性　230
7．3．2　填充　233
7．4　SVG文本與圖片　234
7．4．1　輸出文本　234
7．4．2　SVG圖片　237
7．5　SVG濾鏡　237
7．5．1　定義濾鏡　237
7．5．2　應(yīng)用濾鏡　238
7．6　漸變顏色　239
7．6．1　線性漸變　239
7．6．2　放射性漸變　240
7．7　變換坐標(biāo)系　241
7．7．1　視窗變換——viewBox屬性　241
7．7．2　用戶坐標(biāo)系的變換——transform屬性　242
練習(xí)題　244
第8章　播放多媒體　245
8．1　HTML5音頻　246
8．1．1　audio標(biāo)簽　246
8．1．2　播放背景音樂(lè)　247
8．1．3　設(shè)置替換音頻源　247
8．1．4　使用JavaScript語(yǔ)言訪問(wèn)audio對(duì)象　248
8．2　HTML5視頻　252
8．2．1　video標(biāo)簽　252
8．2．2　使用JavaScript語(yǔ)言訪問(wèn)video對(duì)象　253
8．3　視頻播放插件video．js　259
練習(xí)題　260
第9章　Web通信　261
9．1　跨文檔消息機(jī)制　262
9．1．1　檢測(cè)瀏覽器對(duì)跨文檔消息機(jī)制的支持情況　262
9．1．2　使用postMessage API發(fā)送消息　262
9．1．3　監(jiān)聽(tīng)和處理消息事件　264
9．2　XMLHttpRequest Level 2　265
9．2．1　創(chuàng)建XMLHttpRequest對(duì)象　265
9．2．2　發(fā)送HTTP請(qǐng)求　266
9．2．3　從服務(wù)器接收數(shù)據(jù)　266
9．2．4　進(jìn)行HTTP頭（HEAD）請(qǐng)求　269
9．2．5　超時(shí)控制　272
9．2．6　使用FormData對(duì)象向服務(wù)器發(fā)送數(shù)據(jù)　272
9．2．7　使用FormData對(duì)象上傳文件　274
9．3　WebSocket　279
9．3．1　什么是Socket　279
9．3．2　WebSocket API概述　281
9．3．3　WebSocket API編程　282
9．3．4　WebSocket服務(wù)器　284
練習(xí)題　286
第10章　本地存儲(chǔ)　287
10．1　概述　288
10．1．1　HTML4的本地?cái)?shù)據(jù)存儲(chǔ)方式　288
10．1．2　HTML5本地存儲(chǔ)技術(shù)概述　289
10．2　localstorage　290
10．2．1　瀏覽器對(duì)localstorage的支持情況　290
10．2．2　使用localstorage保存數(shù)據(jù)　290
10．2．3　獲取localstorage中的數(shù)據(jù)　291
10．2．4　刪除localstorage中的數(shù)據(jù)　292
10．2．5　storage事件　292
10．3　sessionstorage　294
10．3．1　判斷瀏覽器是否支持sessionstorage　294
10．3．2　使用sessionstorage保存數(shù)據(jù)　295
10．3．3　獲取sessionstorage中的數(shù)據(jù)　295
10．3．4　刪除sessionstorage中的數(shù)據(jù)　296
10．4　Web SQL Database API　296
10．4．1　判斷瀏覽器是否支持Web SQL Database API　296
10．4．2　新建數(shù)據(jù)庫(kù)　297
10．4．3　執(zhí)行SQL語(yǔ)句　297
10．5　IndexedDB　300
10．5．1　數(shù)據(jù)庫(kù)的相關(guān)概念　300
10．5．2　判斷瀏覽器是否支持IndexedDB　302
10．5．3　創(chuàng)建和打開(kāi)數(shù)據(jù)庫(kù)　302
10．5．4　創(chuàng)建對(duì)象存儲(chǔ)空間ObjectStore　303
10．5．5　創(chuàng)建索引　305
10．5．6　事務(wù)　306
10．5．7　游標(biāo)　309
練習(xí)題　313
第11章　開(kāi)發(fā)支持離線的Web應(yīng)用程序　315
11．1　HTML5離線Web應(yīng)用程序概述　316
11．1．1　什么是離線Web應(yīng)用程序　316
11．1．2　開(kāi)發(fā)離線Web應(yīng)用程序需要完成的工作　317
11．2　開(kāi)發(fā)HTML5離線Web應(yīng)用程序　317
11．2．1　Application Cache API　318
11．2．2　Cache Manifest文件　318
11．2．3　更新緩存　320
11．2．4　檢測(cè)在線狀態(tài)　323
練習(xí)題　324
第12章　獲取瀏覽器的地理位置信息　325
12．1　概述　326
12．1．1　什么是瀏覽器的地理位置　326
12．1．2　瀏覽器對(duì)獲取地理位置信息的支持情況　326
12．2　獲取地理位置信息　327
12．2．1　getCurrentPosition()方法　327
12．2．2　watchPosition()方法　329
12．2．3　clearWatch()方法　330
12．3　數(shù)據(jù)保護(hù)　330
12．3．1　在Internet Explorer 9中配置共享地理位置　330
12．3．2　在Chrome中配置共享地理位置　332
12．3．3　在Firefox中配置共享地理位置　334
練習(xí)題　335
第13章　支持多線程編程的Web Workers　336
13．1　概述　337
13．1．1　什么是線程　337
13．1．2　什么是HTML5 Web Workers　338
13．1．3　瀏覽器對(duì)Web Workers的支持情況　338
13．2　Web Workers編程　339
13．2．1　創(chuàng)建Web Workers對(duì)象　339
13．2．2　終止Web Workers對(duì)象　341
13．2．3　共享線程　341
練習(xí)題　343
第14章　jQuery程序設(shè)計(jì)　344
14．1　jQuery基礎(chǔ)　345
14．1．1　下載jQuery　345
14．1．2　初識(shí)jQuery　345
14．2　jQuery選擇器　347
14．2．1　基礎(chǔ)選擇器　347
14．2．2　層次選擇器　350
14．2．3　基本過(guò)濾器　354
14．2．4　內(nèi)容過(guò)濾器　355
14．2．5　可見(jiàn)性過(guò)濾器　357
14．2．6　屬性過(guò)濾器　357
14．2．7　子元素過(guò)濾器　359
14．3　設(shè)置HTML元素的屬性與CSS樣式　360
14．3．1　設(shè)置HTML元素的屬性　360
14．3．2　設(shè)置CSS樣式　363
14．4　表單編程　367
14．4．1　表單選擇器　367
14．4．2　表單過(guò)濾器　369
14．4．3　表單API　371
14．5　事件和Event對(duì)象　375
14．5．1　事件處理函數(shù)　375
14．5．2　Event對(duì)象　375
14．5．3　綁定到事件處理函數(shù)　377
14．5．4　鍵盤(pán)事件　378
14．5．5　鼠標(biāo)事件　379
14．5．6　文檔加載事件　380
14．5．7　瀏覽器事件　380
14．6　jQuery動(dòng)畫(huà)　382
14．6．1　執(zhí)行自定義的動(dòng)畫(huà)　382
14．6．2　顯示和隱藏HTML元素　383
14．6．3　淡入淡出效果　384
14．6．4　滑動(dòng)效果　388
14．6．5　動(dòng)畫(huà)隊(duì)列　391
14．7　jQuery Mobile　394
練習(xí)題　400
第15章　HTML5移動(dòng)Web開(kāi)發(fā)　401
15．1　移動(dòng)Web開(kāi)發(fā)的原則　402
15．1．1　響應(yīng)式網(wǎng)頁(yè)與自適應(yīng)網(wǎng)頁(yè)　402
15．1．2　設(shè)計(jì)原則　403
15．1．3　使用響應(yīng)式圖像　405
15．1．4　使用谷歌瀏覽器Chrome測(cè)試響應(yīng)式網(wǎng)頁(yè)　405
15．1．5　通過(guò)JavaScript判斷移動(dòng)設(shè)備的屏幕尺寸　409
15．1．6　響應(yīng)式導(dǎo)航插件Mmenu　410
15．2 HTML5前端框架　413
15．2．1　跨平臺(tái)的移動(dòng)App開(kāi)發(fā)框架PhoneGap　413
15．2．2　使用Framework7開(kāi)發(fā)混合移動(dòng)應(yīng)用　417
練習(xí)題　444