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> 元数据（Metadata）是数据的数据信息。
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
提示和注释
注意: <meta> 标签通常位于<head>区域内。
注意: 元数据通常以 名称/值 对出现。
注意: 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-security-policy content-type default-style refresh |
把 content 属性关联到 HTTP 头部。 |
| name | application-name author description generator keywords viewport |
把 content 属性关联到一个名称。 |
全局属性
<meta> 标签支持 HTML 中的全局属性。
更多实例
实例 1 - 定义文档关键词，用于搜索引擎:
<meta name="keywords" content="HTML, CSS, JavaScript">
实例 2 - 定义web页面描述:
<meta name="description" content="HTML 和 CSS 的免费 Web 教程">
实例 3 - 定义页面作者:
<meta name="author" content="John Doe">
实例 4 - 每30秒刷新页面:
<meta http-equiv="refresh" content="30">
设置视口以使您的网站在所有设备上看起来都很好:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置视口(Viewport)
视口是用户在网页上的可见区域。它随设备的不同而不同 -- 在手机上比在电脑屏幕上小。
您应该在所有网页中包含以下 <meta> 元素:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将为浏览器提供有关如何控制页面尺寸和缩放的说明。
width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（根据设备的不同而有所不同）。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
下面是一个不带 viewport meta 标记的网页示例，以及一个带 viewport meta 标记的网页示例:
提示: 如果您使用手机或平板电脑浏览此页面，可以单击下面的两个链接查看差异。
您可以在我们的响应式 Web 设计 - 视口教程 中了解更多有关视口的信息。
相关页面
HTML 教程: HTML Head
HTML DOM 参考手册: Meta 对象
默认CSS设置
None.
