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

标题层级嵌套不是为了视觉好看，而是让浏览器、屏幕阅读器和搜索引擎能准确理解内容逻辑。关键在于“严格连续”和“真实从属”——不能跳级，也不能凭空多出一层。

必须保证

到

连续嵌套

HTML大纲只认标签的嵌套顺序，不看字号或CSS样式。常见错误是：

后面直接跟

，中间缺

；或者

下没

就跳到

。这类跳级会让 axe DevTools 报 heading-order 错误，文档大纲面板显示断裂，视障用户无法顺畅跳转。

• 代表整页唯一核心主题，全站只用一次

• 每个

  必须是

  的直接子模块（比如“产品介绍”“使用指南”“客户反馈”）

每个

必须隶属于某个具体的

，表示该模块下的细分项（如“安装步骤”“配置参数”）

H4及以下仅在极少数场景出现，比如法律条文、技术协议等需四级展开的内容

用

包裹并重置局部标题层级

多个独立内容区块之间，不宜共用全局标题序列。正确做法是用

划分语义区域，并在每个

内部从

开始重新组织标题流。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 主内容区用
  包裹，其中第一个标题应为

  （因

  已被页面级标题占用）

• 每个
  必须含至少一个标题（h2–h6），否则语义弱于

  ，建议换用

  例如：一个博客页可有

  正文

  ...

  和

  评论区

  ...

  ，两个

  互不冲突

  避免伪标题和装饰性干扰

  用

  或加粗文字冒充标题，对大纲毫无贡献。浏览器和读屏软件完全忽略它们。

  立即学习“前端免费学习笔记（深入）”；

  • 所有标题必须是真实的

    –

    元素，且嵌套在合法父容器中（如

    、

    、）

  • 不要为样式需要而滥用
    ：里面没标题、没时间、没作者信息，只是居中一段字？那它不是header，是div
  • 面包屑、分页控件、页脚链接都不属于
    ，强行套进去会污染导航语义

  验证结构是否真正清晰

  别依赖肉眼判断。打开 Chrome 的“开发者工具 → 辅助功能 → 文档大纲”，或用 axe DevTools 扫描，看是否报错。真实结构符合以下三点，才算过关：

  • 大纲呈现为树状，每层缩进对应一级标题，无断裂、无悬浮节点
  • 每个

    都出现在

    之后、且不在任何

    内部；每个

    都紧邻其所属

    之后

  • 下没有多个

    ，也没有

    被包在未命名的

    里“藏起来”