內容簡介
《HTML並不簡單：Web前端開發精進秘籍》凝結了作者多年對HTML 鑽研與實踐的研究成果，旨在為前端開發人員，尤其是新人，提供有價值的參考，並值得反複閱讀。本書深入細節以HTML 為索引對Web 前端開發知識進行係統、全麵的講解，書中介紹了大量前端開發人員不知道，但非常重要、好用的知識點。本書還配備專門的網站用於實例展示。
這是一本深度講解HTML 的圖書，通過閱讀本書，讀者會對HTML 有一個全新的認識。其實HTML 並不簡單，精通HTML 會助你成為真正的Web 開發高手，實現“有他人不能有之效率，解他人不能解之難題”。
作者簡介
張鑫旭，前端開發工程師，國內知名前端博客“鑫空間-鑫生活”博主，目前就職於閱文集團前端技術中心，擔任前端技術專家，是目前公司專業級別最高的技術人員之一。2007年開始接觸前端，17年來一直奮鬥在前端一線，在HTML、CSS等與交互體驗關係密切的領域花了大量的時間學習和研究，有比較多的心得體會。
目錄
第1章正確認識HTML···········11.1HTML並不簡單··········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.1rel屬性知多少····6
2.1.2你知道target的這個特性嗎················14
2.1.3實用的download屬性·······················15
2.1.4看看ping屬性的妙用························17
2.1.5好好講一下referrerpolicy屬性············20
2.1.6href屬性的背後也有細節知識·············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>元素的獨家功能··················77
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.1SEO最重要的元素之一·····················88
4.1.2網頁尺寸設置···91
4.1.3referrer設置與防盜圖片顯示···············93
4.1.4網站風格和主題色的設置···················94
4.2知識同樣非常密集的<link>元素···················97
4.2.1favicon小圖標的設置與顯示···············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.1async屬性和defer屬性的區別···········113
4.4.2不太一般的type屬性·······················114
4.4.3靈活運用ImportMaps······················118
4.4.4nonce、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<br>元素和<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.4srcset、sizes等屬性與響應式圖片開發·171
6.1.5實用卻不常用的<picture>元素············176
6.1.6聊聊loading="lazy"（懶加載）···········179
6.1.7crossOrigin與跨域處理·····················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.6file類型輸入框的隱藏知識················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.3iOS、Android虛擬鍵盤設置·······················316
9.3.1enterkeyhint屬性與確認按鈕文案的自定義設置·····················316
9.3.2使用inputmode屬性設置虛擬鍵盤的輸入模式······················319
9.3.3virtualkeyboardpolicy屬性的作用········320
9.3.4autocapitalize全局屬性與首字母大寫的設置·························321
第10章WebComponents開發····························323
10.1自定義元素和未知元素····························323
10.2詳細了解<template>元素··························326
10.3深入介紹<slot>元素·327
10.3.1了解ShadowDOM·························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.2itemid、itemscope、itemtype等屬性簡介······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.1SVG語言簡介········364
13.2SVGSMIL動畫詳解366
13.2.1SVGSMIL動畫元素介紹················366
13.2.2SVGSMIL動畫屬性詳解················370
······
最後修改：2025 年 01 月 31 日
© 允許規範轉載