# Meta 标签详解

URL: https://caijiao.org/html/10-meta/01-meta-tags
Source: docs/html/10-meta/01-meta-tags.md
Description: HTML 中的 标签用于定义页面的元数据，如字符编码、关键字、描述、视口设置等，有助于 SEO 优化、响应式布局和浏览器行为控制。

`<meta>` 标签用于提供网页的**元数据（metadata）**，这些信息不会直接显示在页面上，但对搜索引擎优化（SEO）、网页兼容性、移动端适配等至关重要。

## 1. 设置字符编码

```html
<meta charset="UTF-8" />
```

定义网页的字符集，`UTF-8` 是国际通用编码，支持多种语言，推荐默认使用。

## 2. 页面描述与关键词（用于 SEO）

```html
<meta
  name="description"
  content="这是一个 HTML 教程，适合初学者学习网页开发基础。"
/>
<meta name="keywords" content="HTML, 教程, 网页设计, 前端" />
```

- `description`：页面简介，常在搜索引擎摘要中显示。
- `keywords`：关键词，部分搜索引擎参考。

## 3. 设置页面作者

```html
<meta name="author" content="张三" />
```

可声明网页的作者信息。

## 4. 控制视口（移动端适配）

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

设置移动设备下的布局宽度，常用于响应式网页设计。

## 5. 阻止搜索引擎索引

```html
<meta name="robots" content="noindex, nofollow" />
```

用于禁止搜索引擎收录本页内容。

## 6. 自动刷新或跳转页面

```html
<meta http-equiv="refresh" content="5;url=https://example.com" />
```

表示页面在 5 秒后跳转至指定链接。

## 7. 设置兼容模式（IE 浏览器）

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```

提示 IE 浏览器使用最新的渲染引擎。

## 小结

| 功能             | 示例属性                       | 说明                     |
| ---------------- | ------------------------------ | ------------------------ |
| 字符编码         | `charset`                      | 设置页面编码，推荐 UTF-8 |
| 页面描述与关键词 | `name="description"` 等        | 提高搜索引擎识别度       |
| 移动端适配       | `name="viewport"`              | 响应式布局必备           |
| 跳转与刷新       | `http-equiv="refresh"`         | 控制页面跳转或自动刷新   |
| 浏览器兼容性     | `http-equiv="X-UA-Compatible"` | 指定 IE 的兼容模式       |

`<meta>` 标签虽不直接影响页面可见内容，却是构建优质网页不可或缺的一环。