一个页面最佳实践是仅用一个，代表核心主题；多会削弱语义锚点，影响seo与无障碍；～不必严格嵌套但忌跳级；css样式不影响语义，但不可用等冒充标题；组件化需通过level属性动态渲染标题层级。
HTML 的 <h1></h1> 到 <h6></h6> 不是样式工具，而是语义结构标记 —— 用错层级或堆砌多个 <h1></h1>，搜索引擎和读屏器都会“听懵”。
一个页面到底该有几个 <h1></h1>
现代 SEO 和无障碍实践普遍接受「单个 <h1></h1>」为最佳实践，它代表页面最核心主题（比如文章标题、产品主名称）。不是“必须只能一个”，但多于一个时，<h1></h1> 就失去锚点意义，导致：
- 屏幕阅读器用户无法快速定位主内容
- Google 可能忽略后续
<h1></h1>，或误判页面焦点 - 某些 CMS（如 WordPress 主题）会把第二个
<h1></h1>当作副标题渲染，破坏结构
例外场景：单页应用（SPA）中路由切换后，新内容区可重置为 <h1></h1> —— 但需配合 aria-live 或 document.title 同步更新，否则对辅助技术不友好。
<h2></h2>～<h6></h6> 必须严格嵌套吗
不必机械遵循“<h2></h2> 下必须跟 <h3></h3>”，但跳级（比如 <h2></h2> 直接跟 <h5></h5>）会让语义断裂。浏览器不报错，但：
立即学习“前端免费学习笔记（深入）”；
- NVDA/JAWS 等读屏器按层级生成导航树，跳级后子节可能被“悬空”
- Lighthouse 的「结构化数据」审计会警告
heading-level跳变 - CSS 重置时（如
h1,h2,h3{margin:0}），视觉层级丢失更明显
实操建议：用 <section></section> 或 <article></article> 隔离逻辑块，在每个块内从 <h2></h2> 开始重新计数。例如：
<article>
<h2>安装步骤</h2>
<section>
<h3>前提条件</h3>
</section>
<section>
<h3>开始安装</h3>
</section>
</article>
CSS 改样式会不会影响语义
完全不影响。你可以用 CSS 把 <h3></h3> 渲染得比 <h1></h1> 还大，只要 HTML 结构正确，语义就成立。但要注意：
- 别用
<p></p>+font-weight:bold冒充标题 —— 搜索引擎和读屏器根本“看不见”这是标题 - 避免仅靠颜色/大小区分层级（比如全用
<h2></h2>但加不同 class），这等于放弃语义 - 如果设计要求视觉上“无层级感”，用
role="heading"+aria-level补充（仅当无法改 HTML 时兜底）
典型错误：<div class="title-h1">首页</div> —— 这在 DOM 中就是普通 div，无论 CSS 多炫，对 SEO 和无障碍都是零价值。
模板系统里怎么安全复用标题组件
很多框架（Vue/React）会把 <header></header> 组件写成固定 <h1></h1>，结果嵌套时全变成 <h1></h1> 堆叠。解法很简单：
- 组件接收
levelprop（如<header level="2">简介</header>），内部用h${level}动态渲染 - 服务端渲染（SSR）时，确保
level由页面上下文决定，而非组件自身硬编码 - Next.js 的
useRouter()或 Nuxt 的useRoute()可用来判断当前路由深度，自动降级标题层级
漏掉这点，模板看着整齐，实际输出可能是 6 个 <h1></h1> 并列 —— 不是“用了标题标签”，而是“滥用标题标签”。
真正难的不是记住 h1～h6 的数字顺序，而是每次写 HTML 时，下意识问一句：这个标签对机器（爬虫、读屏器）传达的结构意图，和我想让人看到的内容逻辑，是不是一致。
