一个页面应有且仅有一个<h1>，精准表达核心主题；<h2>至<h6>不可跳级，须严格递进；<h5><h6>极少使用；<title>与<h1>职责不同，前者影响SEO，后者定义内容结构。
一个页面到底该有几个 <h1>？
绝大多数页面只应有且仅有一个 <h1>，它必须精准表达当前页的核心主题。比如订单确认页写 <h1>订单确认</h1>，不是“首页”或网站名重复套用。
常见错误包括：CMS 模板在全局 <header> 里硬编码 <h1>MySite</h1>；SPA 路由切换后没更新 DOM 中的 <h1> 文本；Next.js/Nuxt 的 Layout 组件里直接写了 <h1>，和 Page 组件里的 <h1> 一起渲染。
- 修复方式：Layout 中改用
<header role="banner">或纯<div class="logo"> - 页面组件通过
useEffect（React）或onMounted（Vue）动态更新<h1>文本 - 服务端渲染场景下，优先用
generateMetadata（Next.js）或useSeoMeta（Vue）确保首屏即正确
<h2> 到 <h6> 能不能跳级？
不能。跳级不是“浏览器能显示就没事”，而是语义断裂——屏幕阅读器可能跳过、Lighthouse 和 axe 插件会报 Heading levels should only increase by one 错误，Chrome DevTools 的 Accessibility 面板也会标红。
允许的嵌套是 <h1> → <h2> → <h3> → <h4>，或同级并列（如多个 <h2>），但禁止 <h2> 后直接 <h4>，也禁止 <h3> 出现在没有父级 <h2> 的位置。
立即学习“前端免费学习笔记（深入）”；
- 快速检查命令：
curl -s URL | grep -o '<h[1-6]' | sort -u，看是否连续、有无缺失 -
<h5>和<h6>极少需要，95% 的页面用不到；法律条款、API 参数表这类极细颗粒度结构才可能用到 - 真要小字号备注，别用
<h6>，改用<p class="note">+ CSS 控制
为什么不能用 <h3> 替代加粗段落？
因为屏幕阅读器会读作“标题三级”，不是“加粗文字”。用户听到一串“标题三级、标题三级、标题三级”，完全无法判断这是副标题、强调句还是随便一行字。
真正该用什么：
- 纯视觉强调：用
<strong>+ CSS 控制粗细/颜色 - 语义强调（重要内容）：用
<strong>，别套标题标签 - 需要结构化副标题：确保上面有
<h1>或<h2>，再用<h2>或<h3> - CSS 可以重置所有标题的
font-size和margin，但 HTML 写进去的语义层级不可逆——读屏软件不看你有没有 display: none
<title> 和 <h1> 是一回事吗？
不是。<title> 在 <head> 里，是浏览器标签页显示的“名片”，影响 SEO 和书签；<h1> 在 <body> 里，是页面内容的“骨架”，定义主标题层级。
两者常被混淆，但职责完全不同：
-
<title>必须存在，且应简洁、含关键词、长度适中（通常 ≤ 60 字符） -
<h1>不参与 SEO 排名权重计算，但它决定内容结构可信度和可访问性路径 - 一个页面可以有多个
<section>，每个内部可有自己的<h2>，但全局<h1>仍建议唯一
最易被忽略的是：SPA 页面路由切换时，只改 document.title 不够，<h1> 的文本也必须同步更新 DOM，否则 Lighthouse 会同时报 document-title 和 heading-order 两项错误。
