页面错位、样式失效、JS找不到元素，八成是未闭合标签导致浏览器自动纠错重构DOM；应优先通过Elements面板观察异常嵌套、Edit as HTML触发结构跳变、document.body.innerHTML比对源码，并用W3C Validator定位具体错误行。
页面突然错位、样式失效、JS 找不到元素？八成不是 CSS 写错了，而是某个 <div> 或 <section> 忘写 </div>，浏览器已经默默帮你“修”出一个完全不同的 DOM 结构。
怎么看浏览器是不是偷偷改了你的 HTML
Elements 面板里看到的结构，不等于你写的源码。浏览器遇到未闭合标签（比如 <div><p>hello 后面没 </p> 也没 </div>），会按自己的解析规则强行补全——结果可能是整个 <footer> 被塞进 <header> 里。
- 右键任意父容器 → “Edit as HTML”，删一个空格再回车：如果子结构瞬间“跳变”，说明原始结构已被修正过
- 在 Console 里运行
document.body.innerHTML，复制出来和你本地源码逐行对比：多出来的</p>、消失的<main>都是线索 - 打开 Elements 面板，盯着
<div>、<section>、<article>这类块级容器的折叠状态——如果展开后内部出现明显不该在那里的父级（比如<nav>下面突然冒出一个<footer>），基本就是前面漏闭合了
VS Code 里怎么让未闭合标签“当场现形”
靠肉眼扫 <div> 嵌套，效率低还容易漏。编辑器能实时预警，但得开对功能。
- 装插件
Auto Close Tag（不是 Auto Rename Tag）：敲<div>回车，它自动补</div>；如果你手动删掉它补的结束标签，光标一移走就会高亮提醒 - 开启设置
html.suggest.html5+emeraldwalk.runonsave，配合命令tidy-html5：保存时自动格式化并报错未闭合节点 - 别依赖 Prettier 的 HTML 格式化：默认不检查闭合，加了
htmlWhitespaceSensitivity: 'strict'也只管空格，不管</span>漏没漏
用 W3C Validator 一眼定位具体哪一行
在线校验不是摆设，它能精准指出“第 42 行缺少 </div>”，比肉眼查快十倍。
立即学习“前端免费学习笔记（深入）”；
- 访问
https://validator.w3.org/，粘贴 HTML 片段或输入 URL，它会标出所有嵌套错误、未闭合标签、非法顺序（比如<p><div></p></div>） - 注意报告里的 “End tag for element X implied, but there were open elements” —— 这是在说“我猜你该在这儿闭合，但前面还有没关的”
- 服务端模板（EJS、Django）里带条件逻辑的标签嵌套（如
<% if (x) { %><div><% } %>）必须人工检查每条分支，W3C 只能校验最终输出的 HTML
框架项目里为什么更难发现
Vue/React 里看不到原始 HTML，错误更隐蔽。编译器报错往往只是表象。
- Vue 报
Invalid VNode type，大概率是模板里漏了</template>或</div>，或者混用了块级/内联语义（比如<p>里写了<div>） - React 中用
dangerouslySetInnerHTML或 Vue 的v-html渲染富文本时，传入的内容若含未闭合标签，框架完全不校验，直接交由浏览器解析——DOM 就已经歪了 - Lighthouse 或 axe 扫描时标出严重 a11y 问题，常源于浏览器“修好”的 DOM 和源码不一致，屏幕阅读器读到的结构根本不是你写的
最麻烦的不是找不到错，而是你以为 DOM 是那样，其实浏览器早给你重排了一遍。别急着调 CSS，先确认真实结构——否则所有后续调试都在错误前提下进行。
