一个页面只能有一个h1，用于明确标识页面核心主题；h2–h6须严格按逻辑嵌套，不可跳级或倒序，否则破坏语义结构、影响无障碍访问与seo。
必须且只能出现一次，否则屏幕阅读器和搜索引擎会丢失页面主干
一个页面里出现两个 h1，不是“样式多一种选择”，而是直接破坏语义结构。浏览器的「Accessibility」面板会把第二个 h1 当作孤立节点，读屏软件可能跳过、重复播报，或错误地把它当成新页面入口。CMS 模板里轮播图、商品卡片、侧边栏模块如果各自硬写 h1，上线后就埋了坑。
实际场景中，h1 的归属很明确：
- 首页：通常是网站名或核心价值主张，比如
<h1>高性能 React 组件库</h1> - 文章页：必须是文章标题本身，比如
<h1>useEffect 依赖数组为空数组时的陷阱</h1> - 后台管理页：可以是功能模块名，如
<h1>用户权限配置</h1>，但不能是“系统后台”这种泛称
组件库、弹窗、卡片等复用单元里禁止写死 h1；改用 h2 或通过 aria-labelledby 关联已有标题。
h2–h6 必须按逻辑嵌套，不能跳级也不能倒序
从 h1 到 h6 是树状结构，不是字号滑动条。跳级（比如 h2 后直接 h4）会让辅助技术无法构建正确标题树，部分读屏软件会静默跳过断裂节点，用户根本感知不到中间层级的存在。
常见错误写法：
<h1>配置指南</h1> <h2>环境变量</h2> <h4>NODE_ENV</h4> <!-- 缺失 h3，结构断裂 -->
正确做法是先定义“配置方式”这个中间层：
<h1>配置指南</h1> <h2>环境变量</h2> <h3>运行时配置</h3> <h4>NODE_ENV</h4>
Vue/React 中避免用 props.level 动态拼 <h></h> —— 除非你严格校验传入值为连续整数（1–6），并 fallback 到 h2。Markdown 渲染器（如 remark）默认把 ## 编译为 h2，得确认源文档没跳级（例如 ## 后直接 ####）。
SEO 和无障碍对标题结构有硬性依赖，CI 里必须自动化校验
Google 明确参考标题结构理解页面主次；WCAG 2.1 准则 1.3.1 要求标题形成“有意义的层次结构”。这不是建议，是可测试的合规项。国内政务、教育类项目招标已将 WCAG 2.1 AA 级作为强制验收门槛，未通过 AXE Pro 扫描（比如缺失 h1 或跳级）会导致合同支付被中止。
推荐在 CI 流程中接入以下检查：
- 用 axe-core 或 pa11y 检查是否有多余
h1、跳级、孤立标题 - 用 Puppeteer + 自定义脚本验证渲染后 DOM 的标题树是否连贯
- 把检查结果作为 PR 合并的 gate 条件，而非上线后补救
最易被忽略的一点：标题层级不是“写完再修”的事，而是在需求评审阶段就要和产品、文案一起对齐内容大纲——哪块是章节，哪块是子节，哪块只是强调文字（该用 strong 而非 h3）。结构定错，后面所有 SEO 和无障碍优化都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
