上查看所有课程
HTML <meta> 标签用于表示 HTML 文档的元数据。
元数据是指关于数据的信息（关于 HTML 文档的数据）。元数据包含 charset 属性、name 属性、http-equiv 属性等信息。
<meta> 标签应始终放在 <head> 元素内。例如：
<head>
<meta charset="utf-8" />
</head>在这里，<meta charset = "utf-8"> 告诉浏览器使用 UTF-8 字符编码将机器码转换为人类可读的代码。
元数据属性
Meta 标签可以具有以下属性
charset属性name属性http-equiv属性
我们将详细了解每个属性。
charset 属性
charset 属性定义了 HTML 文档的字符编码。例如：
<meta charset="UTF-8">它有助于在浏览器中正确显示 HTML 页面。UTF-8 是 HTML5 文档唯一有效的编码。
name 属性
name 属性与 content 属性一起以名称-值对的形式提供信息。其中
name- 元数据的名称content- 元数据的值
我们来看一个例子
<meta name="description" content=" In this article you will learn about meta tags.">在这里，我们使用 name 属性来提供关于 HTML 文档描述的信息。content 属性中的文本是描述的值。
name 属性的一些常用值包括 author、keywords、referrer 等。例如：
<head>
<meta name="keywords" content="Meta tag, HTML">
<meta name="author" content="Elon Musk">
</head>在这里，我们使用 meta 标签来提供关于 HTML 文档的关键词和作者的信息。
http-equiv 属性
http-equiv 属性用于为 content 属性的信息提供 HTTP 头。该属性的可能值列表为
- content-security-policy：为文档指定内容策略。它用于指定允许的服务器 URL。例如：
<meta http-equiv="content-security-policy" content="default-src 'self';" />在这里，上述标签指定外部资源仅允许来自 self，即与网页相同的主机。
- content-type: 指定文档的字符编码。它与使用
charset属性相同。它用于设置 HTML 文档的字符编码。例如：
<meta http-equiv="content-type" content="text/html;charset=utf-8" />- default-style: 指定要使用的首选样式表。例如：
<meta http-equiv="default-style" content="stylesheet-1">在这里，如果有多个样式表，ID 为 stylesheet-1 的样式表将优先。
- refresh: 定义文档自动刷新的时间间隔。例如：
<!-- To refresh the site in 3 seconds -->
<meta http-equiv="refresh" content="3" />您可以通过添加 ;url= 后跟 URL，选择将用户重定向到单独的 URL。它应该在时间间隔后放在 content 属性内。
<!-- To redirect to youtube after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.youtube.com" />元数据的使用
元数据的使用如下
- 告诉浏览器如何显示内容或刷新网站。
- 被搜索引擎用于读取 HTML 页面的数据。
- 用于设置视口。视口是指网页的可见区域。例如：
上述代码告诉浏览器以设备的宽度和1倍缩放加载网页。<meta name="viewport" content="width=device-width, initial-scale=1.0">