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