HTML 5 與 CSS 3 權威指南 (第4版·上冊)

前言
上冊
第1章Web時代的變遷1 
1.1迎接新的Web時代1 
1.1.1 HTML 5時代即將來臨1 
1.1.2 HTML 5的目標3 
1.1.3 HTML5的小版本更新4 
1.2 HTML 5深受歡迎的理由4 
1.2.1世界知名瀏覽器廠商對HTML 5的支持4 
1.2.2第一個理由：時代的要求5 
1.2.3第二個理由：Internet Explorer 85 
1.3可以放心使用HTML 5的三個理由6 
1.4 HTML 5要解決的三個問題7 
第2章HTML 5與HTML 4的區別8 
2.1語法的改變8 
2.1.1 HTML 5的語法變化8 
2.1.2 HTML 5中的標記方法9 
2.1.3 HTML 5確保的兼容性10 
2.1.4標記示例11 
2.2新增的元素和廢除的元素12 
2.2.1新增的結構元素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全局屬性23 
2.4.1 contentEditable屬性23 
2.4.2 designMode屬性24 
2.4.3 hidden屬性24 
2.4.4 spellcheck屬性25 
2.4.5 tabindex屬性25 
2.5新增的事件25 
2.6只監聽一次事件26 
第3章HTML 5的結構28 
3.1新增的主體結構元素28 
3.1.1 article元素29 
3.1.2 section元素31 
3.1.3 nav元素33 
3.1.4 aside元素34 
3.1.5 time元素與微格式36 
3.1.6 pubdate屬性37 
3.2新增的非主體結構元素38 
3.2.1 header元素38 
3.2.2 footer元素39 
3.2.3 address元素40 
3.2.4 main元素41 
3.3 HTML 5中網頁結構42 
3.3.1 HTML 5中的大綱42 
3.3.2大綱的編排規則48 
3.3.3對新的結構元素使用樣式51 
第4章表單及其他新增和改良元素53 
4.1新增元素與屬性53 
4.1.1新增屬性53
4.1.2大幅度地增加與改良input元素的種類65 
4.1.3對新的表單元素使用樣式77 
4.1.4 output元素的追加77 
4.2表單驗證78 
4.2.1自動驗證78 
4.2.2取消驗證79 
4.2 .3顯式驗證79 
4.3增強的頁面元素80 
4.3.1新增的figure元素與figcaption元素80 
4.3.2新增的details元素與summary元素82 
4.3.3新增的mark元素83 
4.3.4新增的progress元素86 
4.3.5新增的meter元素87 
4.3.6新增的dialog元素88 
4.3.7改良的a元素90 
4.3.8改良的ol列表91 
4.3.9改良的dl列表92 
4.3.10加以嚴格限制的cite元素93 
4.3.11重新定義的small元素94 
4.3.12安全性增強的iframe元素94 
4.3.13增強的script元素97 
第5章ECMAScript中的新增功能102 
5.1新增語法103 
5.1. 1使用for-of循環103 
5.1.2使用let關鍵字與const關鍵字聲明變量104
5.1.3使用class關鍵字聲明類109 
5.1.4不確定參數及默認參數值116 
5.1.5箭頭函數121 
5.1.6生成器函數126 
5.1.7解構賦值129 
5.1.8模板字符串138 
5.1.9在客戶端使用JavaScript模塊141 
5.2新增對象及數據類型145 
5.2.1 Promise對象145 
5.2.2全局唯一標識符：symbol 166 
5.2.3代理與反射170 
5.2.4新增的各種集合對象176 
5.3對現有對象的擴展187 
第6章文件API 194 
6.1 FileList對象與file對象195 
6.2 ArrayBuffer對象與ArrayBuffer-View對象196 
6.2.1基本概念196 
6.2.2 ArrayBuffer對象196 
6.2.3 ArrayBufferView對象196 
6.2.4 DataView對象198 
6.3 Blob對象202 
6.3.1 Blob對象概述202 
6.3.2創建Blob對象204 
6.3.3 Blob對象的slice方法207 
6.4 FileReader對象208
6.4.1 FileReader對象的方法208 
6.4.2 FileReader對象的事件209 
6.4.3 FileReader對象的使用示例209 
第7章本地存儲217 
7.1 Web Storage 218 
7.1.1 Web Storage是什麼218 
7.1.2簡單Web留言本221 
7.1.3作為簡易數據庫來利用224 
7.1.4利用storage事件實時監視Web Storage中的數據226 
7.2 indexedDB數據庫229 
7.2.1本地數據庫的基本概念229 
7.2.2 indexedDB數據庫的基本概念229 
7.2.3連接數據庫229 
7.2.4數據庫的版本更新231 
7.2.5創建對象倉庫233 
7.2.6創建索引236 
7.2.7索引的multiEntry屬性值239 
7.2.8使用事務239 
7.2.9保存數據241 
7.2.10在indexedDB數據庫中保存Blob對象244 
7.2.11獲取數據247 
7.2.12根據主鍵值檢索數據251 
7.2.13根據搜索範圍獲取數據的主鍵值257 
7.2.14根據索引屬性值檢索數據260 
7.2.15獲取所有數據266
7.2.16複合索引272 
7.2.17統計對象倉庫中的數據數量276 
7.2.18列舉數據庫中所有對象倉庫的名稱278 
7.2.19列舉事務中所有可訪問對象倉庫名稱279 
7.2.20刪除對象倉庫281 
7.2 .21根據主鍵刪除單條數據282 
7.2.22列舉對象倉庫的所有索引名稱及刪除索引286 
7.2.23使用索引對象的方法289 
7.2.24在指定範圍中抽取數據主鍵298 
7.2.25使用游標對象的方法301 
第8章擴展的XMLHttpRequest API及FetchAPI 307 
8.1從服務器端獲取二進制數據307 
8.1.1 ArrayBuffer響應308 
8.1.2 Blob響應313 
8.2發送數據314 
8.2.1發送字符串315 
8.2.2發送表單數據316 
8.2 .3上傳文件319 
8.2.4發送Blob對象320 
8.2.5發送ArrayBuffer對象323 
8.3跨域數據請求327 
8.4使用Fetch API 328 
8.4.1告別XMLHttpRequest 328 
8.4.2使用Fetch API發出請求329
8.4.3向服務器端發送POST請求332 
8.4.4提交JSON數據333 
8.4.5發送表單數據334 
8.4.6上傳文件335 
8.4.7提交及下載Blob對像或ArrayBuffer對象336 
第9章使用Web Workers處理線程339 
9.1基礎知識340 
9.2與線程進行數據的交互343 
9.3線程嵌套345 
9.3.1單層嵌套345 
9.3.2在多個子線程中進行數據的交互348 
9.4線程中可用的變量、函數與類349 
9.5適用場合350 
9.6 SharedWorker 350 
9.6.1基礎知識350 
9.6.2實現前台頁面與後台線程之間的通信351 
9.6.3定義頁面與共享的後台線程開始通信時的處理351 
9.6.4 SharedWorker的使用示例352 
第10章使用Service Worker實現離線應用程序358 
10.1 Service Worker的基本概念358 
10.2註冊、下載及安裝359 
10.3自定義請求的響應365 
10.4激活372 
10.5其他用例375
第11章通信API 376 
11.1跨文檔消息傳輸377 
11.1.1跨文檔消息傳輸的基本知識377 
11.1.2跨文檔消息傳輸示例377 
11.1.3通道通信379 
11.2 WebSockets通信384 
11.2.1 WebSockets通信的基本知識384 
11.2.2使用WebSockets API 384 
11.2.3 WebSockets API使用示例385 
11.2.4發送對象387 
11.2.5發送與接收原始二進制數據388 
11.2.6實現WebSockets API的開發框架389 
11.2.7 WebSocket協議390 
11.2. 8 WebSockets API的適用場景390 
11.3 Server-Sent Events API 390 
11.3.1 Server-Sent Events API的基本概念390 
11.3.2 Server-Sent Events API的實現方法391 
11.4 BroadcastChannel API 398 
11.4.1 BroadcastChannel API的基本概念398 
11.4.2與其他技術的區別400 
第12章Web組件402
12.1使用template元素定制客戶端模板403 
12.1.1特性檢測403 
12.1.2定義模板內容403 
12.1.3動態設置模板內容406 
12.1.4模板中嵌套模板406 
12.2自身獨立的Shadow DOM組件409 
12.2.1 Shadow DOM的基本概念410 
12.2.2創建Shadow DOM 410 
12.2.3實現內容與展示的分離412 
12.2.4對Shadow DOM使用樣式423 
12.2.5高級主題430 
12.3自定義元素432 
12.3.1自定義元素的基本概念432 
12.3.2自定義全新的HTML元素432 
12.3.3擴展元素436 
12.3.4在JavaScript腳本代碼中創建自定義元素439 
12.3.5自定義元素響應440 
12.3.6自定義元素的屬性446 
12.3 .7指定自定義元素的內容451 
12.3.8指定自定義元素的樣式454 
12.4 HTML導入456 
12.4.1 HTML導入所能解決的課題456 
12.4.2 HTML導入的基本概念456 
12.4.3打包資源457
12.4.4 load事件與error事件457 
12.4.5使用被導入文檔459 
12.4.6傳輸Web組件462 
12.4.7管理依賴和子導入464 
12.4.8性能注意事項468 
12.4.9 HTML導入的要點468 
12.4.10 HTML導入的使用案例469 
第13章繪製圖形470 
13.1 canvas元素的基礎知識470 
13.1.1在頁面中放置canvas元素471 
13.1.2繪製矩形471 
13.2使用路徑473 
13.2.1繪製圓形473 
13.2.2不關閉路徑會怎麼樣476 
13.2.3繪製直線477 
13.2.4繪製曲線482 
13.2.5使用Path2D對象繪製路徑484 
13.3繪製漸變圖形487 
13.3.1繪製線性漸變487 
13.3.2繪製徑向漸變489 
13.4繪製變形圖形490 
13.4.1坐標變換490 
13.4.2坐標變換與路徑的結合使用492 
13.4.3矩陣變換493 
13.5給圖形繪製陰影497 
13.6使用圖像498
13.6.1繪製圖像498 
13.6.2圖像平鋪501 
13.6.3圖像裁剪503 
13.6.4像素處理505 
13.7圖形、圖像的組合與混合506 
13.7.1組合圖形506 
13.7.2混合圖像508 
13.8繪製文字511 
13.9補充知識513 
13.9.1保存與恢復狀態513 
13.9.2將canvas元素中的圖像轉換為data URL 514 
13.9.3將canvas元素中的圖像轉換為Blob對象515 
13.9.4簡單動畫的製作518 
13.9. 5解碼圖像521 
第14章多媒體相關API 523 
14.1 video元素與audio元素的基礎知識524 
14.2屬性526 
14.3方法530 
14.4事件533 
下冊
第15章CSS 3概述1 
15.1概要介紹1 
15.1.1 CSS 3是什麼1 
15.1.2 CSS 3的歷史2 
15.2使用CSS 3能做什麼2 
15.2.1模塊與模塊化結構2 
15.2.2一個簡單的CSS 3示例4
第16章選擇器7 
16.1選擇器概述8 
16.2屬性選擇器9 
16.2.1屬性選擇器概述9 
16.2.2 CSS 3中的屬性選擇器11 
16.2.3靈活運用屬性選擇器12 
16.3結構性偽類選擇器13 
16.3.1 CSS中的偽類選擇器及偽元素13 
16.3.2選擇器root、not、empty和target 18 
16.3.3選擇器first-child、last-child、nth-child和nth-last- child 22 
16.3.4選擇器nth-of-type和nth- last-of-type 27 
16.3.5循環使用樣式30 
16.3.6 only-child選擇器32 
16.4 UI元素狀態偽類選擇器33 
16.4.1偽類選擇器E:hover、E:active和E:focus 34 
16.4.2偽類選擇器E:enabled與E:disabled 36 
16.4.3偽類選擇器E:read-only與E:read-write 37 
16.4 .4偽類選擇器E:checked、E:default和E:indeterminate 38 
16.4.5偽類選擇器E::selection 41 
16.4.6偽類選擇器E:invalid與E:valid 43
16.4.7偽類選擇器E:required與E:optional 44 
16.4.8偽類選擇器E:in-range與E:out-of-range 44 
16.5通用兄弟元素選擇器45 
第17章使用選擇器在頁面中插入內容47 
17.1使用選擇器來插入文字47 
17.1.1使用選擇器來插入內容47 
17.1.2指定個別元素不進行插入49 
17.2插入圖像文件50 
17.2.1在標題前插入圖像文件50 
17.2. 2插入圖像文件的好處51 
17.2.3將alt屬性的值作為圖像的標題來顯示53 
17.3使用content屬性來插入項目編號53 
17.3.1在多個標題前加上連續編號54 
17.3.2在項目編號中追加文字55 
17.3.3指定編號的樣式55 
17.3.4指定編號的種類56 
17.3.5編號嵌套56 
17.3.6中編號中嵌入大編號58 
17.3.7在字符串兩邊添加嵌套文字符號59 
第18章文字與字體相關樣式62 
18.1給文字添加陰影—text-shadow屬性62 
18.1.1 text-shadow屬性的使用方法62 
18.1.2位移距離64
18.1.3陰影的模糊半徑65 
18.1.4陰影的顏色65 
18.1.5指定多個陰影66 
18.2讓文本自動換行—word-break屬性66 
18.2.1依靠瀏覽器讓文本自動換行67 
18.2.2指定自動換行的處理方法67 
18.3讓長單詞與URL地址自動換行—word-wrap屬性69 
18.4指定用戶是否可選取文字的user-select屬性69 
18.5使用服務器端字體—Web Font與@font-face屬性70 
18.5. 1在網頁上顯示服務器端字體71 
18.5.2定義斜體或粗體字體72 
18.5.3顯示客戶端本地的字體74 
18.5.4屬性值的指定76 
18.6修改字體種類而保持字體尺寸不變—font- size-adjust屬性77 
18.6.1字體不同導致文字大小的不同77 
18.6.2 font-size-adjust屬性的使用方法78 
18.6.3瀏覽器對於aspect值的計算方法78 
18.6.4 font-size-adjust屬性的使用示例79 
18.7使用rem單位定義字體大小80 
第19章盒相關樣式82 
19.1盒的類型82 
19.1.1盒的基本類型82
19.1.2 inline-block類型84 
19.1.3 inline-table類型91 
19.1.4 list-item類型93 
19.1.5 run-in類型與compact類型94 
19.1.6表格相關類型95 
19.1.7 none類型97 
19.1. 8各種瀏覽器對於各種盒類型的支持情況98 
19.2對於盒中容納不下的內容的顯示99 
19.2.1 overflow屬性99 
19.2.2 overflow-x屬性與overflow-y屬性102 
19.2.3 text-overflow屬性103 
19.3對盒使用陰影105 
19.3.1 box-shadow屬性的使用方法105 
19.3.2將參數設定為0 105 
19.3.3創建盒內陰影107 
19.3.4對盒內子元素使用陰影107 
19.3.5對第一個文字或第一行使用陰影108 
19.3.6對錶格及單元格使用陰影109 
19.4指定針對元素的寬度與高度的計算方法110 
19.4.1 box-sizing屬性110 
19.4.2為什麼要使用box -sizing屬性113 
第20章背景與邊框相關樣式115
20.1與背景相關的新增屬性115 
20.1.1指定背景的顯示範圍—background-clip屬性116 
20.1.2指定背景圖像的繪製起點—background-origin屬性118 
20.1.3指定背景圖像的尺寸—background-size屬性120 
20.1.4新增的用於平鋪背景圖像的選項—space與round 124 
20.2在一個元素中顯示多個背景圖像126 
20.3使用漸變色背景127 
20.3.1繪製線性漸變127 
20.3.2繪製放射性漸變130 
20.4圓角邊框的繪製133 
20.4.1 border-radius屬性134 
20.4.2在border-radius屬性中指定兩個半徑134 
20.4.3不顯示邊框的時候135 
20.4.4修改邊框種類的時候136 
20.4 .5繪製四個角不同半徑的圓角邊框136 
20.5使用圖像邊框136 
20.5.1 border-image屬性136 
20.5.2 border-image屬性的最簡單的使用方法138 
20.5.3使用border-image屬性來指定邊框寬度139 
20.5.4指定4條邊中圖像的顯示方法140 
20.5.5使用背景圖像143
第21章CSS 3中的變形處理145 
21.1 transform功能的基礎知識145 
21.1.1如何使用transform功能145 
21.1.2 transform功能的分類146 
21.2對一個元素使用多種變形151 
21.2.1對一個元素使用多種變形的方法151 
21.2.2指定變形的基準點154 
21.3使用3D變形功能156 
21.3.1 3D變形功能概述156 
21.3.2實現3D變形功能157 
21.4變形矩陣165 
21.4.1矩陣概述165 
21.4.2變形與坐標系統166 
21.4.3計算2D變形166 
21.4.4計算3D變形168 
21.4.5通過矩陣執行多重變形處理169 
第22章CSS 3中的動畫功能172 
22.1 Transitions功能173 
22.1.1 Transitions功能的使用方法173 
22.1.2使用Transitions功能同時平滑過渡多個屬性值174 
22.2 Animations功能177 
22.2.1 Animations功能的使用方法177 
22.2.2實現多個屬性值同時改變的動畫180
22.2.3實現動畫的方法183 
22.2.4實現網頁的淡入效果184 
22.3 Web Animations API 185 
22.3.1 Web Animations API的基本概念185 
22.3.2 Web Animations API的使用示例186 
22.3.3控制動畫播放190 
第23章佈局相關樣式194 
23.1多欄佈局195 
23.1.1使用float屬性或position屬性的缺點195 
23.1.2使用多欄佈局方式196 
23.2盒佈局202 
23.2.1使用float屬性或position屬性時的缺點202 
23.2 .2使用盒佈局204 
23.2.3盒佈局與多欄佈局的區別205 
23.3彈性盒佈局206 
23.3.1對多個元素使用flex屬性206 
23.3.2改變元素的顯示順序208 
23.3.3改變元素的排列方向209 
23.3.4元素寬度與高度的自適應210 
23.3.5使用彈性盒佈局來消除空白213 
23.3.6對多個元素使用flex屬性214 
23.3.7控制換行方式221 
23.3.8指定水平方向與垂直方向的對齊方式224
23.4網格佈局236 
23.4.1網格佈局概述236 
23.4.2定義網格佈局237 
23.4.3命名網格線241 
23.4.4使用區域243 
23.5 calc方法247 
23.5.1 calc方法概述247 
23.5.2 calc方法使用示例247 
第24章媒體查詢表達式與特性查詢表達式249 
24.1媒體查詢表達式250 
24.1.1根據瀏覽器的窗口大小來選擇使用不同的樣式250 
24.1.2在iPhone中的顯示254 
24.1. 3媒體查詢表達式的使用方法255 
24.2特性查詢表達式257 
第25章CSS 3的其他重要樣式和屬性260 
25.1顏色相關樣式260 
25.1.1利用alpha通道來設定顏色261 
25.1.2 alpha通道與opacity屬性的區別263 
25.1.3指定顏色值為transparent 265 
25.2用戶界面相關樣式266 
25.2.1輪廓相關樣式267 
25.2.2 resize屬性269 
25.3使用initial屬性值取消對元素的樣式指定270 
25.3.1取消對元素的樣式指定270
25.3.2使用initial屬性值並不等於取消樣式設定的特例272 
25.4用於控制鼠標事件的pointer-events屬性273 
25.5實現CSS 3中的濾鏡特效274 
25.5.1濾鏡特效概述274 
25.5.2實現濾鏡特效275 
25.6 CSS變量284 
25.6.1 CSS變量的基本概念284 
25.6.2 CSS變量的定義方法284 
25.6.3 CSS變量的繼承285 
25.6.4使用var函數286 
25.6.5在JavaScript腳本代碼中使用CSS變量289 
第26章綜合實例291 
26.1實例概述291 
26.2 HTML 5頁面代碼分析292 
26.3 CSS 3樣式代碼分析295 
26.4 JavaScript腳本代碼分析299 
26.4.1保存與讀取本地數據庫中數據300 
26.4.2使用Fetch API讀取服務器端數據及提交數據到服務器端306 
26.4.3保存與讀取LocalStorage中數據308 
26.4.4頁面完整腳本代碼309