验证html文档结构合法性必须用组合手段交叉验证，主线程dom检查+字符串静态分析+w3c标准校验三者缺一不可；浏览器自动纠错会掩盖非法嵌套、缺失根标签等问题，仅靠能否显示无法判断html结构合法性。
HTML 文档结构不合法，页面照样能显示——但这是浏览器在帮你擦屁股。真要验证合法性，不能只看渲染结果，得用组合手段交叉验证。
document.documentElement 为 null 怎么办
这是最硬的信号：HTML 根本没被解析成 DOM。常见原因不是代码写错了，而是服务端或加载链路出了问题：
- 服务器返回了
text/plainMIME 类型，而不是text/html - 响应体为空（比如 SSR 渲染失败、CDN 返回 204）
- 前端 fetch 后没设
response.text()就直接丢给DOMParser - 本地用
file://协议打开，某些浏览器会拒绝解析（W3C Validator 也会因此失效）
修复优先级：先确认网络面板里 Response Headers 的 Content-Type 是 text/html;charset=utf-8，再查服务端日志或构建产物是否真实输出了 HTML 内容。
Chrome DevTools Elements 面板里出现灰色/斜体节点
这些不是装饰，是浏览器静默修正的铁证。它意味着源码违反了 HTML 内容模型，比如：
-
<p></p> <div>xxx</div>→<div> 会被移出 <code><p></p>，在 Elements 中突然左对齐、无缩进 -
<code><script></script>→ 若没加type或defer，节点标灰并提示 “HTML validation warning”（需在 DevTools Settings → Console → Verbose 开启） -
<table><div></div></table>→<div> 被提到 <code><table> 外，DOM 树断裂 <p>注意：Elements 默认折叠空文本节点和注释，手动展开才能看清嵌套是否连贯；右键节点 → “Break on” → “Attribute modifications”，可捕获 JS 动态破坏结构的行为。</p> <h3>W3C Validator 报 Error 但页面能跑</h3> <p>这类报错必须修，不是“看着能用就不管”。W3C 不看渲染，只按标准比对源码，Error 意味着结构已违反 HTML5 规范：</p> <ul> <li> <code>Stray end tag：比如多写了，或父标签提前闭合导致后续标签“漂浮” -
Element X not allowed as child of element Y：典型如<div> 嵌在 <code><p></p>里，或<header></header>放在外 -
Bad value X for attribute Y：自定义属性没加data-前缀（status="loading"应为data-status="loading"） -
parse5可模拟浏览器解析逻辑，生成 AST，支持treeAdapter自定义校验钩子 -
html-validate支持 CI/CD 离线运行，规则可配：启用require-lang-attribute、valid-href等硬性项，关掉宽松规则 - 避免调 W3C API：依赖网络、限流、不稳定；且它只校验初始 HTML，不反映 JS 动态插入后的最终状态
粘贴代码时务必包含完整 至 <code>，否则报 “document has no root element”；含内联 <script></script> 时，若内容里有未转义的 或 <code>&，会被截断，报 “unexpected token”，这不是标签问题，是字符转义漏了。
Node.js 环境下批量校验 HTML 字符串
别用正则匹配标签对——注释、CDATA、大小写混用都会崩。推荐 parse5 + html-validate 组合：
真正容易被忽略的是上下文问题：比如 DOMParser 在 Web Worker 中解析字符串，返回的 documentElement 可能非 null，但它不执行浏览器纠错逻辑，结构与主线程实际 DOM 完全不一致——所以 Worker 只能做轻量静态分析（如 DOCTYPE 校验、标签配对粗筛），核心结构检查必须留在主线程。
