Meta 标签详解

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

1. 设置字符编码

<meta charset="UTF-8" />

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

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

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

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

3. 设置页面作者

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

可声明网页的作者信息。

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

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

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

5. 阻止搜索引擎索引

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

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

6. 自动刷新或跳转页面

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

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

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

<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> 标签虽不直接影响页面可见内容，却是构建优质网页不可或缺的一环。