语义化标签的核心是标签名真实反映内容角色，需严格遵循标题层级、主干标签逻辑及section/article使用规范，并通过工具验证结构正确性。

用语义化标签搭网页结构，核心是让每个标签真实反映内容角色，而不是套个“好看的名字”。浏览器、读屏软件和搜索引擎只认标签名本身，不看你 class 写得多像。

从标题层级开始理清文档骨架

文档大纲由

–

的嵌套顺序决定，必须连续、不能跳级。比如

后面只能跟

，不能直接出现

；

下一级必须是

，中间断档会导致 axe 工具报“大纲断裂”。

• 只能出现一次，代表整页最高主题（如“前端开发入门指南”）

• 每个
  或

  都应自带一个标题（

  或更低），否则它和

  没区别

  避免用 CSS 或 class 伪造标题，比如

  xxx

  完全不参与大纲生成

  用对五个主干标签，避免常见错位

  、

  、

  、

  、

  是页面逻辑的“房间”，不是视觉容器。

  

  Claude风格HTML汇报文件

  生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid

  下载

  • 必须且仅能出现一次，且是 的直接子元素——不能包在

    、

    或

    里

    只放真正起导航作用的链接（首页、分类、关于），社交图标、广告链接别塞进去

    和

    可多级使用：页面顶部一个，每篇

    里也能有自己的

    （含发布时间、作者）

    不是侧边栏的代名词，它得和主内容有关联（如相关文章、术语解释），纯广告建议用

    区分

    和

    的使用场景

    这两个标签常被混用，关键看内容是否“可独立存在”。

    • 适合能单独分发的内容：博客正文、新闻稿、用户评论——移出来仍完整、有意义
    • 是逻辑分组，依赖上下文：比如一篇教程里的“环境准备”“代码示例”“注意事项”，每块都有

      ，就该用

      包裹

    • 没有标题的
      就是无效语义，不如直接用

    检查与验证不能少

    写完别急着上线，用工具确认结构是否被正确解析。

    • 浏览器开发者工具 → Elements 面板，右键“View outline”看大纲树（Chrome / Edge 支持）
    • 用 axe 浏览器插件跑一次，重点看 “document-outline” 和 “landmark-unique” 类警告
    • NVDA 或 VoiceOver 实际朗读测试：导航是否按预期跳转，
      是否被识别为主要内容区域

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！