页面层级大纲必须依赖显式标题标签与语义化容器构建：h1为唯一主标题，后续标题须从h2逐级嵌套；sectioning元素需配标题，禁用视觉样式或空div模拟结构；动态内容须保障首帧含有效h1并校验标题层级。
没有副标题标签（比如缺失 h2、h3 等）时，页面层级大纲依然可以成立，但必须靠显式使用标题标签 + 语义化容器来补足逻辑断层——不能靠视觉样式、空 div 或注释“假装”有结构。
坚持 h1–h6 的显式连续嵌套
即使内容看起来“简单”，也需按逻辑划分层级：
- 页面主干内容开头必须有一个 <h1>，代表唯一主题
- 所有后续标题必须从 <h2> 开始，逐级向下；不允许 h1 后直接写 h3
- 若某块内容确实无子模块（如单段说明文），可只用 h1 + 普通段落 <p>，不强加 h2
- 多个并列区块（如三个功能点）统一用 h2，而非一个 h2 加两个 h3
用 sectioning 元素明确边界，但不替代标题
<section>、<article>、<nav> 等本身不生成标题，但能帮助解析上下文：
- 每个 <section> 应自带一个标题（h2–h6），否则它只是个无语义的分组
- 独立卡片或模块若具备完整语义（如一篇博文、一个产品卡片），可在其内部用 <h1>，前提是该模块被 <article> 包裹且有明确 role 或 aria-labelledby
- 避免仅靠 <div class="section"> 模拟结构——对 SEO 和读屏器无效
视觉简洁 ≠ 结构缺失：替代方案要语义正确
当设计要求“无副标题感”，可用语义等价但更轻量的标记：
立即学习“前端免费学习笔记（深入）”；
- 强调短语用 <strong> + CSS 控制粗细/颜色，不套 h2
- 列表型内容优先用 <dl>（定义列表）或 <details>/<summary>，而非硬塞 h3
- 参数表、配置项等结构化数据，用 <table> 或带 class 的 <div>，不滥用 h4–h6
- 导航栏文字属于界面控件，用 <nav> + <p class="nav-label">，不是标题
动态渲染必须保障首帧结构完整
JS 生成的内容容易漏掉标题，尤其富文本编辑器或 CMS 组件：
- 服务端渲染（SSR）或静态生成（SSG）输出的 HTML 必须含有效 h1
- 客户端补全标题时，确保 level 参数校验为 1–6 整数，非法值 fallback 到 h2
- 用 MutationObserver 监听 DOM 变化，在新增区块后主动插入对应层级标题
- 禁止用 v-html / dangerouslySetInnerHTML 渲染未清洗的标题字符串
