仅表示内容区块的语义头部，非全页顶部万能容器；适用场景为页面、或等独立单元的开头部分，禁止嵌套或滥用为样式盒。

不是“必须包住整个页面顶部”的万能容器，它只代表一个内容区块的头部——可以是整个页面的页眉，也可以是 或

内部的标题区。

什么时候该用

？

判断依据只有一个：这段内容是否在语义上属于某个“可独立理解的内容单元”的开头部分。

• 整个页面最上方的导航+logo+搜索框 → 适合用
  包裹（作为 的直接子元素）
• 一篇博客文章开头的标题、作者、发布时间 → 应该放在 内部的
  里
• 一个产品列表区块上方的“热门商品”标题和筛选控件 → 可以套在
  内的
  中
• 纯装饰性 banner 图、无实际标题或导航功能的横幅 → 不该用
  ，用 更合适

  里能放什么？常见误用点

  它允许包含大多数流内容（

  –

  、
  、、 等），但不能嵌套另一个
  ，也不能当“样式盒子”滥用。
  • ✅ 正确：

    我的博客

  • ✅ 正确：

    如何调试 CSS

    作者：张三

    正文开始...

  • ❌ 错误：
    ...
    （嵌套无效，语义混乱）
  • ❌ 错误：把整页顶部所有 div 都塞进一个
    ，只为方便写 CSS（破坏语义，影响屏幕阅读器识别）

  和 、

  的配合关系

  是容器， 是导航专用语义标签，
  是层级标题——三者常共存，但职责分明。
  • 必须出现在有意义的导航上下文中；如果只是几个链接，没构成“主导航”，就别硬套
  • 一个
    里可以没有
    （比如只有 logo + 搜索框），但如果有标题，优先用

    –

    而不是
  • 多个
    出现在一页时，每个都应有明确归属（如分别属于不同 ），避免全用
    导致大纲混乱

  
    
  网站主标题
    
  
  
  
    
  
      
  CSS Grid 布局实战
      
  2025年4月10日
    
    
  正文内容...
  

  真正容易被忽略的是：浏览器不会因为用了

  就自动加样式或提升 SEO 权重，它的价值完全依赖于你是否用对了语义结构。一旦把它当成“高级 div”来用，反而会让辅助技术更难理解页面逻辑。