引入
<meta> 标签用于给网页添加一些“说明信息”，这些信息一般不会直接显示在页面上。
它主要写在 <head> 中，用来告诉浏览器、搜索引擎和设备一些页面相关的设置。
正文
定义
定义
<meta>是 HTML 中用于定义页面元数据的标签，常见用途包括设置字符编码、页面描述、关键词、视口等。
元数据可以理解为“描述网页的数据”。
它不直接出现在页面正文里，但会影响网页如何被解析、显示和搜索。
语法
<meta> 通常写在 <head> 标签内部。
<head>
<meta charset="UTF-8">
<meta name="description" content="这是一个 HTML 学习页面">
</head><meta> 是空元素，不需要写结束标签。
字符编码
charset 用于设置网页的字符编码。
<meta charset="UTF-8">UTF-8 是现在最常用的编码方式，可以正常显示中文、英文、符号等内容。
如果字符编码设置不正确，中文可能会出现乱码。
其他常见编码：
- GBK / GB2312 — 中文编码，老旧中文网站（2000年代）常见
- ISO-8859-1 (Latin-1) — 西欧语言，早期网站默认
- Windows-1252 — Windows 西欧编码
- Shift_JIS — 日文编码
- Big5 — 繁体中文编码（台湾老网站）
可能遇到的位置：
- 老旧网站、遗留企业/政府系统
- 旧数据库（Latin1 / GBK）
- Windows 记事本的 ANSI 文件（实际是 GBK）
- 日韩网站（使用本地编码）
乱码的本质： 文件编码与浏览器解析时所使用的编码不一致。
视口设置
viewport 用于控制网页在移动设备上的显示方式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">其中：
width=device-width表示页面宽度等于设备屏幕宽度initial-scale=1.0表示页面初始缩放比例为 1
这个标签在移动端页面中很常见，通常是响应式网页的基础设置。
其他 viewport 属性：
| 属性 | 作用 | 示例值 |
|---|---|---|
minimum-scale | 最小缩放比例 | 0.5 |
maximum-scale | 最大缩放比例 | 3.0 |
user-scalable | 是否允许用户缩放 | yes / no |
viewport-fit | 全面屏适配 | cover |
<!-- 禁止缩放（活动页/部分APP） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 刘海屏全屏 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">禁止缩放（
user-scalable=no）会影响无障碍体验，一般不建议。
页面描述
description 用于描述网页内容。
<meta name="description" content="这是一个记录 HTML 基础知识的学习笔记。">搜索引擎可能会把这段内容显示在搜索结果中。
它的作用不是直接改变页面显示，而是帮助别人和搜索引擎理解这个页面讲什么。
关键词
keywords 用于设置网页关键词。
<meta name="keywords" content="HTML, 前端, 网页开发">以前它对搜索引擎比较重要，现在作用已经没有那么大，但仍然可以作为页面信息补充。
作者
author 用于说明网页作者。
<meta name="author" content="Heiyedao">这个信息通常不会显示在页面上，主要是作为网页元信息存在。
自动刷新或跳转
http-equiv="refresh" 可以让页面自动刷新或跳转。
<meta http-equiv="refresh" content="5">上面表示页面每 5 秒刷新一次。
也可以设置几秒后跳转到另一个地址。
<meta http-equiv="refresh" content="3; url=https://example.com">上面表示 3 秒后跳转到 https://example.com。
这种写法不建议滥用，因为自动跳转可能影响用户体验。
浏览器兼容设置
有些旧页面会写下面这种设置：
<meta http-equiv="X-UA-Compatible" content="IE=edge">它主要用于旧版 IE 浏览器兼容，现在新项目中不一定需要重点关注。
常见完整写法
基础页面头部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个 HTML 学习页面。">
<title>HTML meta 标签</title>
</head>
<body>
<h1>HTML meta 标签</h1>
</body>
</html>一般实际项目中，charset 和 viewport 很常见，description 也经常用于 SEO。
特点
<meta>通常写在<head>中<meta>是空元素，不需要结束标签<meta>不会直接显示在页面正文里charset用于设置字符编码viewport常用于移动端适配description可以帮助搜索引擎理解页面内容http-equiv可以模拟一些 HTTP 响应头效果
注意事项
charset="UTF-8"建议尽量写在<head>靠前位置- 移动端页面通常需要写
viewport description不要写得太长，简单说明页面内容即可keywords现在对 SEO 的影响有限，不要堆关键词- 自动刷新和自动跳转不要滥用，容易影响用户体验
<meta>只负责页面元信息，不负责页面正文内容
理解
可以把 <meta> 理解为网页的“说明书”和“配置项”。
页面正文是给用户看的，而 <meta> 更多是给浏览器、搜索引擎、设备看的。
它的作用不是展示内容，而是帮助网页被正确解析、显示和理解。
引出
理解 <meta> 标签之后，可以继续学习 HTML 文档结构，把 <head>、<body> 和页面整体结构联系起来理解。