HTML並不簡單：Web前端開發精進秘籍

第1章　正確認識HTML 1
1.1　HTML並不簡單 1
1.1.1　門檻低不等於簡單 1
1.1.2　得心應手帶來的雙刃劍 2
1.1.3　依賴路徑並非最優解 2
1.1.4　社區環境與學習資源 3
1.2　精通HTML有什麼用 3

第2章　看似普通的元素的背後 6
2.1　你不知道的＜a＞元素 6
2.1.1　rel屬性知多少 6
2.1.2　你知道target的這個特性嗎 14
2.1.3　實用的download屬性 15
2.1.4　看看ping屬性的妙用 17
2.1.5　好好講一下referrerpolicy屬性 20
2.1.6　href屬性的背後也有細節知識 23
2.1.7　為何＜base＞元素無人問津 26
2.1.8　如何實現鏈接元素的嵌套 27
2.2　重新認識列表元素 31
2.2.1　無序列表元素除＜ul＞外還有其他的 31
2.2.2　＜ol＞元素額外支持的那些屬性 32
2.2.3　定義列表的特點 35
2.3　正確認識＜body＞元素和＜html＞元素 38
2.3.1　難以名狀的關聯性 38
2.3.2　桌面端和移動端的差異 43

第3章　那些自帶交互特徵的HTML元素 44
3.1　非常實用的＜details＞元素 44
3.1.1　黃金搭檔＜summary＞元素 44
3.1.2　樣式的自定義 46
3.1.3　實際使用案例示意 48
3.1.4　全新的name屬性與手風琴效果 51
3.2　深入瞭解＜dialog＞元素和popover屬性 52
3.2.1　＜dialog＞元素的基本特性 52
3.2.2　＜dialog＞元素的不可替代性 53
3.2.3　原生彈層與popover屬性 63
3.3　控件伴侶＜label＞元素 67
3.3.1　＜label＞元素的價值所在 67
3.3.2　必學的單選按鈕、複選框技術 71
3.4　什麼時候使用＜fieldset＞元素和＜legend＞元素 73
3.4.1　表單分組與＜fieldset＞元素的使用 73
3.4.2　特殊且唯一的邊框樣式 75
3.4.3　＜fieldset＞元素的獨家功能 76
3.5　務必使用＜progress＞元素實現進度條 77
3.5.1　＜progress＞元素的基本特性 78
3.5.2　＜progress＞元素的樣式自定義 79
3.6　務必使用＜meter＞元素顯示密碼強度 80
3.6.1　＜meter＞元素的基本特性 81
3.6.2　＜meter＞元素的美化技巧 83

第4章　經常出現在頁面首尾的HTML元素 87
4.1　幾萬字都講不完的＜meta＞元素 87
4.1.1　SEO最重要的元素之一 88
4.1.2　網頁尺寸設置 91
4.1.3　referrer設置與防盜圖片顯示 93
4.1.4　網站風格和主題色的設置 94
4.2　同樣知識非常密集的＜link＞元素 97
4.2.1　favicon小圖標的設置與顯示 97
4.2.2　網站換膚的最佳實現 100
4.2.3　資源的預加載 102
4.3　相對簡單的＜style＞元素 110
4.3.1　廢棄的type屬性 111
4.3.2　局部樣式特性 111
4.4　＜script＞元素的水很深 113
4.4.1　async屬性和defer屬性的區別 113
4.4.2　不太一般的type屬性 114
4.4.3　靈活運用Import Maps 118
4.4.4　nonce、integrity屬性與腳本安全 121
4.4.5　＜noscript＞元素有必要使用嗎 125

第5章　語義化與使用場景 126
5.1　頁面整體佈局結構的塑造 127
5.1.1　＜header＞元素和＜footer＞元素的使用變化 127
5.1.2　＜aside＞元素和＜main＞元素的結構關係 129
5.1.3　＜nav＞元素的使用場景 130
5.1.4　萬能的＜section＞元素 131
5.2　文檔結構信息的標簽使用 132
5.2.1　比＜section＞元素更高一級的＜article＞元素 132
5.2.2　＜h1＞～＜h6＞元素及＜hgroup＞元素的使用規則 133
5.2.3　引用元素＜blockquote＞、＜q＞和＜cite＞的區別 136
5.2.4　＜i＞元素和＜b＞元素為何起死回生？＜em＞元素和＜strong＞元素都是強調嗎 138
5.2.5　為何＜small＞元素被保留但＜big＞元素被廢棄了 141
5.2.6　＜del＞元素和＜s＞元素、＜ins＞元素的關係 141
5.2.7　養成使用＜time＞元素表示日期的習慣 143
5.2.8　搜索高亮必用元素＜mark＞ 144
5.3　那些你不瞭解卻有用的內聯元素 144
5.3.1　超過一半的＜span＞元素可以換成＜data＞元素 145
5.3.2　上標＜sup＞元素和下標＜sub＞元素與公式排版 146
5.3.3　＜dfn＞元素和＜abbr＞元素的使用場景 147
5.3.4　＜code＞元素、＜kbd＞元素、＜var＞元素和＜samp＞元素各自的語義 149
5.4　與內容無關的語義化元素 151
5.4.1元素和＜wbr＞元素的區別 152
5.4.2　可以玩出花的＜hr＞元素 153

第6章　富媒體資源元素 156
6.1　深入圖像元素 156
6.1.1　瞭解＜svg＞元素 156
6.1.2　＜canvas＞元素的基本特性 165
6.1.3　專為圖像顯示設計的＜figure＞元素和＜figcaption＞元素 170
6.1.4　srcset、sizes等屬性與響應式圖片開發 171
6.1.5　實用卻不常用的＜picture＞元素 176
6.1.6　聊聊loading="lazy"懶加載 179
6.1.7　crossOrigin與跨域處理 181
6.1.8　使用elementtiming屬性知曉圖片的加載時長 183
6.2　快速上手音視頻開發 185
6.2.1　＜audio＞元素的常用應用指南 186
6.2.2　＜video＞元素的常用應用指南 188
6.2.3　聊聊音視頻的自動播放 194
6.2.4　解密倍速播放的實現 195
6.2.5　視頻的畫中畫技術 196
6.2.6　＜track＞元素與WebVTT字幕的顯示 198

第7章　龐雜的表單控件元素 204
7.1　先從元素說起 206
7.1.1　＜form＞元素的行為與特徵 206
7.1.2　並不簡單的＜button＞按鈕 217
7.1.3　好好瞭解一下＜select＞下拉框 219
7.1.4　＜textarea＞元素的精華與糟粕 226
7.1.5　單選按鈕、複選框行為與應用 230
7.1.6　file類型輸入框的隱藏知識 233
7.1.7　時間日期選擇框速覽 238
7.1.8　範圍選擇控件的高級應用 241
7.1.9　＜datalist＞元素與列表內容的選擇 243
7.2　表單體系中的那些HTML屬性們 247
7.2.1　表單中的name屬性與行為 247
7.2.2　深入講講autocomplete屬性 250
7.2.3　表單驗證屬性及方法 256

第8章　深入表格 263
8.1　＜table＞元素的基本特性 265
8.1.1　深入固定分配尺寸與彈性尺寸規則 265
8.1.2　間隙的分離與合併規則 273
8.2　專為表格而生的標題元素＜caption＞ 278
8.2.1　罕見的脫離渲染特性 278
8.2.2　最早的渲染位置可定義元素 280
8.3　＜td＞元素和＜th＞元素的特性與應用 281
8.3.1　匿名表格元素創建規則 281
8.3.2　單元格合併的實現 283
8.4　瞭解＜col＞元素和＜colgroup＞元素的作用 285

第9章　無障礙訪問 289
9.1　鍵盤的無障礙訪問 289
9.1.1　務必瞭解的tabindex屬性 290
9.1.2　深入瞭解快捷鍵設置屬性accesskey 291
9.2　屏幕閱讀無障礙訪問 294
9.2.1　盡可能使用原生元素和屬性 294
9.2.2　系統介紹ARIA規範屬性 296
9.3　iOS、Android虛擬鍵盤設置 316
9.3.1　enterkeyhint屬性與確認按鈕文案的自定義設置 316
9.3.2　使用inputmode屬性設置虛擬鍵盤的輸入模式 319
9.3.3　virtualkeyboardpolicy屬性的作用是什麼 320
9.3.4　autocapitalize全局屬性與首字母大寫的設置 321

第10章　Web Components開發 323
10.1　自定義元素和未知元素 323
10.2　詳細瞭解＜template＞元素 326
10.3　深入介紹＜slot＞元素 327
10.3.1　瞭解Shadow DOM 328
10.3.2　＜slot＞元素的匹配細節 330
10.3.3　＜slot＞元素中的事件 332
10.3.4　特殊的display計算值與樣式設置 334
10.4　瞭解part屬性和exportparts屬性 335
10.4.1　更常用的part屬性 335
10.4.2　嵌套組件解決方案exportparts屬性 336
10.5　後起之秀is屬性 338

第11章　結構化微數據語言簡介 340
11.1　提要詞匯表 343
11.2　itemscope、itemtype、itemprop等屬性簡介 345
11.2.1　和id屬性完全不同的itemid屬性 345
11.2.2　快速瞭解itemscope屬性 347
11.2.3　快速瞭解itemtype屬性 347
11.2.4　快速瞭解itemprop屬性 347
11.2.5　有別於href的itemhref屬性 348

第12章　MathML語言簡介 350
12.1　按類別分類的MathML表現元素 350
12.2　語義注釋相關的MathML元素 361

第13章　SMIL語言簡介 363
13.1　SVG語言簡介 364
13.2　SVG SMIL動畫詳解 366
13.2.1　SVG SMIL動畫元素介紹 366
13.2.2　SVG SMIL動畫參數詳解 370