W3C Validator 能报而 HTMLHint 默认不报，因其使用完整 HTML5 解析器并校验内容模型，而 HTMLHint 默认规则不含该检查；html-validate 开箱即用支持 element-permitted-content 规则，可捕获等非法嵌套。

HTML校验工具默认不提示

嵌套不当，因为多数校验器只检查标签配对和语法，不校验内容模型（content model）——而

里放

是语义违规，不是语法错误。

为什么 W3C Validator 能报但 HTMLHint 默认不报

W3C Validator 使用完整 HTML5 解析器，严格按规范判断“

允许的子元素类型”，遇到

直接报：Element “div” not allowed as child of element “p”。HTMLHint 默认启用的规则（如 tag-pair、attr-validate）不包含内容模型检查，必须手动开启或写自定义规则。

• tag-pair 只管
  这类交叉闭合，对
  完全沉默
• 即使你启用了 doctype-first 或 attr-validate，也不会触发
  嵌套警告
• VS Code 的 HTMLHint 插件若没配置 rulesdir 和对应规则，就等于没装

用 html-validate 快速捕获

嵌套问题

这是目前最贴近标准、开箱即用的 CLI 工具，内置 element-permitted-content 规则，能直接识别

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

并报错。

• 安装：npm install --global html-validate
• 运行：html-validate src/**/*.html
• 关键配置（.htmlvalidate.json）：

  {
    "rules": {
      "element-permitted-content": "error"
    }
  }

• 它还会同时报出
  、
  等同类问题

在 VS Code 中实时标红

里的

靠 HTMLHint + 自定义规则实现，但必须避开三个常见失效点：

• .htmlhintrc 必须放在项目根目录，且文件名带点（.htmlhintrc），不能叫 htmlhint.json
• rulesdir 路径是相对于 .htmlhintrc 的位置，比如规则文件在 ./rules/no-p-div.js，配置就得写："rulesdir": ["./rules"]
• 规则内部必须过滤模板语法，否则 Vue/JSX 中的 {{ 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 是否被重写：

• 写完
  xxx
  后，看左侧结构：如果
  和

  是平级、缩进一致、

  灰显，说明已被浏览器踢出
• 右键任一节点 → Edit as HTML，删一个字符再回车，如果结构跳变（比如
  突然移到外面），就是嵌套非法
• 在 Console 执行 document.querySelector('p div') 返回 null，基本可断定被拆开了

真正难的不是发现

嵌套问题，而是它不报错、不中断、不提示——直到某天 CSS 不生效、JS 查不到元素、Lighthouse 可访问性打零分，才意识到 DOM 早就不是你写的那个结构了。