标题层级必须严格连续嵌套且真实从属,禁止跳级或凭空增层;全页仅一个,各为直接子模块,下级标题须隶属具体上级;多区块应分用包裹并重置局部标题流。

标题层级嵌套不是为了视觉好看,而是让浏览器、屏幕阅读器和搜索引擎能准确理解内容逻辑。关键在于“严格连续”和“真实从属”——不能跳级,也不能凭空多出一层。
必须保证到连续嵌套
连续嵌套
HTML大纲只认标签的嵌套顺序,不看字号或CSS样式。常见错误是:
后面直接跟,中间缺;或者下没就跳到。这类跳级会让 axe DevTools 报 heading-order 错误,文档大纲面板显示断裂,视障用户无法顺畅跳转。
代表整页唯一核心主题,全站只用一次
- 每个
必须是的直接子模块(比如“产品介绍”“使用指南”“客户反馈”)
- 每个
必须隶属于某个具体的,表示该模块下的细分项(如“安装步骤”“配置参数”)
- H4及以下仅在极少数场景出现,比如法律条文、技术协议等需四级展开的内容
用包裹并重置局部标题层级
;或者下没就跳到。这类跳级会让 axe DevTools 报 heading-order 错误,文档大纲面板显示断裂,视障用户无法顺畅跳转。
代表整页唯一核心主题,全站只用一次
- 每个
必须是的直接子模块(比如“产品介绍”“使用指南”“客户反馈”)
- 每个
必须隶属于某个具体的,表示该模块下的细分项(如“安装步骤”“配置参数”)
- H4及以下仅在极少数场景出现,比如法律条文、技术协议等需四级展开的内容
用包裹并重置局部标题层级
就跳到。这类跳级会让 axe DevTools 报 heading-order 错误,文档大纲面板显示断裂,视障用户无法顺畅跳转。
代表整页唯一核心主题,全站只用一次
- 每个
必须是的直接子模块(比如“产品介绍”“使用指南”“客户反馈”)
- 每个
必须隶属于某个具体的,表示该模块下的细分项(如“安装步骤”“配置参数”)
- H4及以下仅在极少数场景出现,比如法律条文、技术协议等需四级展开的内容
用包裹并重置局部标题层级
代表整页唯一核心主题,全站只用一次
- 每个
必须是
的直接子模块(比如“产品介绍”“使用指南”“客户反馈”)
- 每个
必须隶属于某个具体的
,表示该模块下的细分项(如“安装步骤”“配置参数”)
- H4及以下仅在极少数场景出现,比如法律条文、技术协议等需四级展开的内容
用包裹并重置局部标题层级
多个独立内容区块之间,不宜共用全局标题序列。正确做法是用开始重新组织标题流。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 主内容区用
包裹,其中第一个标题应为 (因
已被页面级标题占用)
- 每个
必须含至少一个标题(h2–h6),否则语义弱于 ,建议换用- 例如:一个博客页可有
和正文
... ,两个评论区
...互不冲突
避免伪标题和装饰性干扰
用
或加粗文字冒充标题,对大纲毫无贡献。浏览器和读屏软件完全忽略它们。- 所有标题必须是真实的
–
元素,且嵌套在合法父容器中(如
、 、) - 不要为样式需要而滥用
:里面没标题、没时间、没作者信息,只是居中一段字?那它不是header,是div - 面包屑、分页控件、页脚链接都不属于
验证结构是否真正清晰
别依赖肉眼判断。打开 Chrome 的“开发者工具 → 辅助功能 → 文档大纲”,或用 axe DevTools 扫描,看是否报错。真实结构符合以下三点,才算过关:
- 大纲呈现为树状,每层缩进对应一级标题,无断裂、无悬浮节点
- 每个
都出现在
之后、且不在任何
内部;每个
都紧邻其所属
之后
下没有多个 ,也没有
被包在未命名的
里“藏起来”
- 不要为样式需要而滥用
- 例如:一个博客页可有
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










