W3C Validator 能报而 HTMLHint 默认不报，因其使用完整 HTML5 解析器并校验内容模型，而 HTMLHint 默认规则不含该检查；html-validate 开箱即用支持 element-permitted-content 规则，可捕获等非法嵌套。
HTML校验工具默认不提示 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 嵌套不当，因为多数校验器只检查标签配对和语法，不校验内容模型（content model）——而 <p></p> 里放 <div> 是语义违规，不是语法错误。
<h3>为什么 W3C Validator 能报但 HTMLHint 默认不报</h3>
<p>W3C Validator 使用完整 HTML5 解析器，严格按规范判断“<code><p></p> 允许的子元素类型”，遇到 <div> 直接报：<code>Element “div” not allowed as child of element “p”。HTMLHint 默认启用的规则（如 tag-pair、attr-validate）不包含内容模型检查，必须手动开启或写自定义规则。
-
tag-pair只管<p></p> <div></div>这类交叉闭合，对<p></p> <div></div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>完全沉默 - 即使你启用了
doctype-first或attr-validate，也不会触发<p></p>嵌套警告 - VS Code 的 HTMLHint 插件若没配置
rulesdir和对应规则，就等于没装
用 html-validate 快速捕获 <p></p> 嵌套问题
这是目前最贴近标准、开箱即用的 CLI 工具，内置 element-permitted-content 规则，能直接识别 <p></p>
<div></div>
立即学习“前端免费学习笔记（深入）”；
并报错。- 安装：
npm install --global html-validate - 运行：
html-validate src/**/*.html - 关键配置（
.htmlvalidate.json）：{ "rules": { "element-permitted-content": "error" } } - 它还会同时报出
<ul><div></div></ul>、<table><div></div></table>等同类问题
在 VS Code 中实时标红 <p></p> 里的 <div>
<p>靠 HTMLHint + 自定义规则实现，但必须避开三个常见失效点：</p>
<ul>
<li>
<code>.htmlhintrc 必须放在项目根目录，且文件名带点（.htmlhintrc），不能叫 htmlhint.json
rulesdir 路径是相对于 .htmlhintrc 的位置，比如规则文件在 ./rules/no-p-div.js，配置就得写："rulesdir": ["./rules"]
{{ item }} 会被误解析为标签；示例逻辑：
parser.addListener('tagstart', (event) => {
if (event.tag === 'div' && parser.currentParent() === 'p') {
if (!event.raw.includes('{{') && !event.raw.includes('v-')) {
reporter.error('div cannot be child of p', event.line, event.col, this);
}
}
});
浏览器 DevTools 是最准的“运行时验证器”
不用等校验结果，打开 Elements 面板就能立刻确认 DOM 是否被重写：
- 写完
<p></p> <div>xxx</div>后，看左侧结构：如果<div> 和 <code><p></p>是平级、缩进一致、<div> 灰显，说明已被浏览器踢出 <li>右键任一节点 → <code>Edit as HTML，删一个字符再回车，如果结构跳变（比如<div> 突然移到外面），就是嵌套非法 <li>在 Console 执行 <code>document.querySelector('p div')返回null，基本可断定被拆开了
真正难的不是发现 <p></p> 嵌套问题，而是它不报错、不中断、不提示——直到某天 CSS 不生效、JS 查不到元素、Lighthouse 可访问性打零分，才意识到 DOM 早就不是你写的那个结构了。
