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