避免跨级跳跃需严格按h1→h2→h3→h4→h5→h6连续嵌套，禁止数字断层；section/article内可重置层级但内部仍须连续；动态渲染时level必须为1–6整数，富文本需补逻辑占位，禁用样式模拟标题。
避免跨级跳跃，关键在于严格按逻辑从属关系嵌套，而不是看字号大小或视觉位置。
必须逐级递进，不能跳过中间层级
合法结构只允许 h1 → h2 → h3 → h4 → h5 → h6 这样的连续路径。常见非法写法包括：
-
<h1>主标题</h1> <h3>小节标题</h3>（跳过了 h2） -
<h2>章节</h2> <h4>子项</h4>（跳过了 h3） -
<h3>内容块</h3> <h1>新主题</h1>（倒序，h3 后接 h1）
只要 DOM 中的标签顺序出现数字断层（如 1→3、2→4），就属于跨级跳跃，语义结构即被破坏。
section 和 article 内可重置层级，但内部仍需连续
HTML5 允许在语义区块内重新开始标题计数，但每个区块内部仍要自成一套连贯结构：
-
<section><h2>产品介绍</h2> <h3>核心功能</h3></section>✔️ -
<article><h3>用户反馈</h3> <h4>评分详情</h4></article>✔️ -
<section><h2>使用指南</h2> <h4>安装步骤</h4></section>✖️（h2 后直接 h4）
注意：<section></section> 或 <article></article> 本身不提供标题，必须包含至少一个 h1–h6 才算语义完整。
动态渲染时要校验 level 值是否合法
用 React/Vue 拼接 <component :is="`h${level}`> 很常见，但 level 必须是 1–6 的整数：
- level = 0、7、">
），浏览器静默忽略，导致大纲断裂 - 建议服务端或渲染层做兜底：非 1–6 整数统一 fallback 到
<h2></h2> - 富文本中解析
####时，若前一级（###）缺失，需自动补逻辑占位，否则结构断层 -
<div class="h3">副标题</div>—— 屏幕阅读器读不出层级，SEO 无法识别 -
<p style="font-size: 24px; font-weight: bold">重点提示</p>—— 不是标题，就是普通段落 -
<h1 style="display:none">隐藏的h1</h1> <h2>显示的标题</h2>—— 破坏唯一性，误导辅助技术
别用样式或 class 模拟标题来绕过规则
以下写法看似“解决了视觉问题”，实则彻底丢失语义：
样式可以任意调整，但标签本身必须真实反映内容从属关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
