HTML 布局与区块

网页靠"区块"搭出骨架，再用 CSS 排成好看的布局。这一篇讲区块的几种常见布局方式。

两种基础区块标签

<!-- div：块级容器，独占一行 -->
<div>第一个区块</div>

<!-- span：行内元素，不换行 -->
<span>行内文字</span>

常见布局方式

左右两栏布局（Flex）

<div class="container" style="display:flex">
  <div style="flex:1;background:#ecf0f1;padding:12px">左侧栏</div>
  <div style="flex:2;background:#dfe6e9;padding:12px">右侧内容</div>
</div>

多卡片网格（Grid）

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
  <div style="border:1px solid #ccc;padding:16px">卡片 1</div>
  <div style="border:1px solid #ccc;padding:16px">卡片 2</div>
  <div style="border:1px solid #ccc;padding:16px">卡片 3</div>
</div>

完整页面布局骨架

<body>
  <header style="background:#2c3e50;color:#fff;padding:20px">页头</header>
  <div style="display:flex">
    <nav style="width:200px;background:#ecf0f1;padding:20px">侧边导航</nav>
    <main style="flex:1;padding:20px">主要内容</main>
  </div>
  <footer style="background:#dfe6e9;text-align:center;padding:16px">页脚</footer>
</body>

区块 vs 语义化

• 布局用：div + Flex/Grid，负责"长什么样"
• 语义用：header / nav / main / section / footer，告诉搜索引擎"是什么"

两者常配合：语义化标签确定区块含义，CSS 决定布局样式。

提示

先把布局骨架搭对，再加样式。这样页面结构清晰，也利于 SEO 抓取。