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