空白元素表这个词，第一次听见的时候，我也愣了一下：不就是那些看不见的标签吗？<br>、<hr>、<img>、<input>……这些在页面上不“包裹”文字、不成对闭合的小东西，偏偏常常决定了页面的呼吸感和节奏。写到后面你会发现，真正把这些东西搞明白的人，前端一般都不会太差。
一、先说清楚：什么是我心里的“空白元素表”
在标准语境里，我们会说 “空元素（void elements）”，但我个人更习惯叫它们“空白元素”。为什么？因为你把整个 空白元素表 摊开看，会发现它们有一个共同点：
- 没有成对的结束标签
- 标签内部不能再嵌套其他元素
- 多数情况下，肉眼看到的是“结果”，而不是“容器”
常见的 空白元素表 成员，大概是这些（不追求绝对教科书式，只说实战常见的）：
<br>：换行，这个大家最熟<hr>：分隔线，语义是“主题分隔”而不是装饰<img>：图片展示的入口<input>：表单输入的基础单元<meta>：头部信息、SEO、编码声明的守门员<link>：外部资源链接，最典型的就是CSS<source>：多媒体资源的不同格式源<area>：图像热点区域<col>、<base>、<embed>、<track>等等，这些在不同项目里出镜率不一
有一次带新人做代码review，我让他把项目里出现的所有空元素整理成一个自己的 空白元素表，顺便标出“出现最多的三种场景”。做完这件事之后，他的HTML基本功一夜之间就清醒了一大半。
二、空白元素表里最容易被滥用的家伙：<br> 和 <hr>
我得先吐槽一下。
很多页面打开源码，你会看到一大片：
“`html
标题
内容第一行
内容第二行
底部信息
“`
从效果上看没毛病，但从结构上看，这就像拿换行符去搭房子，怎么都感觉摇摇欲坠。
在我自己的习惯里：
<br>只用在“行内内容需要轻微换气”的地方，比如地址（收件地址分行）、诗歌、歌词、带一点文艺气息的短句。或者用户可编辑内容的保留换行。- 段落之间的距离，一律交给 CSS 的
margin或padding。 <hr>只在真的要表达“章节或主题分隔”时用，而不是为了“看起来好像有一条线比较高级”。
这就是 空白元素表 带给我的第一个教训：
能用语义解决的，就别用“视觉补丁”硬糊上去。
当你开始克制 br 和 hr 的欲望，页面结构会慢慢变得有骨骼、有层次，而不是一堆被硬拆开的句子。
三、<img>：被当成“贴图按钮”的多功能角色
在 空白元素表 里，<img> 算是“明星选手”。
很多人觉得 <img> 就是“放图的”，但实际上，真正写久了，会发现这里面有不少门道：
alt属性：- 我现在看到
<img>没alt，心里都会打个问号 - 对无障碍、屏幕阅读器、SEO 都是关键
- 懒加载（
loading="lazy"）： - 列表页图片多的时候，一行
loading="lazy"，首屏体验直接上一个台阶 - 响应式图片（
srcset、sizes）: - 移动端如果不做这一层，经常就是白白浪费流量
我以前做过一个摄影作品展示页，原本页面加载要四五秒，用户一边刷一边抱怨卡。后来我把所有 <img> 的写法重构了一遍，配合 loading="lazy" 和更合理的尺寸，加载时间直接砍半。那一刻我才意识到：空白元素表 里的这些标签，看起来“空”，但每一个都能决定用户愿不愿意耐下心看完你的内容。
四、<input>：从“一个小框”到交互的灵魂
很多入门文章会把表单讲得特别仪式感，但在我的经验里，<input> 这一个元素，就足够让你在实战中踩坑踩到怀疑人生。
在 空白元素表 中，<input> 是非常特殊的存在：
- 它是空元素——没有闭合标签
- 但它能通过
type派生出一大堆形态：text、password、email、number、checkbox、radio、file等等 - 它直接跟用户交互，直接承载业务逻辑
让我印象很深的一次，是在做注册表单：
html
<input type="email" name="email" required>
有同事嫌烦，直接写：
html
<input name="email">
结果各种脏数据往后端灌，前端还要写好多额外校验逻辑。反而用好本来就存在的字段类型和原生校验，代码精简了，用户体验也稳了。
所以我后来在项目里会特地拉一份 空白元素表 的小章节，只讲 <input> 的各类 type，怎么组合、怎么配合浏览器原生的校验提示，甚至包括移动端弹出的虚拟键盘类型。看起来是HTML的基础，但真的会影响你产品上线后的投诉率。
五、页头里的隐形主角：<meta> 与 <link>
如果说 <img> 和 <input> 是舞台上的演员，那 <meta> 和 <link> 就是后台灯光和音响。
空白元素表 里，它们存在感不强，但谁用谁知道：
<meta charset="UTF-8">：- 少了它，中文网页各种乱码，解决问题前先加上它
<meta name="viewport" content="width=device-width, initial-scale=1">：- 移动端页面不写这句，你就看着整个布局在手机里缩成一团
- SEO相关的
<meta name="description">、keywords： - 网上教程很多，但我个人更在意“描述是不是真在讲这个页面的事儿”，而不是一味堆词
再看 <link>：
- 引入 CSS：
<link rel="stylesheet" href="style.css"> - 站点图标
favicon：<link rel="icon" href="/favicon.ico"> - PWA、RSS 等等，都靠它扩展
有一次我在旧项目里翻代码，头部堆了一长串 <meta> 和 <link>，像一张没人整理过的 空白元素表 抄作业。很多标签根本没用，还互相冲突。清理完，只留真正需要的那几条，页面行为反而稳定了不少。
我的偏执点在于：不用就删，不懂就查，别迷信模板复制。 你得知道自己为什么写下这一个标签，它在你的“空白元素表”里究竟扮演什么角色。
六、写给真正愿意下功夫的人：如何把空白元素表变成肌肉记忆
如果你看到这里，还愿意继续琢磨 空白元素表，我会推荐一个很朴素、但非常有用的做法：
- 自己手写一份“私人的空白元素表”笔记。
- 不要只是列名字
-
每个标签下面写：最常见的两个场景、一个容易犯的错误。
-
在实际项目里做一次“空元素巡检”。
- 搜索
<br>、<hr>，问自己：这里是不是可以用p、margin替代？ - 搜索
<img>，检查有没有alt，是不是都懒加载了？ -
搜索
<input>，看有没有不该是text却被写成text的地方。 -
写一页完全不依赖
br的落地页。 - 用
p、h1~h6、ul、ol把结构搭清楚 - 然后用 CSS 调节行距和段落间距
- 最后只在特别需要“诗意换行”的地方加
<br>
这种刻意练习会让你对 空白元素表 有一种“肌肉层面”的熟悉感，不再只是背概念，而是知道在每个实际场景里怎么用、为什么用。
七、我对空白元素表的私心评价
如果要给 空白元素表 一个不那么标准、但很生活化的评价，我会说：
它是一群很容易被忽视的小角色，却经常悄悄决定一个页面“是不是顺眼、是否好用”。
你可以把它们当成后台工作人员，也可以把它们当成你写页面时的“微调旋钮”。
当你对 空白元素表 足够熟悉的时候：
- 再复杂的HTML结构，你也能一眼看出哪些是“骨架”，哪些是“肌理”
- 你不会再迷信所谓“神奇组件”，因为你知道所有东西最后都要落到这些基础标签上
- 你写出来的页面，哪怕样式还没完全调好，光靠结构就已经有一种“正”的感觉
这大概就是我这些年一点一点练出来的体会。不是多高深的技巧，也谈不上什么架构，只是反复在日常项目中跟这些“空元素”打交道，不知不觉中长出来的一点偏好。
如果你也愿意给自己留一份 空白元素表，写在笔记本里或者贴在显示器边上，慢慢修订、时不时踢掉几个你觉得多余的、再加上新发现的，我敢打赌：过不了多久，你看别人的HTML，就会不自觉地开始挑剔——而那通常意味着，你真的在进步了。
发表回复