6. meta 标签：字符集与视口

本节目标：掌握每个 HTML 页面必写的两个 meta 标签——字符集声明和视口设置。

<meta> 标签用来描述页面的元信息。它没有结束标签，是空元素。

charset：声明字符编码

<meta charset="utf-8">

这行告诉浏览器：“这个页面用 UTF-8 编码解析”。

为什么重要？ 如果不声明编码，浏览器可能会猜错，导致中文显示成乱码。

Warning

必须写 <meta charset="utf-8">，否则中文页面大概率乱码。这行要放在 <head> 的前面，越早越好。

注意：你保存 HTML 文件时，编辑器本身的编码也要选 UTF-8，两个要一致。

viewport：控制移动端视口

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

这行是移动端页面的标配。拆开看：

属性	值	含义
`width`	`device-width`	视口宽度等于设备屏幕宽度
`initial-scale`	`1.0`	初始缩放比例 100%
`maximum-scale`	`1.0`	最大缩放比例（可选）
`user-scalable`	`no`	是否允许用户缩放（可选）

Note

没有 viewport 声明的话，手机浏览器会按 980px 宽度渲染页面，然后再缩小到屏幕里，字会变得很小。加上 viewport 后，页面才会按真实屏幕尺寸渲染。

常用的 meta 标签

除了 charset 和 viewport，还有一些常见的：

页面描述（SEO 用）

<meta name="description" content="这是一个关于 HTML5 入门的教程网站">

搜索引擎会把这段文字显示在搜索结果里。

关键词（已基本废弃）

<meta name="keywords" content="HTML5, 教程, 前端">

现代搜索引擎已经不太看这个了，很多人用关键词作弊填充，所以现在意义不大。

作者信息

<meta name="author" content="码上学">

完整示例

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML5 入门教程">
  <title>我的网站</title>
</head>

http-equiv 属性

meta 还有个 http-equiv 属性，可以模拟 HTTP 响应头：

<!-- 每 30 秒刷新页面（不推荐） -->
<meta http-equiv="refresh" content="30">

<!-- 指定内容类型和编码（charset 的另一种写法） -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

现代开发中，直接用 <meta charset="utf-8"> 更简洁。

小结

<meta charset="utf-8"> 必须写，防乱码
viewport 是移动端页面的标配
description 有助于 SEO
meta 标签放在 <head> 里

下一节，我们讲 <title> 和 favicon。