标题层级合规关键在于逻辑递进与语义一致，须唯一h1居首、禁止跳级倒置、标题归属匹配上下文，并用W3C校验器和Lighthouse交叉验证最终HTML输出。
检查标题是否唯一且居首
每个HTML页面必须有且仅有一个<h1>，它应作为整页最核心的主题标识，出现在<body>内靠前位置（通常在<main>开头）。W3C验证器会报错：“Element h1 not allowed as child of element head”（h1误写在head里），或“Duplicate h1”（重复出现）。
- 确保
<h1>不在<head>中，也不在<header>外的孤立区域； - 避免用CSS隐藏多个h1再视觉上“伪装”唯一，这违反语义且被验证器识别为硬错；
- 若使用组件化框架（如Vue），确认构建后产物中
<h1>仅保留一个——模板中的多个h1可能被编译为实际DOM中的多个。
验证层级是否连续不跳变
标题必须按逻辑深度逐级下降：h1 → h2 → h3 → …，不能h1直接接h3，也不能h2后退到h1。W3C本身不直接报“跳级”，但嵌套在<section>或<article>中的标题若跳级，会导致<section>隐式标题缺失警告（如“Section lacks heading”），Lighthouse也会标为无障碍问题。
- 用浏览器开发者工具的Elements面板，手动展开结构，观察标题是否形成树状分支；
- 运行
document.querySelectorAll('h1, h2, h3, h4, h5, h6')，再遍历检查相邻标题的级别差是否≤1且≥0； - 对每个
<section>或<article>，确认其内部首个标题级别 ≤ 其父容器标题级别 + 1（例如父是h2，子section内首个标题可以是h2或h3，但不能是h4或h1）。
确认标题归属与上下文匹配
标题不是孤立标签，必须准确描述其所处容器的内容。W3C不校验文字含义，但会通过结构暴露错位：比如<aside>里放h1，或<footer>中嵌套h2作为“友情链接”标题——这些虽不报语法错，却触发Lighthouse“Heading order”警告，也违背ARIA文档大纲规则。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<h1>–<h6>应只用于内容区块的主干标题，不用作装饰性文字或按钮文案； - 侧边栏、页脚、模态框等辅助区域的标题，级别应明显低于主体，且优先用h2–h4而非复刻h1；
- 动态生成的标题（如CMS文章页），需确保服务端或JS注入后，DOM中仍维持层级连贯——验证器查的是最终HTML，不是初始模板。
用工具交叉验证真实输出
别只信编辑器高亮或本地预览。必须在校验构建后的dist/index.html上操作，否则模板语法（如{{ title }}）或框架指令（v-for）会让W3C报一堆误报。
立即学习“前端免费学习笔记（深入）”；
- 推荐使用W3C Nu HTML Checker，粘贴完整源码（含
<!DOCTYPE html>）； - 配合Chrome Lighthouse跑一次Accessibility审计，重点看“Heading elements are ordered sequentially”项；
- 命令行可用
html-validate --rules '{ "heading-order": "error" }' dist/index.html做CI级强约束。
