第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
· · · · · · (
收起)
1 有用 NPC 2025-01-19 12:48:52 北京
如果要做SEO或者无障碍的话还是蛮值得读的
0 有用 wit 2025-06-13 11:15:33 湖北
看完之后发现HTML确实不简单。
0 有用 xxx 2024-07-31 15:47:43 北京
张大牛提供知识的角度还是这么独特