h1必须唯一且为页面主语义锚点，h2–h6须严格逐级嵌套、禁止跳级；动态生成需parseInt并限幅至1–6；h5/h6极少适用，应优先用dl或语义化p替代。
是页面唯一主语义锚点，到必须严格逐级嵌套，跳级即语义断裂。
不能有多个，也不该由 JS 动态插入后才出现；和在绝大多数业务场景中没有正当用途，不是“字体小就能用”，而是语义上只适用于法律条款末级子项或 API 参数细分字段。
后可接或，但绝不能直接接；前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
必须严格逐级嵌套，跳级即语义断裂。
不能有多个，也不该由 JS 动态插入后才出现；和在绝大多数业务场景中没有正当用途，不是“字体小就能用”，而是语义上只适用于法律条款末级子项或 API 参数细分字段。
后可接或，但绝不能直接接；前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
和在绝大多数业务场景中没有正当用途，不是“字体小就能用”，而是语义上只适用于法律条款末级子项或 API 参数细分字段。
后可接或，但绝不能直接接；前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
后可接或，但绝不能直接接；前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
，但绝不能直接接；前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
前必须有或更高层级作为父级——这不是样式建议，是 W3C Outline Algorithm 的硬性解析规则。
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
必须唯一且承担页面主语义锚点
一个页面 DOM 中出现多个，不是“风格问题”，而是语义结构直接失效。搜索引擎和屏幕阅读器会丢失对页面主题的判断依据，Lighthouse 立即报heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
heading-levels错误，爬虫可能跳过后续层级解析。
常见翻车点：
- Layout 组件里硬编码<h1>MySite</h1>，Page 组件又输出一个<h1>订单确认</h1>
- SSR 首屏 HTML 为空或加载中状态，<h1></h1>由 JS 动态插入，爬虫抓到的是无主干结构
- <title></title>写的是 “React 性能优化指南”，但<h1></h1>是“欢迎来到前端性能实验室”，AI 模型会标记该页“意图模糊”
动态生成标题时 level 参数必须做数值截断与 fallback
Vue/React 里用props.level渲染<h></h>很常见，但 runtime 输入不可信——CMS 字段可能是字符串"0"、"7"，或字段缺失导致undefined，结果输出<hnan></hnan>或直接 JS 报错。
安全写法只有一条路径：
- 强制转整数：
const level = parseInt(props.level) || 2 - 限幅到合法范围：
Math.min(6, Math.max(1, level)) - 最终标签名：
<code>h${level}，而非条件判断或三元切换——DOM 结构浮动会让 Lighthouse 无法静态分析
和极少适用业务场景
95% 的业务页面（含后台系统、营销页、表单页、详情页）不需要<h5></h5>或<h6></h6>。它们语义是“法律条款末级子项”或“API 参数表细分字段”，不是“小字备注”或“视觉弱化标题”。
实际影响比想象中更隐蔽：
- Chrome DevTools Accessibility 面板里 heading-level 显示跳变（如 1→2→4），标红但不中断渲染
- Markdown 渲染器（如 remark）把##编译为<h2></h2>、####编译为<h4></h4>，若源文档漏写###，就直接产出断裂结构
- iOS Safari 等旧环境可能跳过缺失层级的内容区块，用户根本读不到
<h5></h5>或<h6></h6>。它们语义是“法律条款末级子项”或“API 参数表细分字段”，不是“小字备注”或“视觉弱化标题”。
实际影响比想象中更隐蔽：
- Chrome DevTools Accessibility 面板里 heading-level 显示跳变（如 1→2→4），标红但不中断渲染
- Markdown 渲染器（如 remark）把##编译为<h2></h2>、####编译为<h4></h4>，若源文档漏写###，就直接产出断裂结构
- iOS Safari 等旧环境可能跳过缺失层级的内容区块，用户根本读不到
真正容易被忽略的，是语义层级不匹配时，机器不会报错，但大纲提取完全失真——你写的结构，和屏幕阅读器、爬虫、AI 模型看到的，根本不是一回事。
