html5核心结构布局取决于语义归属和嵌套关系：nav仅用于主导航链接集合，header/footer须匹配所属容器主题，main必须唯一且不嵌套于其他语义标签内。

HTML5核心结构布局不是靠视觉位置决定的，而是靠语义归属和嵌套关系。用对了标签但放错位置，跟没用一样。

nav必须是独立导航集合，不能当“菜单容器”用

只适用于主导航链接集合——比如顶部横排菜单、侧边垂直菜单。它不是“所有带链接的区域”的通用标签。

• ✅ 正确：全站一级导航，如首页、产品、关于、联系
• ❌ 错误：面包屑导航（用
  或
  ）、页脚友情链接（用普通列表）、文章内跳转锚点（用即可）
• ⚠️ 注意：
  内部不能再嵌套另一个

  ；二级菜单用

  实现，不需额外语义标签

header要明确归属范围，不能“一贴到底”

不是页面最上面那块儿就叫header，而是“属于谁”的头部。它可以出现在顶层，也可以出现在

或

内部。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• ✅ 正确：下的
  表示整站页眉；

  内的

  包含该文章标题与作者信息
• ❌ 错误：把
  塞进

  里；用

  包裹后再套

  （语义被降级）

  ⚠️ 注意：每个

  最好配一个

  –

  ，否则辅助技术可能无法识别其层级作用

  footer代表“结尾信息”，不是页面底部装饰层

  语义核心是“收尾”，不是“贴在页面最底下”。它可以是全局页脚，也可以是某篇文章或模块的结尾说明。

  • ✅ 正确：末尾的
    放版权与备案号；

    末尾的

    写“本节更新于2026年6月”
  • ❌ 错误：把广告位、悬浮客服按钮、随机推荐塞进
    ；用

    包住主导航（逻辑冲突）
  • ⚠️ 注意：同一层级不能出现两个
    ，但可以有多个

    和

    ——只要它们归属不同容器

  main是唯一且不可嵌套的“内容心脏”

  不是样式区，而是浏览器和屏幕阅读器识别“这里才是正文”的关键地标。它必须直接挂在下，且只能有一个。

  • ✅ 正确：
    …
    …
    …
  • ❌ 错误：
    …
    （被div包裹后失去landmark意义）；
    …
    （main被header包裹，违反规范）
  • ⚠️ 注意：单页应用切换内容时，新内容应注入已有
    内部，而不是销毁重建——否则会触发可访问性警告

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