跳到主要内容

HTML Meta 元素

提示
  1. HTML元标签作用：<meta>标签在HTML文档中表示元数据，包括字符编码、文档描述、关键词等，始终放在<head>元素内。
  2. <meta>的主要属性：包括charset定义字符编码，name和content提供名称-值对形式的信息，http-equiv为content提供HTTP头信息。
  3. 元数据的实际用途：元数据用于指导浏览器如何展示内容、搜索引擎如何读取页面数据，以及设置网页的视口属性。

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="在这篇文章中，你将学习到有关元标签的知识。" />

这里，我们使用了 name 属性来提供 HTML 文档的 description（描述）信息。content 属性内的文本是 description 的值。

name 属性的一些常见值包括 author、keywords、referrer 等。例如，

<head>
  <meta name="keywords" content="元标签, HTML" />
  <meta name="author" content="Elon Musk" />
</head>

这里，我们使用元标签提供了有关 HTML 文档的 keywords（关键字）和 author（作者）的信息。

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：定义文档自刷新的时间间隔。例如，
<!-- 3 秒后刷新网站 -->
<meta http-equiv="refresh" content="3" />

您可以选择性地通过添加 ;url= 后跟 URL，在内容属性内的时间间隔后重定向用户到单独的 URL。

<!-- 3 秒后重定向到 YouTube -->
<meta http-equiv="refresh" content="3;url=https://www.youtube.com" />

元数据的用途​

元数据的用途如下：

  • 告诉浏览器如何显示内容或刷新网站。
  • 被搜索引擎用来读取 HTML 页面的数据。
  • 用于设置视口。视口指网页的可见区域。例如，
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

上述代码告诉

浏览器以设备的宽度和 1x 缩放 加载网页。

最后于 更新