header 和 main 是 HTML5 语义化布局最核心的两步：header 作为上下文入口可嵌套使用，main 必须全页唯一且直接位于 body 下，二者按 header→nav→main 顺序构建清晰内容流，支撑 SEO 与无障碍访问。

用 header 和 main 搭建页面逻辑骨架，是 HTML5 语义化布局最核心、最不可省略的两步。它们不是装饰性标签，而是向浏览器、搜索引擎和辅助技术发出的明确信号：这里是你该关注的入口，那里是真正要读的内容。

header 要做“上下文入口”，不是“顶部大盒子”

的本质是提供当前上下文——可以是整页的头，也可以是某篇文章、某个模块的头。它不强制出现在页面最顶上，也不必塞满所有顶部元素。

• 整页
  通常放在 第一层，包含网站 Logo、主标题（

  ）、主导航（可嵌套

  ）或搜索框

  每个

  内部也可以有自己的

  ，用于放文章标题（

  ）、发布时间、作者等，这是完全合法且推荐的

  避免把整个顶部导航栏+横幅图+登录框全塞进一个

  ，尤其当其中混入大量操作控件或广告时，语义会弱化

  main 是“唯一主内容声明”，不是“内容容器”

  必须全页唯一，且只能出现在 直接子层；它代表用户打开这个页面真正想看的东西，比如博客正文、商品详情、表单主体，而不是导航、侧边栏或页脚。

  

  生成HTML格式PPT

  从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

  下载

  • 检查现有代码：如果还没用
    ，就在 下第一层、

    和

    之后立即插入，只包裹核心内容区块
  • 如果已有多个
    ，保留最外层那个，其余一律改为

    或直接去掉冗余 wrapper
  • 内部可以放心放

    、

    、

    （文章标题）、

    （文章末尾信息），但不能出现

    、

    或另一个

  header + main 组合要形成清晰的内容流

  从 DOM 顺序看，

  →

  →

  是最自然、最被广泛支持的结构流向。这个顺序本身就在告诉机器：“先了解我是谁、在哪，再知道怎么跳转，最后进入重点内容”。

  • 不要把
    塞进

    里就以为完成任务——

    是独立语义单元，可放在

    内，也可紧随其后，关键是它必须包裹“主要导航链接集”
  • 如果页面有多个主题内容（如首页展示三篇博文），
    内应直接并列多个

    ，而不是用

    包一层再放

    ，否则可能稀释主内容权重
  • Google Search Console 的结构化数据测试工具能直接识别
    +

    +

    这组组合，仅靠前两者就能建立基础内容区块感知

  常见踩坑点与快速自检

  这些错误看似微小，却直接影响 SEO 解析和屏幕阅读器导航效率：

  • 把整个
    替换成

    ，结果包进了导航、侧栏甚至页脚 ——

    只负责“主内容”，其余都该剥离

    每个

    都配

    ，但里面没用

    –

    ，导致标题大纲断裂 ——

    需配合语义化标题才完整

• 在
  外层又套一层

  ，或者把它当“样式容器”加 class 做布局 —— 它没有视觉样式，布局靠 CSS，语义靠位置和唯一性