未闭合标签会导致浏览器自动纠错，使DOM结构与源码不符，引发布局错乱、样式失效、JS查找不到元素等问题；应使用W3C Validator检测并手动补全，编辑器启用自动闭合插件可有效预防。
标签没闭合，浏览器不会报错，但会悄悄“猜”你怎么想——这个猜测结果往往和你写的代码完全对不上，直接导致布局移位、样式失效、JS查不到元素。
浏览器自动纠错时 DOM 结构已不是你写的那样
遇到未闭合的 <div>、<p> 或 <section>，浏览器会尝试补全，但不同浏览器补法不同。比如 Chrome 可能把后续所有内容都塞进这个没闭合的 <div> 里，而 Firefox 可能提前收尾——你在 Elements 面板看到的结构，早不是源码模样。
- 右键任意元素 → Edit as HTML，手动补一个
</div>，如果整个页脚突然“跳”回底部，说明它原本被套进了前面某个漏闭合的容器里 -
document.querySelectorAll('*').length返回几万甚至十几万？大概率是嵌套失控，源头就是一两个漏掉的</div> - 用 W3C Validator（https://www.php.cn/link/61d427b812eea882235a3ae3ce613dd2）粘贴 HTML，它会标出“End tag for element X implied, but there were open elements”，这就是在说：“我帮你闭了，但你本来该自己写的”
<p>、<li>、<tr> 这类标签最容易漏闭合
它们不是自闭合标签，但很多人写顺手了就只写开头。尤其 <p>：HTML 规范允许省略闭合标签（历史遗留），但现代开发中一旦混用 Flex/Grid 布局或加了 display: contents，漏闭合就会立刻引发连锁塌陷。
-
<p>第一段</p><p>第二段</p>安全；<p>第一段<p>第二段</p>就危险——第二个<p>会触发第一个自动闭合，DOM 层级可能意外多一层 -
<tr><td>A</td><td>B</td></tr>必须配对；漏掉</tr>，浏览器可能把下一行<tr>当成子行处理，表格直接错格 - 编辑器开 Auto Close Tag 插件（VS Code 默认启用，Sublime 需装 Auto Close Tag），写完
<div>回车后光标自动停在</div>中间，比靠记忆靠谱得多
自闭合标签误加 </xxx> 同样会破坏结构
<img>、<input>、<br> 是自闭合标签，写成 <img src="x"></img> 浏览器会把它当做一个有开始有结束的普通元素处理，导致 DOM 多出一个空节点，CSS 选择器可能意外命中、JS querySelector 行为异常。
- 检查 Elements 面板里有没有莫名其妙多出来的
<img></img>节点（注意看是否被渲染为双标签） - VS Code 中装
HTMLHint，配置"htmlhint.options": { "tag-self-close": true }，保存时自动警告 - 特别警惕模板字符串或 JS 拼接 HTML 的场景：
`<img src="${url}"></img>`——这种写法在字符串里看着没问题，注入 DOM 后就是真问题
最麻烦的不是报错，而是它不报错。DOM 看似正常，但某个 querySelector('.card') 突然返回空数组，或者某块 CSS 死活不生效，根源可能只是 header 里少了一个 </div>，而它让整个 main 区域被吞进了导航里。
