一个页面只能有一个，且须位于内代表核心主题；–须逐级嵌套，不可跳级；/容器决定标题语义归属；需用工具验证结构。
一个页面到底该有几个 <h1></h1>
只能有一个，且它得代表整个文档的核心主题。现代实践里，<h1></h1> 应出现在 <main></main> 内部，不被包裹在 <section></section> 或 <article></article> 里——除非那个区块本身是可独立分发的内容（比如博客列表页中某篇摘要卡片）。
常见错误：
• CMS 模板全局塞了一个 <h1></h1>，正文又加一个，变成两个
• 用 CSS display: none 隐藏了某个 <h1></h1>，但标签还在，语义结构已损坏
• 把导航栏、页脚里的文字强行包进 <h1></h1>，只为“看起来大”
<h2></h2> 到 <h6></h6> 必须逐级嵌套，不能跳级
层级不是字号开关，而是语义依赖链。<h2></h2> 是 <h1></h1> 的直接子主题，<h3></h3> 是 <h2></h2> 的子主题，以此类推。跳级（比如 <h1></h1> 后直接 <h4></h4>）会让屏幕阅读器和 SEO 工具无法建立逻辑关系。
实操建议：
• 视觉样式全部交给 CSS 控制，别用低级标题“凑大小”
• 检查时打开浏览器开发者工具 → Elements 面板 → 右键任意标题 → “Show DOM properties”，看 ownerDocument 和父级是否符合预期
• 如果内容需要视觉降级但语义不变，用 <span></span> + class 替代降级标题
<section></section> 和 <article></article> 才让标题层级真正生效
光靠 <h2></h2><h3></h3> 排列，不加语义容器，浏览器和读屏软件很难判断归属关系。两个相邻的 <h2></h2>，如果中间隔着 <section></section>，就是平行章节；如果第二个 <h2></h2> 在第一个的 <section></section> 内，则自动视为子层级。
关键规则：
• 每个 <section></section> 或 <article></article> 应以对应层级标题开头（通常是 <h2></h2> 或 <h3></h3>）
• <article></article> 内部允许有自己的 <h1></h1>，这是语义隔离，不是滥用
• 空 <section></section>（没标题、没内容）跟 <div> 没区别，纯属冗余
<h3>检查标题结构是否合理，三步就能验证</h3>
<p>别等上线才翻文档。现在就能动手：<br>• 打开 Chrome / Firefox 开发者工具 → Elements 面板 → 展开 <code>，肉眼扫一遍标题标签是否连续、不跳级、不重复
• 安装浏览器插件 “HeadingsMap” 或 “Web Accessibility Toolbar”，一键生成大纲树
• 运行命令行工具 axe-cli（需 Node.js）： axe http://localhost:3000 --rule=heading-order，它会直接报出所有层级断裂点
最容易被忽略的是：标题层级错乱本身不报错、不阻断渲染，但会导致可访问性测试失败、SEO 权重稀释、内容摘要生成错乱——问题藏得深，修复成本却不高。
