浏览器自动修复HTML错误时会留下灰色斜体标签作为证据，如漏闭合</div>或<p>内嵌<div>导致结构错乱，使querySelector失效；应通过Elements面板、innerHTML比对及W3C验证器联合定位根因。
直接看 Elements 面板里的灰色斜体节点
浏览器不会因 HTML 语法错误中断渲染，但会默默修复并留下痕迹——灰色斜体标签就是它“动过手”的证据。比如漏写 </div>，DOM 树末尾会出现一个无子节点、字体发灰的 <div>；又比如写了 <p>文本</p><div>内容</div>，<p> 会被提前截断，导致 <div> 挂到 <body> 下层。这种结构断裂会让 document.querySelector('p + div') 返回 null，而你源码里明明写了。
验证是否被修正：右键父容器 → “Edit as HTML”，删一个字符再回车。如果整个子树重排，说明原始 HTML 已被浏览器改过。此时 document.body.innerHTML 输出的内容，和你本地文件很可能不一致——多出来的 </section>、消失的 <header> 都是线索。
用 *{outline:1px solid red!important} 暴露错位元素
布局异常（如横向滚动、内容跑出容器、定位漂移）八成不是 CSS 写错了，而是 DOM 结构被解析偏移了。执行这行代码能立刻显形问题：
document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'
outline 不影响盒模型，比 border 更安全；它能清晰标出撑破父容器的 <div>、错嵌在 <p> 里的 <div>、或被浏览器自动包裹的孤立文本块。
立即学习“前端免费学习笔记（深入）”；
- 查完执行
document.querySelector('style').remove()清除即可 - 页面太乱时可缩小范围，比如只标记
div { outline: 2px solid #0088ff !important; }
W3C 验证器报 “End tag for element 'section' seen” 别急着补闭合
这条提示常被误读为“少写了一个 </section>”，但真实原因往往在前面几十行：
- 可能是某个
<div>漏闭合，导致后续所有块级标签都被当成它的子元素 - 也可能是
<p>里嵌了<div>，触发浏览器把<p>强行提前闭合 - 先去 Elements 面板确认当前
<section>的实际父级是谁，再逆向追踪开放栈
W3C 只校验静态源码，不反映浏览器实际解析行为。它告诉你“这里不对”，但不告诉你“为什么不对”——得靠 DOM 实际结构反推。
htmlhint 命令行检查必须配对启用关键规则
htmlhint 默认规则几乎不报错，像 href=https://a.b（缺引号）、<Div>（大小写混用）这种问题全放过。配置文件 .htmlhintrc 至少要包含：
"tagname-lowercase": true"attr-lowercase": true"attr-value-double-quotes": true
运行时注意路径陷阱：
-
htmlhint *.html只扫当前层，得用htmlhint "**/*.html"（Shell 支持 glob） - VS Code 插件波浪线八成是校验误报，比如
th:href在 Thymeleaf 项目里标红、<template>在纯 HTML 中被警告——不是语法错误，得看悬停提示来源
真正卡住人的，往往不是单个错误，而是多个小问题叠加后，浏览器的容错机制把 DOM 扭曲成完全不可预期的样子。这时候 Elements 面板里一个灰色节点，可能对应源码里三处漏闭合加一处非法嵌套。
