HTML空元素共14个，是W3C HTML5标准明确定义的无内容、无闭合标签元素：area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。
哪些HTML标签是空元素（void elements）
HTML标准中明确列出的空元素共14个，它们不能包含任何内容，也不允许写结束标签。浏览器解析时遇到 <img> 这类标签会自动闭合，手动加 </img> 不但无效，还可能触发怪异模式或被解析为两个标签。
当前HTML5规范中的空元素包括：<area>、<base>、<br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<param>、<source>、<track>、<wbr>。
注意：<script> 和 <style> 看似“单行”，但它们是**双标签容器**，必须配对书写；<textarea> 同理，即使内容为空也需闭合。
空元素是否必须写成 <tag/> 形式
不需要。HTML5中，<br>、<img src="a.jpg"> 这种不带斜杠的写法完全合法且推荐。XML风格的 <br/> 是XHTML遗留习惯，在纯HTML文档中既无必要，也不改善解析行为。
立即学习“前端免费学习笔记（深入）”；
常见误解：以为加斜杠更“规范”或更“现代”。实际上：
- HTML解析器不识别
/>中的斜杠，它只认标签名和空白后的> - 在
<svg>或<math>内部嵌入XML语法时才需要自闭合写法，但那是命名空间上下文，不是HTML本身 - 某些模板引擎（如Vue SFC）或Linter规则可能强制
/>，但这属于工具链约束，非HTML标准要求
写错空元素会导致什么问题
典型错误是给空元素加结束标签或内容，比如：<img src="x.jpg"></img> 或 <input type="text">hello</input>。这类写法不会报错，但会引发隐性问题：
- 浏览器将
</img>视为未知标签，可能创建一个空的HTMLUnknownElement节点，干扰DOM遍历 -
<input>hello</input>中的 “hello” 会被当作input元素之后的文本节点渲染，看起来像“输入框后面多了一段字”，调试时容易误判来源 - SEO和无障碍工具（如axe、Lighthouse）可能报出语义错误，影响可访问性检测得分
- 服务端渲染（SSR）或HTML压缩工具（如html-minifier）可能意外删掉非法闭合部分，导致前后端DOM不一致
如何快速验证某个标签是不是空元素
最可靠的方式是查W3C HTML5规范附录中的 void-elements 定义表，但日常开发中可用更直接的办法：
- 打开浏览器开发者工具 → Elements 面板 → 输入任意标签（如
<meta>），观察其DOM树中是否允许展开子节点：不能展开，大概率是空元素 - 在控制台执行
document.createElement('img').children.length，返回0；而document.createElement('div').children.length返回0但它是可含子节点的容器——关键看规范定义，而非运行时长度 - 用VS Code + Auto Close Tag插件时，如果敲完
<br后按 Tab，它不自动补>后的</br>，而是直接闭合，这就是编辑器内置了空元素判断逻辑
真正容易被忽略的是：空元素的属性值仍需符合规范，比如 <img src=""> 中的空 src 会触发404请求，这不是语法问题，却是线上高频事故点。
