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
支持 支持 支持 支持 支持