HTML 5與CSS 3權(quán)威指南（第2版上冊）

前言
上冊
第1章　Web時(shí)代的變遷 / 1
1.1　迎接新的Web時(shí)代 / 2
1.1.1　HTML 5時(shí)代即將來臨 / 2
1.1.2　HTML 5的目標(biāo) / 4
1.2　HTML 5會深受歡迎的理由 / 4
1.2.1　世界知名瀏覽器廠商對HTML 5的支持 / 4
1.2.2　第一個理由：時(shí)代的要求 / 5
1.2.3　第二個理由：Internet Explorer 8 / 6
1.3　可以放心使用HTML 5的三個理由 / 6
1.4　HTML 5要解決的三個問題 / 7
第2章　HTML 5與HTML 4的區(qū)別 / 8
2.1　語法的改變 / 9
2.1.1　HTML 5的語法變化 / 9
2.1.2　HTML 5中的標(biāo)記方法 / 10
2.1.3　HTML 5確保了與之前HTML版本的兼容性 / 10
2.1.4　標(biāo)記示例 / 12
2.2　新增的元素和廢除的元素 / 12
2.2.1　新增的結(jié)構(gòu)元素 / 12
2.2.2　新增的其他元素 / 14
2.2.3　新增的input元素的類型 / 18
2.2.4　廢除的元素 / 18
2.3　新增的屬性和廢除的屬性 / 19
2.3.1　新增的屬性 / 19
2.3.2　廢除的屬性 / 21
2.4　全局屬性 / 22
2.4.1　contentEditable屬性 / 22
2.4.2　designMode屬性 / 24
2.4.3　hidden屬性 / 24
2.4.4　spellcheck屬性 / 24
2.4.5　tabindex屬性 / 25
第3章　HTML 5的結(jié)構(gòu) / 26
3.1　新增的主體結(jié)構(gòu)元素 / 27
3.1.1　article元素 / 27
3.1.2　section元素 / 29
3.1.3　nav元素 / 31
3.1.4　aside元素 /32
3.1.5　time元素與微格式 / 34
3.1.6　pubdate屬性 / 35
3.2　新增的非主體結(jié)構(gòu)元素 / 35
3.2.1　header元素 / 36
3.2.2　hgroup元素 / 37
3.2.3　footer元素 / 37
3.2.4　address元素 / 38
3.3　HTML 5結(jié)構(gòu) / 39
3.3.1　大綱 / 39
3.3.2　大綱的編排規(guī)則 / 44
3.3.3　對新的結(jié)構(gòu)元素使用樣式 / 47
第4章　表單及其他新增和改良元素 / 48
4.1　新增元素與屬性 / 49
4.1.1　新增屬性 / 49
4.1.2　大幅度地增加與改良input元素的種類 / 61
4.1.3　對新的表單元素使用樣式 / 71
4.1.4　output元素的追加 / 72
4.2　表單驗(yàn)證 / 73
4.2.1　自動驗(yàn)證 / 73
4.2.2　取消驗(yàn)證 / 73
4.2.3　顯式驗(yàn)證 / 74
4.3　增強(qiáng)的頁面元素 / 74
4.3.1　新增的figure元素與figcaption元素 / 75
4.3.2　新增的details元素與summary元素 / 76
4.3.3　新增的mark元素 / 77
4.3.4　新增的progress元素 / 80
4.3.5　新增的meter元素 / 81
4.3.6　改良的ol列表 / 82
4.3.7　改良的dl列表 / 83
4.3.8　加以嚴(yán)格限制的cite元素 / 85
4.3.9　重新定義的small元素 / 85
4.3.10　安全性增強(qiáng)的iframe元素 / 86
4.3.11　增強(qiáng)的script元素 / 89
第5章　HTML編輯API / 94
5.1　Range對象與Selection對象 / 95
5.1.1　基本概念 / 95
5.1.2　Range對象的屬性與方法 / 97
5.1.3　Selection對象的屬性與方法 / 118
5.2　命令 / 128
5.2.1　基本概念 / 128
5.2.2　execCommand方法 / 128
5.2.3　queryCommandSupported方法 / 129
5.2.4　queryCommandState方法 / 130
5.2.5　queryCommandIndeterm方法 / 131
5.2.6　queryCommandEnabled方法 / 133
5.2.7　queryCommandValue方法 / 135
5.2.8　可以在各種瀏覽器中運(yùn)行的所有命令 / 136
第6章　繪制圖形 / 136
6.1　canvas元素的基礎(chǔ)知識 / 138
6.1.1　在頁面中放置canvas元素 / 138
6.1.2　繪制矩形 / 139
6.2　使用路徑 / 141
6.2.1　繪制圓形 / 141
6.2.2　如果沒有關(guān)閉路徑會怎么樣 / 143
6.2.3　moveTo與lineTo / 145
6.2.4　使用bezierCurveTo繪制貝濟(jì)埃曲線 / 146
6.3　繪制漸變圖形 / 148
6.3.1　繪制線性漸變 / 148
6.3.2　繪制徑向漸變 / 150
6.4　繪制變形圖形 / 151
6.4.1　坐標(biāo)變換 / 151
6.4.2　坐標(biāo)變換與路徑的結(jié)合使用 / 153
6.4.3　矩陣變換 / 154
6.5　圖形組合 / 158
6.6　給圖形繪制陰影 / 160
6.7　使用圖像 / 162
6.7.1　繪制圖像 / 162
6.7.2　圖像平鋪 / 164
6.7.3　圖像裁剪 / 166
6.7.4　像素處理 / 168
6.8　繪制文字 / 170
6.9　補(bǔ)充知識 / 172
6.9.1　保存與恢復(fù)狀態(tài) / 172
6.9.2　保存文件 / 173
6.9.3　簡單動畫的制作 / 174
第7章　History API / 177
7.1　History API的基本概念 / 178
7.2　History API使用示例 / 179
7.2.1　使用History API / 179
7.2.2　結(jié)合使用Canvas API與History API / 188
第8章　本地存儲 / 193
8.1　Web Storage / 194
8.1.1　Web Storage概述 / 194
8.1.2　簡單Web留言本 / 197
8.1.3　作為簡易數(shù)據(jù)庫來利用 / 200
8.1.4　利用storage事件實(shí)時(shí)監(jiān)視Web Storage中的數(shù)據(jù) / 202
8.2　本地?cái)?shù)據(jù)庫 / 204
8.2.1　本地?cái)?shù)據(jù)庫的基本概念 / 204
8.2.2　用executeSql來執(zhí)行查詢 / 205
8.2.3　使用數(shù)據(jù)庫實(shí)現(xiàn)Web留言本 / 206
8.2.4　transaction方法中的處理 / 209
8.3　indexedDB數(shù)據(jù)庫 / 211
8.3.1　indexedDB數(shù)據(jù)庫的基本概念 / 211
8.3.2　連接數(shù)據(jù)庫 / 211
8.3.3　數(shù)據(jù)庫的版本更新 / 213
8.3.4　創(chuàng)建對象倉庫 / 218
8.3.5　創(chuàng)建索引 / 222
8.3.6　索引的multiEntry屬性值 / 226
8.3.7　使用事務(wù) / 227
8.3.8　保存數(shù)據(jù) / 229
8.3.9　獲取數(shù)據(jù) / 232
8.3.10　根據(jù)主鍵值檢索數(shù)據(jù) / 235
8.3.11　根據(jù)索引屬性值檢索數(shù)據(jù) / 241
8.3.12　復(fù)合索引 / 246
8.3.13　統(tǒng)計(jì)對象倉庫中的數(shù)據(jù)數(shù)量 / 250
8.3.14　使用indexedDB API制作Web留言本 / 252
第9章　離線應(yīng)用程序 / 259
9.1　離線Web應(yīng)用程序詳解 / 260
9.1.1　新增的本地緩存 / 260
9.1.2　本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別 / 260
9.2　manifest文件 / 261
9.3　瀏覽器與服務(wù)器的交互過程 / 263
9.4　applicationCache對象 / 264
9.4.1　swapCache方法 / 265
9.4.2　applicationCache對象的事件 / 267
第10章　文件API / 270
10.1　FileList對象與file對象 / 271
10.2　ArrayBuffer對象與ArrayBufferView對象 / 272
10.2.1　基本概念 / 272
10.2.2　ArrayBuffer對象 / 272
10.2.3　ArrayBufferView對象 / 273
10.2.4　DataView對象 / 274
10.3　Blob對象與BlobBuilder對象 / 278
10.3.1　Blob對象 / 278
10.3.2　BlobBuilder對象 / 280
10.3.3　Blob對象的slice方法 / 283
10.4　FileReader對象 / 284
10.4.1　FileReader對象的方法 / 284
10.4.2　FileReader對象的事件 / 285
10.4.3　FileReader對象的使用示例 / 285
10.5　FileSystem API / 292
10.5.1　FileSystem API概述 / 292
10.5.2　FileSystem API的適用場合 / 292
10.5.3　請求訪問文件系統(tǒng) / 293
10.5.4　申請磁盤配額 / 296
10.5.5　創(chuàng)建文件 / 300
10.5.6　寫入文件 / 302
10.5.7　在文件中追加數(shù)據(jù) / 305
10.5.8　讀取文件 / 307
10.5.9　復(fù)制磁盤中的文件 / 309
10.5.10　刪除文件 / 311
10.5.11　創(chuàng)建目錄 / 312
10.5.12　讀取目錄中的內(nèi)容 / 316
10.5.13　刪除目錄 / 319
10.5.14　復(fù)制文件或目錄 / 321
10.5.15　移動文件或目錄與重命名文件或目錄 / 323
10.5.16　filesystem:URL前綴 / 326
10.5.17　綜合案例 / 328
10.6　Base64編碼支持 / 336
10.6.1　Base64編碼概述 / 336
10.6.2　在HTML 5中支持Base64編碼 / 338
第11章　通信API / 342
11.1　跨文檔消息傳輸 / 343
11.1.1　跨文檔消息傳輸?shù)幕局R / 343
11.1.2　跨文檔消息傳輸示例 / 344
11.1.3　通道通信 / 346
11.2　WebSockets通信 / 350
11.2.1　WebSockets通信的基本知識 / 350
11.2.2　使用WebSockets API / 350
11.2.3　WebSockets API使用示例 / 351
11.2.4　發(fā)送對象 / 353
11.2.5　發(fā)送與接收原始二進(jìn)制數(shù)據(jù) / 354
11.2.6　實(shí)現(xiàn)WebSockets API的開發(fā)框架 / 355
11.2.7　WebSocket 協(xié)議 / 355
11.2.8　WebSockets API的適用場景 / 356
11.3　Server-Sent Events API / 356
11.3.1　Server-Sent Events API的基本概念 / 356
11.3.2　Server-Sent Events API的實(shí)現(xiàn)方法 / 356
11.3.3　事件ID的使用示例 / 363
第12章　擴(kuò)展的XMLHttpRequest API / 366
12.1　從服務(wù)器端獲取二進(jìn)制數(shù)據(jù) / 367
12.1.1　ArrayBuffer響應(yīng) / 368
12.1.2　Blob響應(yīng) / 373
12.2　發(fā)送數(shù)據(jù) / 374
12.2.1　發(fā)送字符串 / 374
12.2.2　發(fā)送表單數(shù)據(jù) / 376
12.2.3　上傳文件 / 378
12.2.4　發(fā)送Blob對象 / 379
12.2.5　發(fā)送ArrayBuffer對象 / 381
12.3　跨域數(shù)據(jù)請求 / 385
第13章　使用Web Workers處理線程 / 388
13.1　基礎(chǔ)知識 / 389
13.2　與線程進(jìn)行數(shù)據(jù)的交互 / 392
13.3　線程嵌套 / 394
13.3.1　單層嵌套 / 395
13.3.2　在多個子線程中進(jìn)行數(shù)據(jù)的交互 / 397
13.4　線程中可用的變量、函數(shù)與類 / 398
13.5　適用場合 / 399
13.6　SharedWorker / 399
13.6.1　基礎(chǔ)知識 / 399
13.6.2　實(shí)現(xiàn)前臺頁面與后臺線程之間的通信 / 400
13.6.3　定義頁面與共享的后臺線程開始通信時(shí)的處理 / 400
13.6.4　SharedWorker的使用示例 / 401
第14章　獲取地理位置信息 / 406
14.1　Geolocation API的基本知識 / 407
14.1.1　取得當(dāng)前地理位置 / 407
14.1.2　持續(xù)監(jiān)視當(dāng)前地理位置的信息 / 409
14.1.3　停止獲取當(dāng)前用戶的地理位置信息 / 409
14.2　position對象 / 409
14.3　在頁面上使用google地圖 / 411
第15章　多媒體相關(guān)API / 414
15.1　多媒體播放 / 415
15.1.1　video元素與audio元素的基礎(chǔ)知識 / 415
15.1.2　屬性 / 417
15.1.3　方法 / 421
15.1.4　事件 / 423
15.2　Web Audio API / 426
15.2.1　AudioContext對象 / 426
15.2.2　加載聲音 / 427
15.2.3　播放聲音 / 428
15.2.4　將聲音加載處理封裝在類中 / 429
15.2.5　控制節(jié)奏 / 431
15.2.6　控制音量 / 433
15.2.7　兩個聲音的交叉混合 / 436
15.2.8　多個音頻文件之間的平滑過渡 / 439
15.2.9　對音頻使用濾波處理 / 443
第16章　與頁面顯示相關(guān)的API / 447
16.1　Page Visibility API / 448
16.1.1　Page Visibility API概述 / 448
16.1.2　Page Visibility API的使用場合 / 448
16.1.3　實(shí)現(xiàn)Page Visibility API / 448
16.2　Fullscreen API / 451
16.2.1　Fullscreen API概述 / 451
16.2.2　實(shí)現(xiàn)Fullscreen API / 451
16.2.3　Fullscreen API代碼使用示例 / 454
第17章　拖放API與通知API / 457
17.1　拖放API / 458
17.1.1　實(shí)現(xiàn)拖放的步驟 / 458
17.1.2　DataTransfer對象的屬性與方法 / 461
17.1.3　設(shè)定拖放時(shí)的視覺效果 / 461
17.1.4　自定義拖放圖標(biāo) / 462
17.2　通知API / 463
17.2.1　通知API的基礎(chǔ)知識 / 463
17.2.2　通知API的代碼使用示例 / 465
下　　冊
第18章　CSS 3概述 / 467
18.1　概要介紹 / 468
18.1.1　CSS 3是什么 / 468
18.1.2　CSS 3的歷史 / 468
18.2　使用CSS 3能做什么 / 469
18.2.1　模塊與模塊化結(jié)構(gòu) / 469
18.2.2　一個簡單的CSS 3示例 / 470
第19章　選擇器 / 473
19.1　選擇器概述 / 475
19.2　屬性選擇器 / 475
19.2.1　屬性選擇器概述 / 475
19.2.2　CSS3中的屬性選擇器 / 477
19.2.3　靈活運(yùn)用屬性選擇器 / 478
19.3　結(jié)構(gòu)性偽類選擇器 / 479
19.3.1　CSS中的偽類選擇器及偽元素 / 479
19.3.2　選擇器root、not、empty和target / 483
19.3.3　選擇器：first-child、last-child、nth-child和nth-last-child /488
19.3.4　選擇器：nth-of-type和nth-last-of-type / 492
19.3.5　循環(huán)使用樣式 / 494
19.3.6　only-child選擇器 / 496
19.4　UI元素狀態(tài)偽類選擇器 / 498
19.4.1　選擇器：E:hover、E:active和E:focus / 498
19.4.2　E:enabled偽類選擇器與E:disabled偽類選擇器 / 500
19.4.3　E:read-only偽類選擇器與E:read-write偽類選擇器 / 501
19.4.4　偽類選擇器：E:checked、E:default和E:indeterminate / 502
19.4.5　E::selection偽類選擇器 / 505
19.4.6　E:invalid偽類選擇器與E:valid偽類選擇器 / 506
19.4.7　E:required偽類選擇器與E:optional偽類選擇器 / 507
19.4.8　E:in-range偽類選擇器與E:out-of-range偽類選擇器 / 508
19.5　通用兄弟元素選擇器 / 509
第20章　使用選擇器在頁面中插入內(nèi)容 / 511
20.1　使用選擇器來插入文字 / 512
20.1.1　使用選擇器來插入內(nèi)容 / 512
20.1.2　指定個別元素不進(jìn)行插入 / 513
20.2　插入圖像文件 / 514
20.2.1　在標(biāo)題前插入圖像文件 / 514
20.2.2　插入圖像文件的好處 / 515
20.2.3　將alt屬性的值作為圖像的標(biāo)題來顯示 / 517
20.3　使用content屬性來插入項(xiàng)目編號 / 518
20.3.1　在多個標(biāo)題前加上連續(xù)編號 / 518
20.3.2　在項(xiàng)目編號中追加文字 / 519
20.3.3　指定編號的樣式 / 519
20.3.4　指定編號的種類 / 519
20.3.5　編號嵌套 / 520
20.3.6　中編號中嵌入大編號 / 521
20.3.7　在字符串兩邊添加嵌套文字符號 / 523
第21章　文字與字體相關(guān)樣式 / 525
21.1　給文字添加陰影—text-shadow屬性 / 526
21.1.1　text-shadow屬性的使用方法 / 526
21.1.2　位移距離 / 528
21.1.3　陰影的模糊半徑 / 528
21.1.4　陰影的顏色 / 529
21.1.5　指定多個陰影 / 529
21.2　讓文本自動換行—word-break屬性 / 530
21.2.1　依靠瀏覽器讓文本自動換行 / 530
21.2.2　指定自動換行的處理方法 / 530
21.3　讓長單詞與URL地址自動換行—word-wrap屬性 / 532
21.4　使用服務(wù)器端字體—Web Font與@font-face屬性 / 532
21.4.1　在網(wǎng)頁上顯示服務(wù)器端字體 / 532
21.4.2　定義斜體或粗體字體 / 534
21.4.3　顯示客戶端本地的字體 / 536
21.4.4　屬性值的指定 / 537
21.5　修改字體種類而保持字體尺寸不變—font-size-adjust屬性 / 538
21.5.1　字體不同導(dǎo)致文字大小的不同 / 538
21.5.2　font-size-adjust屬性的使用方法 / 540
21.5.3　瀏覽器對于aspect值的計(jì)算方法 / 540
21.5.4　font-size-adjust屬性的使用示例 / 541
第22章　盒相關(guān)樣式 / 543
22.1　盒的類型 / 544
22.1.1　盒的基本類型 / 544
22.1.2　inline-block類型 / 545
22.1.3　inline-table類型 / 552
22.1.4　list-item類型 / 554
22.1.5　run-in類型與compact類型 / 555
22.1.6　 表格相關(guān)類型 / 556
22.1.7　none類型 / 558
22.1.8　各種瀏覽器對于各種盒類型的支持情況 / 559
22.2　對于盒中容納不下的內(nèi)容的顯示 / 560
22.2.1　overflow屬性 / 560
22.2.2　overflow-x屬性與overflow-y屬性 / 562
22.2.3　text-overflow屬性 / 563
22.3　對盒使用陰影 / 565
22.3.1　box-shadow屬性的使用方法 / 565
22.3.2　將參數(shù)設(shè)定為0 / 566
22.3.3　對盒內(nèi)子元素使用陰影 / 567
22.3.4　對第一個文字或第一行使用陰影 / 568
22.3.5　對表格及單元格使用陰影 / 568
22.4　指定針對元素的寬度與高度的計(jì)算方法 / 570
22.4.1　box-sizing屬性 / 570
22.4.2　為什么要使用box-sizing屬性 / 572
第23章　背景與邊框相關(guān)樣式 / 574
23.1　與背景相關(guān)的新增屬性 / 575
23.1.1　指定背景的顯示范圍—background-clip屬性 / 575
23.1.2　指定繪制背景圖像的繪制起點(diǎn)—background-origin屬性 / 577
23.1.3　指定背景圖像的尺寸—background-size屬性 / 579
23.2　在一個元素中顯示多個背景圖像 / 582
23.3　圓角邊框的繪制 / 583
23.3.1　border-radius屬性 / 583
23.3.2　在border-radius屬性中指定兩個半徑 / 584
23.3.3　不顯示邊框時(shí) / 585
23.3.4　修改邊框種類時(shí) / 585
23.3.5　繪制四個角不同半徑的圓角邊框 / 585
23.4　使用圖像邊框 / 586
23.4.1　border-image屬性 / 586
23.4.2　border-image屬性的最簡單的使用方法 / 587
23.4.3　使用border-image屬性來指定邊框?qū)挾?/ 589
23.4.4　中央圖像的自動拉伸 / 590
23.4.5　指定四條邊中圖像的顯示方法 / 591
23.4.6　使用背景圖像 / 594
第24章　CSS 3中的變形處理 / 596
24.1　transform功能的基礎(chǔ)知識 / 597
24.1.1　如何使用transform功能 / 597
24.1.2　transform功能的分類 / 598
24.2　對一個元素使用多種變形的方法 / 602
24.2.1　兩個變形示例 / 602
24.2.2　指定變形的基準(zhǔn)點(diǎn) / 604
第25章　CSS 3中的動畫功能 / 607
25.1　Transitions功能 / 608
25.1.1　Transitions功能的使用方法 / 608
25.1.2　使用Transitions功能同時(shí)平滑過渡多個屬性值 / 609
25.2　Animations功能 / 612
25.2.1　Animations功能的使用方法 / 612
25.2.2　實(shí)現(xiàn)多個屬性值同時(shí)改變的動畫 / 614
25.2.3　實(shí)現(xiàn)動畫的方法 / 616
25.2.4　實(shí)現(xiàn)網(wǎng)頁的淡入效果 / 618
第26章　布局相關(guān)樣式 / 619
26.1　多欄布局 / 620
26.1.1　使用float屬性或position屬性的缺點(diǎn) / 620
26.1.2　使用多欄布局方式 / 622
26.2　盒布局 / 625
26.2.1　盒布局的基礎(chǔ)知識 / 625
26.2.2　彈性盒布局 / 629
第27章　Media Queries相關(guān)樣式 / 641
27.1　根據(jù)瀏覽器的窗口大小來選擇使用不同的樣式 / 642
27.2　在iPhone中的顯示 / 646
27.3　Media Queries的使用方法 / 647
第28章　CSS 3的其他重要樣式和屬性 /650
28.1　顏色相關(guān)樣式 / 651
28.1.1　利用alpha通道來設(shè)定顏色 / 651
28.1.2　alpha通道與opacity屬性的區(qū)別 / 653
28.1.3　指定顏色值為transparent / 655
28.2　用戶界面相關(guān)樣式 / 656
28.2.1　輪廓相關(guān)樣式 / 656
28.2.2　resize屬性 / 659
28.3　取消對元素的樣式指定—initial屬性值 / 660
28.3.1　取消對元素的樣式指定 / 660
28.3.2　使用initial屬性值并不等于取消樣式設(shè)定的特例 / 662
第29章　綜合實(shí)例 / 664
29.1　實(shí)例1：使用HTML 5中新增結(jié)構(gòu)元素來構(gòu)建網(wǎng)頁 / 665
29.1.1　組織網(wǎng)頁結(jié)構(gòu) / 665
29.1.2　構(gòu)建網(wǎng)頁標(biāo)題 / 667
29.1.3　構(gòu)建側(cè)邊欄 / 670
29.1.4　構(gòu)建主體內(nèi)容 / 672
29.1.5　構(gòu)建版權(quán)信息 / 678
29.2　實(shí)例2：使用HTML 5+CSS 3來構(gòu)建Web應(yīng)用程序 / 678
29.2.1　HTML 5頁面代碼分析 / 679
29.2.2　CSS 3樣式代碼分析 / 682
29.2.3　JavaScript腳本代碼分析 / 685
附錄A　可以在各種瀏覽器中運(yùn)行的所有命令 / 698
附錄B　2012年7月五大瀏覽器的最新版對HTML 5的支持情況 / 706