一个页面只能有一个h1，须准确表达核心意图并严格按h1→h2→h3…逐级嵌套，禁止跳级或倒序；语义结构优先于视觉样式，dom层级必须连贯，服务端首屏需含有效h1，动态渲染须校验level为1–6整数。
一个页面只用一个 h1，它必须准确表达整页核心意图，并从它开始逐级向下嵌套 h2、h3……不能跳级，也不能倒序。语义结构比视觉样式更重要，浏览器默认大小只是参考，关键在 DOM 层级是否连贯。
h1 必须唯一且直指页面主题
首页的 h1 通常是“品牌名 + 主定位”，文章页就是文章标题本身，产品页就写具体产品名称。避免模板中轮播图、推荐栏、侧边栏各自塞一个 <h1>新品上市</h1>——这会让搜索引擎和读屏器无法识别主次。
- CMS 或 SPA 中，路由切换时要同步更新 h1 文本，不能靠 CSS 隐藏旧 h1 显示新 h1
- 服务端首屏 HTML 必须包含有效 h1，不能等 JS 加载完再动态插入
- 组件库里的卡片、弹窗、列表项禁用 h1，统一用 h2 或通过
aria-labelledby关联语义
h2 到 h6 要严格按逻辑父子关系嵌套
每个 h2 应该是 h1 的直接子模块，每个 h3 必须隶属于某个 h2，依此类推。不是“字号越小层级越低”，而是“位置越深，从属关系越细”。
- 合法：h1 → h2 → h3 → h4；h1 → h2 → h2（同级并列）
- 非法：h1 → h3（跳过 h2）、h2 → h4（跳过 h3）、h3 → h1（倒序）
- 真需要更细颗粒度？优先考虑
<dl></dl>、<details></details>或带语义 class 的<div>，而不是硬塞 h5/h6<h3>动态渲染时必须校验 level 值安全边界</h3> <p>React/Vue 中常见 <code><component :is="`h${level}`>写法，但 level=0、level=7、level=" abc>或 <h7></h7>这类非法标签，浏览器静默忽略，大纲直接断裂。- 只接受 1–6 的整数，其他值统一 fallback 到 h2（比 fallback 到 h1 更稳妥）
- 服务端必须确定 level，客户端 JS 计算不可信（爬虫看不到）
- 富文本编辑器输出的 #### 若前面没 ###，需在渲染层自动补逻辑占位，否则结构断裂
样式与语义必须彻底分离
可以用 CSS 把 h3 设得比 h1 还大，只要 DOM 结构正确，机器仍能读对层级。但别用
<div class="h3"> 模拟标题——语义为零，SEO 和无障碍全失效。<ul> <li>起步建议重置默认样式：<code>h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; } - 禁用
v-html或dangerouslySetInnerHTML拼接标题标签——拼错一个数字，整个大纲就垮了 - 旧版 iOS Safari 对 h6 行高处理异常，统一设
line-height: 1.2可规避
