HTML <meta> 标签
示例
描述 HTML 文档中的元数据
<head>
<meta charset="UTF-8">
<meta name="description" content="免费网页教程">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
<meta> 标签定义 HTML 文档的元数据。元数据是关于数据的数据（信息）。
<meta> 标签始终放在 <head> 元素内，通常用于指定字符集、页面描述、关键字、文档作者和视口设置。
元数据不会显示在页面上，但可以被机器解析。
元数据由浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）和其他 Web 服务使用。
有一种方法可以让网页设计师通过 <meta> 标签来控制视口（用户可见的网页区域）（参见下面的“设置视口”示例）。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <meta> | 是 | 是 | 是 | 是 | 是 |
属性
| Attribute | 值 | 描述 |
|---|---|---|
| charset | character_set | 指定 HTML 文档的字符编码 |
| content | text | 指定与 http-equiv 或 name 属性关联的值 |
| http-equiv | content-security-policy content-type default-style 刷新 |
为 content 属性的信息/值提供 HTTP 标头 |
| name | application-name author 描述 generator keywords viewport |
指定元数据的名称 |
全局属性
<meta> 标签也支持 HTML 中的 全局属性。
更多示例
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义网页的描述
<meta name="description" content="Free Web tutorials for HTML and CSS">
定义页面的作者
<meta name="author" content="John Doe">
每 30 秒刷新文档
<meta http-equiv="refresh" content="30">
设置视口，使您的网站在所有设备上看起来都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置视口
视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这会给浏览器指令，告知如何控制页面的尺寸和缩放。
width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致（这将因设备而异）。
initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。
这是一个没有视口 meta 标签的网页示例，以及同一个网页有视口 meta 标签的示例。
提示：如果您正在用手机或平板电脑浏览此页面，可以点击下面的两个链接来查看差异。
您可以在我们的 响应式网页设计 - 视口教程 中阅读更多关于视口的信息。
相关页面
HTML 教程：HTML Head
HTML DOM 参考：Meta 对象
默认 CSS 设置
无。
