HTML5语义标签的核心是准确表达内容功能：header作为介绍性区域需依上下文定位且含h1；nav仅用于全局导航链接；main唯一且不可嵌套，承载核心内容；footer对应header，支持多级复用表归属信息。

HTML5页面布局的核心在于用对语义标签，而不是堆砌

。header、nav、main、footer不是“更好看的div”，而是告诉浏览器、搜索引擎和屏幕阅读器“这一块内容到底在干什么”。用得准，结构就清晰；用错位置或混用，反而会降低可访问性和维护性。

header：不只是页面顶部，更是“介绍性区域”

header代表一个介绍性或导航辅助内容的容器，它不绑定物理位置，而取决于父级上下文：

• 放在里 → 整个网站的页眉（含Logo、主标题、搜索框）
• 放在
  里 → 这篇文章自己的头部（含

  标题、作者、发布时间）

• 放在
  里 → 这一章节的引导信息（如小节标题+副标题）
• 不能孤立放在
  中，也不能塞进

  或

  内部

  每个header最好包含一个

  –

  ，否则语义不完整，影响辅助技术识别

  nav：只包真正起导航作用的链接集合

  nav不是“有链接的地方就用它”，而是专指主导航菜单这类具有全局跳转功能的链接组：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • 典型位置在
    下方或内部，作为全站导航栏
  • 内部建议用
    • 结构组织链接，避免纯文字或按钮式伪链接
    • 面包屑、页脚友情链接、文章内“上一篇/下一篇”不属于
      范畴，可用

      或普通处理
    • 一个页面可以有多个
      （如顶部主导航 + 侧边工具导航），但都必须是功能明确的导航链路

    main：唯一且不可嵌套的核心内容容器

    main是整个页面中最重要的语义锚点，它的规则最严格：

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

    • 一个页面只能有一个
      ，且必须是的直接子元素
    • 不能出现在
      、

      、

      、

      、

      等任何其他语义标签内部
    • 里面放的是与当前页面主题直接相关、不可被其他页面复用的内容（比如正文、产品列表、表单）
    • 若页面含多篇独立文章，每篇用
      包裹，再统一放进

      ，不要把

      拆成多个

    footer：对应header的“收尾信息”，支持多级复用

    footer表示页脚或区块尾部，强调归属关系和完整性：

    • 全局页脚应为的直接子元素，通常在
      之后、页面最底部
    • 也可嵌套在
      或

      内，表示该内容单元的结尾信息（如“编辑于2026年6月”、“本文授权CC BY-SA”）
    • 内容宜包括版权信息、联系方式、隐私政策、相关链接等补充说明类内容
    • 不要把导航链接、广告位或主要内容误放进
      ，那会干扰语义逻辑