HTML中不存在“自闭合标签”概念，仅为容错写法而非标准；HTML5仅定义14个void元素（如、），禁止写/，工具链可能误判导致属性截断或DOM错乱。

HTML里没有“自闭合标签”这个东西，强行用 /> 不仅不提升性能，反而可能让解析器多干活、工具链出错、DOM结构错乱。

为什么 不是 HTML 的合法自闭合写法

HTML5 规范只定义了 14 个 void elements（空元素），比如 、、。它们语法上禁止出现结束标签，也禁止写 /> —— 浏览器遇到 会忽略斜杠，等价于 ，但这只是容错，不是标准行为。

真正风险在工具链：vue-loader、html-webpack-plugin、某些 SSR 渲染器或 XML 模式下的静态生成器（如 Jekyll 插件）会把 /> 当作标签终止信号，导致属性截断、后续内容丢失、甚至整个 DOM 嵌套偏移一级。

• ✅ 安全、通用、无歧义
• ⚠️ 容错可用，但构建时可能被误判，CI 流水线里突然报错就源于此
• ❌ 解析器当成两个标签，第二个 被丢弃，后续文本意外成为 的子节点

哪些标签看似能自闭合，其实必须显式闭合

<script></script>、、、 都不是 void 元素，哪怕为空也必须写结束标签。漏掉 不是“少打两个字符”，而是让浏览器把后面所有 HTML 当成 JS 字符串处理，直到遇到下一个 —— 这会导致页面大面积空白或脚本失效，且控制台通常不报错。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• <script>console.log(1);</script> ✅ 正常执行
• <script></script> ❌ 后续所有 HTML 被吞进 script 内容区，变成纯文本
• default ✅ 可编辑、占位正常
• ❌ DOM 中为空，value 始终是空字符串，placeholder 不显示

真正影响解析性能的，是嵌套深度和纠错开销

浏览器解析器维护一个“开放标签栈”，每层嵌套都要记录父引用、计算初始样式、准备布局检查。当嵌套深度 ≥ 7 层时，Chrome Android 版会主动丢弃后续所有 HTML —— 不是卡顿，是直接截断。这不是你写的标签“闭不闭合”的问题，而是结构失控的后果。

更隐蔽的问题是自动纠错：比如漏写 ，解析器会按插入模式补全，但补出来的 DOM 结构可能和你预期完全不同。常见现象包括：document.querySelector('footer') 返回 null、CSS 的 div > p 选择器完全不生效、body.children.length 远大于视觉区块数。

• 用 DevTools 右键任意节点 → Show DOM properties 查看 depth 值，≥ 7 就该重构结构
• 不要依赖“浏览器能自动修好”，它只保证渲染，不保证语义正确
• 内嵌
  会放大问题：表格解析需整行预读，多层

  极易触发同步 Layout，中断流式解析

  真正能提升解析性能的做法，是写合法、扁平、意图清晰的 HTML：用对语义化标签、控制嵌套深度、显式闭合所有非-void 元素。所谓“自闭合优化”，本质是混淆了 HTML 和 XHTML 的规则边界——越想走捷径，越容易掉进工具链和解析器的隐性陷阱里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！