# 块级与行内元素

URL: https://caijiao.org/html/08-layout/01-block-inline
Source: docs/html/08-layout/01-block-inline.md
Description: HTML 元素分为块级元素和行内元素。块级元素独占一行，常用于布局结构；行内元素在一行内显示，常用于文本内嵌样式。理解两者的区别有助于正确编写页面结构。

HTML 中的元素按照默认显示方式分为两类：**块级元素（block）**和**行内元素（inline）**。理解它们的行为对于布局设计和结构编写至关重要。

## 块级元素

块级元素通常作为页面的结构组件，会独占一整行，其前后会自动换行。它们可以包含其他块级元素或行内元素。

### 常见块级元素：

- `<div>`：通用容器
- `<p>`：段落
- `<h1>` ~ `<h6>`：标题
- `<ul>` / `<ol>`：无序/有序列表
- `<li>`：列表项
- `<section>`、`<article>`、`<nav>`、`<header>` 等语义块

### 示例：

```html
<div>
  <h2>标题</h2>
  <p>这是一个段落。</p>
</div>
```

## 行内元素

行内元素不会独占一行，多个行内元素会排在同一行中，通常用于包裹文字或嵌套在块级元素中。它们一般不用于构建布局结构。

### 常见行内元素：

- `<span>`：通用行内容器
- `<a>`：超链接
- `<strong>` / `<em>`：强调文本
- `<img>`：图像
- `<input>`、`<label>`：表单小组件

### 示例：

```html
<p>欢迎访问 <a href="#">我的网站</a>！</p>
```

## 总结对比

| 特性         | 块级元素     | 行内元素           |
| ------------ | ------------ | ------------------ |
| 是否换行     | 是           | 否                 |
| 常用于       | 页面结构布局 | 文本样式或内嵌内容 |
| 是否可包含块 | 是           | 否（一般不推荐）   |

合理区分和使用块级与行内元素，是编写结构清晰、样式规范的 HTML 页面基础。