html空元素共14个，是w3c html5标准明确定义的无内容、无闭合标签元素：area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr。
<img>、<input>、<meta> 这类标签没有内容，也不需要闭合标签——它们是 HTML5 中合法的空元素，写成 <img src="x.jpg"> 就对了；加斜杠（<img src="x.jpg">）不报错但多余，而写成 <img> 则违反规范，可能在某些解析场景下出问题。
哪些标签属于空元素？别靠记忆，查规范最稳
HTML5 明确定义了空元素列表，共 14 个，包括：<area>、<base>、<br>、<col>、<embed></embed>、<hr>、<img>、<input>、<keygen></keygen>（已废弃但仍在部分旧文档出现）、<link>、<meta>、<param>、<source></source>、<track></track>。注意：<colgroup></colgroup> 不是空元素，它可含 <col> 子元素；<wbr></wbr> 是空元素，但常被忽略。
这些标签的共同点是：语义上不承载“容器”功能，只表达单一动作或元信息，因此 DOM 中无子节点，也不能包裹内容。
写错闭合形式的典型表现：页面没报错，但逻辑出岔
浏览器对错误闭合容忍度高，但隐患藏在细节里：
-
<img src="x.jpg">：DOM 中会生成两个节点——一个<img>和一个孤立的（被当作文本节点或无效标签），可能导致 JS 查询document.querySelectorAll('img')意外多匹配 -
<meta charset="utf-8">：虽然多数浏览器忽略 ，但在 XML 解析模式（如 application/xhtml+xml）下直接解析失败 -
<input type="text">：表单控件重复渲染风险，尤其配合框架时，React/Vue 可能因 DOM 结构异常触发重渲染或警告
为什么 <br> 和 <hr> 不能套内容？不是“忘了写”，是语法禁止
空元素不允许有子节点，这是 HTML5 语法硬约束，不是风格建议：
- 写
<br>换行或<hr>分割线，浏览器会把“换行”“分割线”当作紧跟在标签后的文本节点，而非<br>的内容——因为<br>根本没有 content model（内容模型） - 开发者工具 Elements 面板里能看到：这类标签节点的
childNodes.length恒为 0，哪怕你写了文字，也不会出现在其子节点中 - 想加文字说明？必须用其他元素包裹，比如
<p></p> <hr> <span>以上为分隔线</span>
真正容易被忽略的是：空元素一旦被误当成容器使用，后续 JS 操作（如 el.appendChild()）会静默失败，控制台不报错，但 DOM 就是不更新——因为标准规定空元素的 appendChild 方法直接抛 HierarchyRequestError 异常，而现代浏览器大多选择吞掉这个错误，只拒绝操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
