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>
尝试一下 »
下面还有更多“尝试一下”的示例。
定义和用法
The <meta>
标签定义了有关 HTML 文档的元数据。元数据是关于数据的数据(信息)。
<meta>
标签始终位于 <head> 元素内,通常用于指定字符集、页面描述、关键字、文档作者和视窗设置。
元数据不会在页面上显示,但可以被机器解析。
元数据由浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他网络服务使用。
有一种方法可以让网页设计师通过 <meta>
标签控制视窗(网页的用户可见区域)(请参阅下面的“设置视窗”示例)。
浏览器支持
元素 | |||||
---|---|---|---|---|---|
<meta> | 是 | 是 | 是 | 是 | 是 |
属性
属性 | 值 | 描述 |
---|---|---|
charset | character_set | 指定 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 |
指定元数据的名称 |
全局属性
The <meta>
标签还支持 HTML 中的全局属性.
更多示例
为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, JavaScript">
定义网页的描述
<meta name="description" content="HTML 和 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">
这会向浏览器提供有关如何控制页面尺寸和缩放的指令。
The width=device-width
部分将页面的宽度设置为跟随设备的屏幕宽度(这将根据设备的不同而有所不同)。
The initial-scale=1.0
部分在浏览器首次加载页面时设置初始缩放级别。
以下是一个没有视窗元标签的网页和具有视窗元标签的相同网页的示例
提示:如果您使用手机或平板电脑浏览此页面,可以点击下面的两个链接查看区别。
您可以在我们的 响应式网页设计 - 视窗教程 中阅读有关视窗的更多信息。
相关页面
HTML 教程:HTML 头部
HTML DOM 参考:元对象
默认 CSS 设置
无。