HTML 页面布局

一个典型的网页由几个功能区域组成。HTML5 提供了语义化标签来标记这些区域，让页面结构清晰易懂。

html 
<body>
  <header>
    <h1>网站名称</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章正文……</p>
    </article>

    <aside>
      <h3>相关文章</h3>
      <ul>
        <li><a href="#">另一篇文章</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 版权所有</p>
  </footer>
</body>

布局标签一览

标签说明
<header>页头：Logo、标题、导航
<nav>主导航链接
<main>页面主要内容，每页只能有一个
<article>独立的内容块（可独立分发）
<section>内容区段（通常带标题）
<aside>侧边栏、补充信息
<footer>页脚：版权、联系信息、次要链接

<main> 不应包含任何在页面间重复的内容（如导航、页脚）。它只包含本页面独有的核心内容。每页仅一个 <main>。

<article> vs <section>

  • <article> — 可以独立存在、独立分发的内容：一篇博客、一个帖子、一个产品卡片
  • <section> — 页面内部的逻辑分段，通常以标题开头
html 
<article>
  <h2>如何学习 HTML</h2>
  <section>
    <h3>第一步：理解基本概念</h3>
    <p>……</p>
  </section>
  <section>
    <h3>第二步：动手实践</h3>
    <p>……</p>
  </section>
</article>

一个经典布局：三栏

html 
<body>
  <header class="site-header">……</header>
  <div class="layout">
    <nav class="sidebar-left">左侧导航</nav>
    <main class="content">主要内容</main>
    <aside class="sidebar-right">右侧信息</aside>
  </div>
  <footer class="site-footer">……</footer>
</body>
css 
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

布局是 HTML + CSS 协同工作的结果。HTML 负责定义内容和结构，CSS 负责视觉排列。不要把 CSS 的 display/flex/grid 的逻辑强加给 HTML 标签的选择。