W3C Validator要求HTML代码必须含完整结构（<!DOCTYPE html>、<html>、<head>、<body>），否则报“missing root element”等错误；它校验标准合规性，不执行JS，动态内容不可见。
验证前必须补全文档结构，否则报“missing root element”
W3C Validator 不接受片段代码，<div><p>hello</p></div> 这类粘贴进去会直接报错 “Document is empty” 或 “No root element found”。它只认完整 HTML 文档：必须含 <!DOCTYPE html>、<html>、<head>、<body> 四件套，哪怕只是验证一小段逻辑，也得包起来。
常见补法：
- 复制整页源码（推荐，最可靠）
- 本地开发时用构建产物，比如
dist/index.html，而不是未编译的模板文件 - 手动包裹时注意编码声明：
<meta charset="utf-8">放在<head>里，避免乱码误报
遇到 Bad value X for attribute Y 错误，大概率是用了非标准属性
比如写 status="loading"、level="2" 或 role="button"（后者合法，但 role 值必须是 ARIA 规范定义的），Validator 会报 Bad value loading for attribute status。这不是拼写问题，而是语义越界。
解决方式很明确：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 自定义状态/标识一律加
data-前缀：改status="loading"为data-status="loading" - ARIA 属性值必须严格匹配规范，比如
role="alertdialog"合法，role="modal"不合法 -
class、id、style等全局属性不受限，但值里不能有未转义的引号或尖括号
远程 URL 验证抓的是原始 HTML，JS 动态内容不会出现
你访问 https://example.com 看到一个由 React 渲染的 <article>，但 Validator 抓到的可能是只有 <div id="root"></div> 的空壳 HTML。这类“看着正常、验着报错”的情况，说明你该换验证对象。
正确做法：
- 验证前先在浏览器里右键 →「查看页面源代码」，确认看到的是你预期的 HTML 结构
- 如果是 SPA，优先验证构建输出的
index.html文件（上传或粘贴） - 动态插入的标签（如 JS 生成的
<picture>或<dialog>）不在 Validator 检查范围内，得靠 DevTools 的 Elements 面板人工核对嵌套是否合法
错误行号指向的是“现象”，不是“病因”，嵌套错位要往上翻
报错 End tag for element 'div' seen, but there were open elements. 并且标在第 42 行，不代表第 42 行的 </div> 写错了——大概率是第 18 行某个 <div> 漏闭合，或者第 25 行把 <div> 塞进了 <p> 里，被浏览器自动拆解，导致后续所有闭合都错位。
这时候最有效的排查动作是：
- 打开 Chrome DevTools → Elements 面板，观察缩进是否连续；突然左对齐的节点就是断裂点
- 选中疑似异常的父容器，右键 →「Edit as HTML」，敲回车，看 DOM 是否跳变或控制台是否报错
- 灰色斜体显示的标签（比如
<div>在<p>下呈斜体）说明它已被浏览器移出原位置，属于非法嵌套
W3C Validator 只告诉你“结构断了”，但哪一环松了，得靠 DOM 树的视觉线索来定位。这点最容易被忽略——盯着报错行改，往往越改越偏。
