《HTML並不簡單：Web前端開發精進秘籍》是2024年電子工業出版社出版的圖書，作者是張鑫旭。
基本介紹
- 中文名：HTML並不簡單：Web前端開發精進秘籍
- 作者：張鑫旭
- 出版時間：2024年7月
- 出版社：電子工業出版社
- 頁數：392 頁
- ISBN：9787121480485
- 定價：109.00 元
- 開本：16 開
內容簡介,圖書目錄,作者簡介,
內容簡介
《HTML並不簡單：Web前端開發精進秘籍》凝結了作者多年對HTML 鑽研與實踐的研究成果，旨在為前端開發人員，尤其是新人，提供有價值的參考，並值得反覆閱讀。本書深入細節以HTML 為索引對Web 前端開發知識進行系統、全面的講解，書中介紹了大量前端開發人員不知道，但非常重要、好用的知識點。本書還配備專門的網站用於實例展示。
這是一本深度講解HTML 的圖書，通過閱讀本書，讀者會對HTML 有一個全新的認識。其實HTML 並不簡單，精通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>元素的獨家功能 ·················· 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.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 <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.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 itemid、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.1 SVG 語言簡介 ········ 364
13.2 SVG SMIL 動畫詳解 366
13.2.1 SVG SMIL 動畫元素介紹 ················ 366
13.2.2 SVG SMIL 動畫屬性詳解 ················ 370
