HTML5中只有14个void元素（如等）语法上禁止写闭合标签；非void元素如若强行自闭合会导致解析异常；等void元素也不支持::before/::after伪元素。
HTML5中哪些标签真的不能写闭合标签？
只有被HTML5规范明确定义为“void elements”（空元素）的标签，才**语法上禁止**出现结束标签（如 ），也**不允许**包含任何内容。浏览器遇到 <img alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" > 这类写法，会直接忽略后面的 ，甚至可能把后续内容误解析为 <img alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" > 的子节点——导致布局错乱。
以下是HTML5标准中全部 14个必须自闭合的void元素（按使用频率排序）：
<area> <base> <br> <col> <command> <!-- 已废弃，仅作兼容参考 --> <embed> <hr> <img alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" > <input> <keygen> <!-- 已废弃 --> <link> <meta> <param> <source> <track> <wbr>
⚠️ 注意：<command></command> 和 <keygen></keygen> 虽属void元素，但已在HTML5中正式废弃，新项目请勿使用。
斜杠 / 写不写？HTML5和XHTML的区别在哪？
在HTML5中，<img src="a.jpg" alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" > 和 <img src="a.jpg" alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" > 都完全合法，效果一模一样。但二者语义不同：
立即学习“前端免费学习笔记（深入）”；
-
<img alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" >是HTML5原生推荐写法 —— 简洁、直观、无歧义 -
<img alt="HTML5自闭合标签有哪些_无需闭合的标签汇总【技巧】" >是XML/XHTML遗留风格 —— HTML5兼容它，但不是必需，且容易误导新人以为“加了/才算闭合” - 若混用（如
<input type="text">），浏览器会丢弃，但可能影响DOM树结构判断（尤其用JS操作parentElement时）
✅ 实操建议：统一用无斜杠写法；团队协作时在ESLint或HTMLHint中配置 html-validate 规则禁止 />，避免风格污染。
为什么 <div></div> 或 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10449" title="Reading & Knowledge"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="Reading & Knowledge" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10449" title="Reading & Knowledge">Reading & Knowledge</a>
<p>博学的好奇伙伴，精通太空、宇宙与历史。不带评判地回答任何问题，擅长解释各种概念。</p>
</div>
<a href="/xiazai/skill10449" title="Reading & Knowledge" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 是错的？
因为 <div> 和 <code><p></p> 不是void元素，它们是可包含内容的容器型元素。HTML5规范明确禁止对它们使用自闭合语法：
-
<div></div>在HTML5中会被解析为<div></div>（浏览器自动补全），但这是隐式修复，非标准行为 -
<p></p>更危险：它会让后续文本意外变成该<p></p>的内容，直到遇到下一个块级元素才被强制闭合，极易引发样式错位 - 工具如
html-validate或 VS Code插件会直接报错"Void element 'p' must not have an end tag"
? 记住一个简单判断法：如果这个标签你曾经想在里面写文字或嵌套其他标签（比如 <p>Hello</p>），那它就一定不是自闭合标签。
伪元素（::before/::after）为什么不能用在 <input> 上？
因为 <input> 是void元素，没有“内部”可以插入生成内容。CSS伪元素只能作用于有渲染盒子且能容纳内容的元素。
- Chrome/Safari等WebKit内核曾短暂支持
input::before，但属于非标准行为，Firefox/Edge始终不支持 - 真实场景（如自定义checkbox）必须用“包裹+伪元素”方案：
<label><input type="checkbox"><span class="custom-checkbox"></span></label>，再对span使用::before - 现代替代方案更推荐
appearance: none+ 背景图/渐变控制，兼容性更好，代码更轻量
真正容易被忽略的是：void元素的“不可扩展性”不仅限于伪元素——它还意味着无法用 innerHTML 注入内容、无法用 textContent 设置文本、也无法监听子节点变化（MutationObserver 对它无效）。
