HTML并不簡(jiǎn)單：Web前端開(kāi)發(fā)精進(jìn)秘籍

目 錄
第1章　正確認(rèn)識(shí)HTML 1
1.1　HTML并不簡(jiǎn)單 1
1.1.1　門檻低不等于簡(jiǎn)單 1
1.1.2　得心應(yīng)手帶來(lái)的雙刃劍 2
1.1.3　依賴路徑并非最優(yōu)解 2
1.1.4　社區(qū)環(huán)境與學(xué)習(xí)資源 3
1.2　精通HTML有什么用 3
第2章　看似普通的元素的背后 6
2.1　你不知道的＜a＞元素 6
2.1.1　rel屬性知多少 6
2.1.2　你知道target的這個(gè)特性嗎 14
2.1.3　實(shí)用的download屬性 15
2.1.4　看看ping屬性的妙用 17
2.1.5　好好講一下referrerpolicy屬性 20
2.1.6　href屬性的背后也有細(xì)節(jié)知識(shí) 23
2.1.7　為何＜base＞元素?zé)o人問(wèn)津 26
2.1.8　如何實(shí)現(xiàn)鏈接元素的嵌套 27
2.2　重新認(rèn)識(shí)列表元素 31
2.2.1　無(wú)序列表元素除＜ul＞外還有其他的 31
2.2.2?。紀(jì)l＞元素額外支持的那些屬性 32
2.2.3　定義列表的特點(diǎn) 35
2.3　正確認(rèn)識(shí)＜body＞元素和＜html＞元素 38
2.3.1　難以名狀的關(guān)聯(lián)性 38
2.3.2　桌面端和移動(dòng)端的差異 43
第3章　那些自帶交互特征的HTML元素 44
3.1　非常實(shí)用的＜details＞元素 44
3.1.1　黃金搭檔＜summary＞元素 44
3.1.2　樣式的自定義 46
3.1.3　實(shí)際使用案例示意 48
3.1.4　全新的name屬性與手風(fēng)琴效果 51
3.2　深入了解＜dialog＞元素和popover屬性 52
3.2.1　＜dialog＞元素的基本特性 52
3.2.2?。糳ialog＞元素的不可替代性 53
3.2.3　原生彈層與popover屬性 63
3.3　控件伴侶＜label＞元素 67
3.3.1　＜label＞元素的價(jià)值所在 67
3.3.2　必學(xué)的單選按鈕、復(fù)選框技術(shù) 71
3.4　什么時(shí)候使用＜fieldset＞元素和＜legend＞元素 73
3.4.1　表單分組與＜fieldset＞元素的使用 73
3.4.2　特殊且唯一的邊框樣式 75
3.4.3?。糵ieldset＞元素的獨(dú)家功能 76
3.5　務(wù)必使用＜progress＞元素實(shí)現(xiàn)進(jìn)度條 77
3.5.1?。紁rogress＞元素的基本特性 78
3.5.2　＜progress＞元素的樣式自定義 79
3.6　務(wù)必使用＜meter＞元素顯示密碼強(qiáng)度 80
3.6.1?。糾eter＞元素的基本特性 81
3.6.2?。糾eter＞元素的美化技巧 83
第4章　經(jīng)常出現(xiàn)在頁(yè)面首尾的HTML元素 87
4.1　幾萬(wàn)字都講不完的＜meta＞元素 87
4.1.1　SEO最重要的元素之一 88
4.1.2　網(wǎng)頁(yè)尺寸設(shè)置 91
4.1.3　referrer設(shè)置與防盜圖片顯示 93
4.1.4　網(wǎng)站風(fēng)格和主題色的設(shè)置 94
4.2　同樣知識(shí)非常密集的＜link＞元素 97
4.2.1　favicon小圖標(biāo)的設(shè)置與顯示 97
4.2.2　網(wǎng)站換膚的最佳實(shí)現(xiàn) 100
4.2.3　資源的預(yù)加載 102
4.3　相對(duì)簡(jiǎn)單的＜style＞元素 110
4.3.1　廢棄的type屬性 111
4.3.2　局部樣式特性 111
4.4　＜script＞元素的水很深 113
4.4.1　async屬性和defer屬性的區(qū)別 113
4.4.2　不太一般的type屬性 114
4.4.3　靈活運(yùn)用Import Maps 118
4.4.4　nonce、integrity屬性與腳本安全 121
4.4.5　＜noscript＞元素有必要使用嗎 125
第5章　語(yǔ)義化與使用場(chǎng)景 126
5.1　頁(yè)面整體布局結(jié)構(gòu)的塑造 127
5.1.1?。糷eader＞元素和＜footer＞元素的使用變化 127
5.1.2?。糰side＞元素和＜main＞元素的結(jié)構(gòu)關(guān)系 129
5.1.3?。糿av＞元素的使用場(chǎng)景 130
5.1.4　萬(wàn)能的＜section＞元素 131
5.2　文檔結(jié)構(gòu)信息的標(biāo)簽使用 132
5.2.1　比＜section＞元素更高一級(jí)的＜article＞元素 132
5.2.2?。糷1＞～＜h6＞元素及＜hgroup＞元素的使用規(guī)則 133
5.2.3　引用元素＜blockquote＞、＜q＞和＜cite＞的區(qū)別 136
5.2.4?。糹＞元素和＜b＞元素為何起死回生？＜em＞元素和＜strong＞元素
都是強(qiáng)調(diào)嗎 138
5.2.5　為何＜small＞元素被保留但＜big＞元素被廢棄了 141
5.2.6?。糳el＞元素和＜s＞元素、＜ins＞元素的關(guān)系 141
5.2.7　養(yǎng)成使用＜time＞元素表示日期的習(xí)慣 143
5.2.8　搜索高亮必用元素＜mark＞ 144
5.3　那些你不了解卻有用的內(nèi)聯(lián)元素 144
5.3.1　超過(guò)一半的＜span＞元素可以換成＜data＞元素 145
5.3.2　上標(biāo)＜sup＞元素和下標(biāo)＜sub＞元素與公式排版 146
5.3.3?。糳fn＞元素和＜abbr＞元素的使用場(chǎng)景 147
5.3.4?。糲ode＞元素、＜kbd＞元素、＜var＞元素和＜samp＞元素各自的語(yǔ)義 149
5.4　與內(nèi)容無(wú)關(guān)的語(yǔ)義化元素 151
5.4.1　
元素和＜wbr＞元素的區(qū)別 152
5.4.2　可以玩出花的＜hr＞元素 153
第6章　富媒體資源元素 156
6.1　深入圖像元素 156
6.1.1　了解＜svg＞元素 156
6.1.2?。糲anvas＞元素的基本特性 165
6.1.3　專為圖像顯示設(shè)計(jì)的＜figure＞元素和＜figcaption＞元素 170
6.1.4　srcset、sizes等屬性與響應(yīng)式圖片開(kāi)發(fā) 171
6.1.5　實(shí)用卻不常用的＜picture＞元素 176
6.1.6　聊聊loading="lazy"懶加載 179
6.1.7　crossOrigin與跨域處理 181
6.1.8　使用elementtiming屬性知曉圖片的加載時(shí)長(zhǎng) 183
6.2　快速上手音視頻開(kāi)發(fā) 185
6.2.1?。糰udio＞元素的常用應(yīng)用指南 186
6.2.2?。紇ideo＞元素的常用應(yīng)用指南 188
6.2.3　聊聊音視頻的自動(dòng)播放 194
6.2.4　解密倍速播放的實(shí)現(xiàn) 195
6.2.5　視頻的畫(huà)中畫(huà)技術(shù) 196
6.2.6?。紅rack＞元素與WebVTT字幕的顯示 198
第7章　龐雜的表單控件元素 204
7.1　先從元素說(shuō)起 206
7.1.1　＜form＞元素的行為與特征 206
7.1.2　并不簡(jiǎn)單的＜button＞按鈕 217
7.1.3　好好了解一下＜select＞下拉框 219
7.1.4?。紅extarea＞元素的精華與糟粕 226
7.1.5　單選按鈕、復(fù)選框行為與應(yīng)用 230
7.1.6　file類型輸入框的隱藏知識(shí) 233
7.1.7　時(shí)間日期選擇框速覽 238
7.1.8　范圍選擇控件的高級(jí)應(yīng)用 241
7.1.9?。糳atalist＞元素與列表內(nèi)容的選擇 243
7.2　表單體系中的那些HTML屬性們 247
7.2.1　表單中的name屬性與行為 247
7.2.2　深入講講autocomplete屬性 250
7.2.3　表單驗(yàn)證屬性及方法 256
第8章　深入表格 263
8.1?。紅able＞元素的基本特性 265
8.1.1　深入固定分配尺寸與彈性尺寸規(guī)則 265
8.1.2　間隙的分離與合并規(guī)則 273
8.2　專為表格而生的標(biāo)題元素＜caption＞ 278
8.2.1　罕見(jiàn)的脫離渲染特性 278
8.2.2　最早的渲染位置可定義元素 280
8.3?。紅d＞元素和＜th＞元素的特性與應(yīng)用 281
8.3.1　匿名表格元素創(chuàng)建規(guī)則 281
8.3.2　單元格合并的實(shí)現(xiàn) 283
8.4　了解＜col＞元素和＜colgroup＞元素的作用 285
第9章　無(wú)障礙訪問(wèn) 289
9.1　鍵盤的無(wú)障礙訪問(wèn) 289
9.1.1　務(wù)必了解的tabindex屬性 290
9.1.2　深入了解快捷鍵設(shè)置屬性accesskey 291
9.2　屏幕閱讀無(wú)障礙訪問(wèn) 294
9.2.1　盡可能使用原生元素和屬性 294
9.2.2　系統(tǒng)介紹ARIA規(guī)范屬性 296
9.3　iOS、Android虛擬鍵盤設(shè)置 316
9.3.1　enterkeyhint屬性與確認(rèn)按鈕文案的自定義設(shè)置 316
9.3.2　使用inputmode屬性設(shè)置虛擬鍵盤的輸入模式 319
9.3.3　virtualkeyboardpolicy屬性的作用是什么 320
9.3.4　autocapitalize全局屬性與首字母大寫的設(shè)置 321
第10章　Web Components開(kāi)發(fā) 323
10.1　自定義元素和未知元素 323
10.2　詳細(xì)了解＜template＞元素 326
10.3　深入介紹＜slot＞元素 327
10.3.1　了解Shadow DOM 328
10.3.2　＜slot＞元素的匹配細(xì)節(jié) 330
10.3.3?。約lot＞元素中的事件 332
10.3.4　特殊的display計(jì)算值與樣式設(shè)置 334
10.4　了解part屬性和exportparts屬性 335
10.4.1　更常用的part屬性 335
10.4.2　嵌套組件解決方案exportparts屬性 336
10.5　后起之秀is屬性 338
第11章　結(jié)構(gòu)化微數(shù)據(jù)語(yǔ)言簡(jiǎn)介 340
11.1　提要詞匯表 343
11.2　itemscope、itemtype、itemprop等屬性簡(jiǎn)介 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語(yǔ)言簡(jiǎn)介 350
12.1　按類別分類的MathML表現(xiàn)元素 350
12.2　語(yǔ)義注釋相關(guān)的MathML元素 361
第13章　SMIL語(yǔ)言簡(jiǎn)介 363
13.1　SVG語(yǔ)言簡(jiǎn)介 364
13.2　SVG SMIL動(dòng)畫(huà)詳解 366
13.2.1　SVG SMIL動(dòng)畫(huà)元素介紹 366
13.2.2　SVG SMIL動(dòng)畫(huà)參數(shù)詳解 370