选对h1–h6的关键是按内容父子关系嵌套而非字号：页面仅一个h1锚定主题，h2–h6逐级从属，禁跳级倒序；动态渲染需校验level为1–6整数；语义与样式分离，禁用div模拟标题。
选对 h1 到 h6 的关键是让 DOM 层级真实反映内容的父子关系，不是看字号大小，而是看“谁属于谁”。一个页面只有一个 h1，它必须直指当前页核心主题；后续标题必须严格按逻辑嵌套，不能跳、不能倒、不能绕。
h1 必须唯一且锚定页面意图
首页用“品牌名 + 主定位”，文章页直接用文章标题，产品页写具体产品名称。避免在页眉、轮播图、侧边栏里各自塞一个 <h1></h1>——这会让搜索引擎和读屏器失去焦点。服务端首屏 HTML 里就要有它，不能等 JS 加载完再插入。
h2–h6 按实际从属关系逐级使用
每个 h2 应是 h1 的直接子模块（比如“订单确认”页下的“收货信息”“支付方式”“订单明细”）；每个 h3 必须隶属于某个 h2（如“收货信息”下的“收件人”“电话”“地址”）；h4 及以下只在真有四级以上逻辑时才出现。
- 允许：
<h1>→<h2>→<h3>→<h4></h4> </h3> </h2> </h1>或<h1>→<h2>→<h2></h2> </h2> </h1>（同级并列） - 禁止：
<h1>→<h3></h3> </h1>（缺 h2）、<h2>→<h4></h4> </h2>（缺 h3）、<h3>→<h1></h1> </h3>（倒序）
动态渲染时 level 值必须安全可控
React/Vue 中用 <component :is="`h${level}`> 很常见，但 level 必须是 1–6 的整数。字符串、null、0、7、NaN 都会产出非法标签（如 <h0> 或 <h7>），浏览器静默忽略，大纲直接断裂。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：先
parseInt(level)，再Math.min(6, Math.max(1, level)) - 服务端必须确定 level，客户端 JS 计算不可信（爬虫看不到）
- 富文本中若出现
####却没前面的###，渲染层要自动补逻辑占位，否则结构断层
样式与语义必须彻底分离
你可以用 CSS 把 h3 设得比 h1 还大，只要 DOM 结构是对的，机器仍能读准层级。但绝不能用 <div class="h3"> 模拟标题——语义为零，SEO 和无障碍全失效。
<ul>
<li>起步建议重置默认样式：<font face="monospace">h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; }</font>
</li>
<li>h5 和 h6 在绝大多数业务场景中不该出现；真要用，需满足：存在四级以上嵌套逻辑 + 移动端显式声明 <code>line-height: 1.2
