HTML <meta> 标签

定义和用法

<meta> 标签定义关于 HTML 文档的元数据。元数据是关于数据的数据（信息）。

<meta> 标签始终位于 <head> 元素 内，通常用于指定字符集、页面描述、关键词、文档作者和视口设置：

元数据不会显示在页面上，但可以被机器解析。

浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据。

提示：meta 元素有多种不同用法，而且一个 HTML 文档中可以多个 meta 元素。

提示：通过 <meta> 标签，有一种方法让网页设计师控制视口（即用户在网页中可见的区域）（请参见下面的"设置视口"实例）。

注意：每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个，那就应该在 head 元素中添加多个 meta 元素。

另请参阅：

HTML 教程：HTML 头部

HTML DOM 参考手册：Meta 对象

实例

<head>
  <meta charset="UTF-8">
  <meta name="description" content="免费的 Web 教程">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

亲自试一试

属性

属性 值 描述
charset 字符集 规定 HTML 文档的字符编码。
content 文本 规定与 http-equiv 或 name 属性关联的值。
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 为 content 属性的信息/值提供 HTTP 标头。
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 规定元数据的名称。

全局属性

<meta> 标签还支持 HTML 中的全局属性。

meta 元素有三种典型的用法：

  1. 指定名/值元数据对
  2. 声明字符编码
  3. 模拟 HTTP 标头字段

1：指定各种名/值元数据对

meta 元素可以使用名/值对定义元数据，为此需要用到其 name 和 content 属性。

为搜索引擎定义关键字：

<meta name="keywords" content="HTML, CSS, JavaScript">

定义有关网页的描述：

<meta name="description" content="Free Web tutorials for HTML and CSS">

定义页面的作者：

<meta name="author" content="John Doe">

设置视口，改善网站在各种设备上的外观：

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

2：声明字符编码

使用 charset 属性声明该页面采用 UTF-8 字符编码：

<meta charset="UTF-8">

3：模拟 HTTP 标头字段

使用 http-equiv 属性和 content 属性，每 30 秒刷新一次文档：

<meta http-equiv="refresh" content="30">

在 HTML5 中的变化

charset 属性在 HTML5 中是新增的。

在 HTML4 中，http-equiv 属性可以有任意多个不同的值。而在 HTML5 中，只能使用本页提到的值。

HTML4 中的 scheme 属性在 HTML5 中已不再使用。

此外，现在已不再使用 meta 元素来指定网页所用的语言。

设置视口

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口。

您应该在所有网页中包含以下 <meta> 视口元素：

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

它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

下面分别是不带视口 meta 标签的网页、以及带视口 meta 标签的网页的例子：

提示：如果您使用手机或平板电脑浏览这张页面，则可以单击下面的两个链接以查看不同之处。



没有视口元标记


带有视口元标记

默认的 CSS 设置

无。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持