浏览器解析html时会强制修正非法嵌套（如），导致真实dom结构与源码不一致；应通过devtools elements面板、document.queryselector、w3c验证器或html-validate工具检测，而非依赖视觉表现。
直接看浏览器生成的真实 DOM 结构
别信你写的源码，<p></p>里塞<code><div>这种写法在编辑器里看着没问题，但 Chrome/Firefox/Edge 一解析就拆开。打开 DevTools → Elements 面板，找那个<code><p></p>节点：如果它下面没子元素、旁边灰显一个独立的<div>，说明已被浏览器强制闭合并移出——这就是非法嵌套的铁证。
<p>更直接的验证方式是控制台跑一句：<code>document.querySelector('p div')。返回null？那基本可以确定<div>根本不在<code><p></p>里面，而是被当成兄弟节点挂到外面了。
-
<p></p>只允许 phrasing content（如<span></span>、<em></em>、<img>），<div>、<code><h4></h4>、<section></section>全都不行 - 哪怕加了
display: inline-block也没用，浏览器校验的是语义，不是样式 - 右键节点 → “Edit as HTML”，删个空格再回车，如果结构突然跳变，就是嵌套不合法的信号
- 文件开头必须有
，否则可能进入怪异模式，让本该报错的地方“侥幸通过” -
<meta charset="utf-8">得放在<title></title>之前，否则部分字符解析异常，连带影响嵌套判断 - 粘贴代码时，复制内容里藏的零宽空格、中文引号、隐藏控制符也会触发校验失败，别急着改嵌套，先清空重输
- 自定义元素（如
<my-button></my-button>）默认不校验，需手动开启no-unknown-elements - 项目含 Vue/JSX 模板语法时，得在配置里过滤掉
{{和v-前缀，否则误报 - 配置文件
.htmlhintrc必须放在工作区根目录，且rulesdir路径是相对于它的，不是命令执行路径 - CSS 中
p > div选择器彻底失效 - JS 里
document.querySelector('p').textContent拿到空字符串 - 服务端渲染（SSR）时 hydration 失败，React/Vue 控制台报“mismatch”
- 屏幕阅读器无法正确识别段落边界，可访问性评分直降
用 W3C Validator 定位具体哪一行违规
W3C 验证器（validator.w3.org）会明确告诉你错误位置和原因，比如：Line 42, Column 8: Element “div” not allowed as child of element “p” in this context. 这比靠眼睛扫快得多。
注意两个容易翻车的点：
本地批量检查用 html-validate 而不是正则或插件
VS Code 的 Auto Close Tag、Emmet 这些只是帮你补标签，完全不管嵌套合不合法。html-validate才是专治这类问题的 CLI 工具：
安装后运行：html-validate src/**/*.html
关键要启用element-permitted-content规则，它会按 HTML5 规范逐个检查每个父-子组合是否被允许。例如<p></p>
<h4>标题</h4>
为什么不能靠肉眼或“看起来能显示”来判断
浏览器的容错机制太强，<p></p>
<div>xxx</div>
<p></p>
<div>xxx</div>
<p></p>。这会导致：
真正危险的不是报错，而是静默失败——DOM 结构变了，但页面“看起来还行”，问题拖到上线后才暴露。
