一个页面必须且只能有一个<h1>，代表唯一核心主题；标题层级不必严格连续但禁止跳跃，语义区块内标题应从<h2>开始；<span>等元素可修饰但不可替代标题标签。
一个页面到底该有几个 <h1>？
必须且只能有一个 <h1>，它代表整个页面的唯一核心主题。搜索引擎和屏幕阅读器都依赖这个约束判断页面意图；多出一个 <h1> 会稀释权重、干扰辅助技术导航。
- 常见错误：CMS 模板里每个文章卡片都套用
<h1>，导致首页出现十几个<h1> - 正确做法：主标题用
<h1>，文章列表里的每篇标题降级为<h2>或<h3> - 例外场景：单页应用（SPA）中路由切换时，新内容区域可重置为局部
<h1>，但需配合aria-labelledby或动态更新<title>
<h2> 到 <h6> 的嵌套是否必须连续？
不必严格连续，但层级跳跃（比如从 <h2> 直接跳到 <h5>）会破坏语义结构，让屏幕阅读器用户难以预判内容深度，也影响 SEO 权重传递。
- 允许：用
<h2>→<h3>→<h4>，中间跳过<h5>没问题 - 禁止：
<h2>后直接跟<h4>，这等于跳过一级逻辑分组 - 注意：CSS 可以任意调整视觉大小，但标签层级必须反映真实内容结构——别为了“看起来小”就硬用
<h6>包裹副标题
用 <section> 或 <article> 时，标题该从哪级开始？
每个独立语义区块（如 <section>、<article>、<aside>）内部的标题应从 <h2> 开始，而非延续父级层级。浏览器和辅助工具会根据嵌套关系自动重置标题级别。
- 示例：
<main>下第一个<section>用<h2>，其子<section>用<h3> - 陷阱：把所有区块标题都写成
<h3>，看似统一，实则切断了与父容器的语义关联 - 验证方式：用 Chrome 的 Lighthouse 或 axe DevTools 检查“heading-levels”，它会报出所有跳跃或缺失
标题里能塞 <span> 或 <strong> 吗？
可以，但仅限修饰词或强调部分，不能用来替代标题层级本身。标题的语义由标签决定，不是靠加粗或颜色撑起来的。
立即学习“前端免费学习笔记（深入）”；
- 允许：
<h2>前端开发<span>进阶指南</span></h2>，其中<span>仅用于样式隔离 - 禁止：
<div class="h2-like">副标题</div>—— 这彻底丢失语义，对 SEO 和无障碍完全无效 - 关键点：任何视觉强化都不能掩盖结构缺陷；如果需要“更小的主标题”，应该用 CSS 调整
<h1>字体大小，而不是换成<h3>
