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＞元素的定制功能 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