# 常用容器标签

URL: https://caijiao.org/html/08-layout/02-containers
Source: docs/html/08-layout/02-containers.md
Description: HTML 中常用容器标签如 和 用于组织和分组内容，配合 CSS 实现布局与样式控制，是构建网页结构的基础工具。

容器标签用于将网页中的内容进行逻辑分组或布局控制，是 HTML 中最基础也最常用的结构标签之一。它们本身没有语义，主要依赖于样式和脚本进行功能扩展。

## `<div>`：块级容器

`<div>` 是最常用的块级通用容器标签，适用于组织页面结构中的大块内容。

### 特点：

- 是块级元素，默认换行显示
- 没有语义，仅用于分组布局
- 可嵌套其他元素（包括块级和行内）

### 示例：

```html
<div class="header">
  <h1>我的网站</h1>
</div>
```

在 CSS 中通常配合类名定义样式：

```css
.header {
  background-color: #f0f0f0;
  padding: 20px;
}
```

## `<span>`：行内容器

`<span>` 是最常用的行内容器，适用于对文本或行内容的局部样式控制。

### 特点：

- 是行内元素，不换行
- 没有语义，不影响结构
- 适合为文本设置样式或脚本操作

### 示例：

```html
<p>这是一段文字，其中 <span class="highlight">高亮部分</span> 被强调。</p>
```

对应 CSS：

```css
.highlight {
  color: red;
  font-weight: bold;
}
```

## `<section>` 与 `<article>`

虽然也可以用于容器功能，这两个标签具有语义性，更适合用于语义明确的内容块。

- `<section>`：表示页面中的一个功能区块或内容段
- `<article>`：表示一篇完整的文章、帖子、评论等

## 总结对比

| 标签        | 类型 | 是否语义化 | 适用场景         |
| ----------- | ---- | ---------- | ---------------- |
| `<div>`     | 块级 | 否         | 页面结构和布局   |
| `<span>`    | 行内 | 否         | 局部文本样式控制 |
| `<section>` | 块级 | 是         | 内容逻辑分区     |
| `<article>` | 块级 | 是         | 独立的内容单元   |

合理使用容器标签有助于提升代码结构清晰度，并便于样式与功能的实现。