《HTML 5與CSS 3 權威指南（第4版·上冊）》 —2.2 新增的元素和廢除的元素
546
2025-03-31
《HTML 5與CSS 3 權威指南（第4版·上冊）》
Web開發技術叢書
html 5與CSS 3 權威指南
（第4版·上冊）
陸凌牛著
Preface前 言
為何寫作本書？
如果要盤點2010年IT屆的十大熱門技術，云計算、移動開發、物聯網等無疑會在其中，html 5肯定也是少不了的。2010年，隨著HTML 5的迅猛發展，各大瀏覽器開發公司（如Google、微軟、蘋果、Mozilla和Opera）的瀏覽器開發業務都變得異常繁忙。在整個2010年度，無論是Mozilla的Firefox、Google的 Chrome、蘋果的Safari、微軟的Internet Explorer，還是歐普拉的Opera都處于不斷推陳出新的狀態當中。
2010年3月，在微軟的MIX2010大會上，微軟的工程師在介紹Internet Explorer 9瀏覽器的同時，還從前端技術的角度把互聯網的發展分為了三個階段：
第一階段：Web 1.0的以內容為主的網絡，前端主流技術是HTML和CSS；
第二階段：Web 2.0的Ajax應用，熱門技術是JavaScript、DOM、異步數據請求；
第三階段：即將迎來的HTML 5時代，亮點是富圖形和富媒體內容（Graphically-Rich and Media-Rich）。
前端技術將進入一個嶄新的時代，至少已經開啟了這扇門。
在這種局勢下，學習HTML 5無疑成為Web開發者的一大重要任務，誰先學會HTML 5，誰就掌握了邁向未來Web平臺的方向。因此，我希望能夠借助本書幫助國內的Web開發者更好地學習HTML 5以及與之相伴的CSS 3技術，使大家能夠早日運用這些技術開發出一個具有現代水平的、在未來的Web平臺上能夠正常運行的Web網站或Web應用程序。
第4版與第3版的區別
自2016年上半年本書第3版出版以來，一直受到廣大讀者的歡迎，筆者在這里首先感謝廣大讀者的支持。自本書第3版出版之后，HTML 5與CSS 3標準不斷發展，2016年11月，W3C發布HTML 5.1版本；2017年12月，W3C發布HTML 5.2版本。各主流瀏覽器也以最快的速度對HTML 5中各種最新公布的API提供了支持，其中包括對ECMA Script 2015以上版本的支持、對indexedDB 2.0版本的支持、對Fetch API的支持、改用Service Worker對離線應用程序提供支持、對BroadcastChannel API的支持、對Web組件模塊（其中包括HTML模塊、Shadow DOM、自定義元素、HTML導入）的支持、對Web Animations API的支持等。因此，本書第4版以第3版的內容為基礎，添加2016年上半年到2018年上半年之間HTML 5中新增的各種元素及API，同時更新各主流瀏覽器CSS 3的最新支持情況，以使讀者能夠學到HTML 5與CSS 3標準中的各種知識，了解各種最新的瀏覽器中對HTML 5與CSS 3標準的最新支持情況，以幫助讀者能夠早日將這些新的知識打造成一個HTML 5時代的功能強大的Web網站或Web應用程序。
具體來說，第4版在第3版的基礎上，做出的主要修改如下所示：
第2章“HTML5與HTML4的區別”中刪除在HTML 5.1中被移除的元素。
新增第5章“ECMAScript中的新增功能”。
第7章“本地存儲”（原書中第8章）中新增indexedDB 2.0部分。
第8章“擴展的XMLHttpRequest API”（原書中第13章）修改為第8章“擴展的XMLHttpRequest API及Fetch API”，新增8.4節“使用Fetch API”。
新增第10章“使用Service Worker實現離線應用程序”。
第11章“通信API”中新增11.4節“BroadcastChannel API”。
新增第12章“Web組件”。
第13章“繪制圖形” （原書中第5章）中新增13.9.3節“將canvas元素中的圖像轉換為Blob對象”與13.9.5節“解碼圖像”。
第18章“文字與字體相關樣式”中新增18.4節“指定用戶是否可選取文字的user-select屬性”。
第22章“CSS3中的動畫功能”中新增22.3節“Web Animations API”。
第23章“布局相關樣式”中新增23.4節“網格布局”。
第24章“Media Queries相關樣式”一章修改為第24章“媒體查詢表達式與特性查詢表達式”，新增24.2節“特性查詢表達式”。
第25章“CSS 3的其他重要樣式和屬性”中新增25.4節“用于控制鼠標事件的pointer-events屬性”與25.6節“CSS變量”。
本書面向的讀者
本書主要適合如下人群閱讀：
具有一定基礎的Web前端開發工程師
具有一定美術功底的Web前端設計師和UI設計師
Web項目的管理人員
開設了Web開發等相關專業的高等院校師生和相關培訓機構的學員及教師
如何閱讀本書
本書從邏輯上共分為三個部分：
第一部分（第1～14章） 對HTML 5中新增的語法與標記方法、新增的元素、新增的API以及到本書截稿時這些元素與API得到哪些瀏覽器的支持等進行了詳細介紹。在對它們進行介紹的同時將其與HTML 4中的各種元素與功能進行了對比，以幫助讀者更好地理解為什么需要使用HTML 5、使用HTML 5有什么好處、HTML 5中究竟增加了哪些目前HTML 4不具備而在第三代Web平臺上將會起到重要作用的功能與API，以及這些功能與API的詳細使用方法。
第二部分（第15～25章） 詳細介紹了CSS 3中的各種新增樣式與屬性，其中主要包括CSS 3中的各種選擇器、文字與字體、背景與邊框、各種盒模型、CSS 3中的布局方式、CSS 3中的變形與動畫、CSS 3中與媒體類型相關的一些樣式與屬性等。在介紹的同時也詳細講述了到本書截稿時這些樣式與屬性得到哪些瀏覽器的支持，以及針對各種瀏覽器應該怎樣在樣式代碼中進行各種屬性的正確書寫。
第三部分（第26章） 詳細講解了一個實例，該實例展示了如何使用HTML 5中新增的表單元素、如何讀取本地數據庫中的數據、如何保存數據到本地數據庫、如何使用Fetch API讀取服務器端的數據及提交數據到服務器端并處理服務器端響應、如何保存數據到LocalStorage及從LocalStorage讀取保存后的數據，從而實現一個具有現代風格的Web應用程序，以及如何在這個由HTML 5語言及其功能編寫而成的Web應用程序中綜合使用CSS 3樣式來完成頁面的布局以及視覺效果的美化工作。
全書一共有300多個代碼示例，每個代碼示例都經過筆者上機實踐，確保運行結果正確無誤。每個代碼示例的詳細代碼及其用到的腳本文件、各種資源文件都可在華章公司的官方網站（www.hzbook.com）本書的頁面上下載，因為是用HTML 5編寫的網頁，所以這些文件可直接在各種瀏覽器中打開并查看運行結果。少量頁面需要首先建立網站，然后通過訪問網站中該頁面的方式來進行查看，少量頁面使用服務器端PHP腳本語言，可在Apache服務器中運行。書中詳細介紹了對HTML 5中的各種元素、各種API和CSS 3中的各種屬性和樣式提供支持的瀏覽器，讀者可以針對不同的頁面選擇正確的瀏覽器來查看其正確的運行結果。
致謝
在本書的寫作過程中，策劃編輯楊福川先生和李藝女士給予了很大的幫助和支持，并提出了很多中肯的建議，在此表示感謝。同時，還要感謝機械工業出版社的所有編審人員為本書的出版所付出的辛勤勞動。本書的成功出版是大家共同努力的結果，謝謝你們。
Contents目 錄
前言
上冊
第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
css HTML5 html
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
