实现含多个nav、header和aside的布局，HTML代码应如何编写？

HTML 多 nav、header 元素说明 #

HTML 规范允许页面内存在多个 <header> 和 <nav> 元素，只要二者属于不同的语义区块即可：

• 全局级的头部/导航直接放在 <body> 下，可添加 role="banner"、role="navigation" 等 ARIA 属性提升可访问性
• 文章、功能模块等独立区块可以拥有自己的 <header>（放置区块标题、元信息）和 <nav>（放置区块内分页、相关导航），不会和全局元素产生语义冲突

网格布局实现代码 #

下面的代码实现了参考示意图的网格布局，同时包含了多 header、nav 的使用示例，直接复制即可运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .grid-container {
      min-height: 100vh;
      display: grid;
      /* 定义三行三列网格：头部、内容、底部三行，导航、主内容、侧边栏三列 */
      grid-template-rows: 80px 1fr 80px;
      grid-template-columns: 20% 1fr 20%;
      /* 映射网格区域位置 */
      grid-template-areas: 
        "global-header global-header global-header"
        "global-nav main-content sidebar"
        "global-footer global-footer global-footer";
      gap: 12px;
      padding: 12px;
    }

    /* 绑定各区块对应的网格区域 */
    .global-header {
      grid-area: global-header;
      background: #f1f3f4;
      padding: 20px;
    }

    .global-nav {
      grid-area: global-nav;
      background: #e8eaed;
      padding: 20px;
    }

    .main-content {
      grid-area: main-content;
      background: #fff;
      border: 1px solid #eee;
      padding: 20px;
    }

    .sidebar {
      grid-area: sidebar;
      background: #e8eaed;
      padding: 20px;
    }

    .global-footer {
      grid-area: global-footer;
      background: #f1f3f4;
      padding: 20px;
    }

    /* 移动端适配：所有区块纵向堆叠 */
    @media (max-width: 768px) {
      .grid-container {
        grid-template-rows: 80px auto 1fr auto 80px;
        grid-template-columns: 1fr;
        grid-template-areas: 
          "global-header"
          "global-nav"
          "main-content"
          "sidebar"
          "global-footer";
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <!-- 全局header -->
    <header class="global-header">全局头部</header>
    <!-- 全局nav -->
    <nav class="global-nav">全局导航栏</nav>
    <main class="main-content">
      <!-- 区块级header -->
      <header class="article-header">文章标题栏</header>
      <p>主内容区域</p>
      <!-- 区块级nav -->
      <nav class="article-pagination">文章分页导航</nav>
    </main>
    <aside class="sidebar">侧边栏</aside>
    <footer class="global-footer">全局底部</footer>
  </div>
</body>
</html>

你可以根据实际需求调整行列占比、间距、配色等参数。

内容的提问来源于stack exchange，提问作者LinnoX