HTML - 元数据标签

HTML <meta> 标签允许我们以各种方式指定元数据，元数据是关于文档的其他重要信息。META 元素可用于包含描述 HTML 文档属性（如作者、过期日期、关键词列表、文档作者等）的**名称**和**内容**对。

HTML <meta> 标签可用于提供额外信息。它是一个自闭合元素，这意味着它不需要结束标签，但会在其属性中携带信息。您可以根据需要在文档中包含一个或多个元标签，但通常情况下，元标签不会影响文档的物理外观，因此从外观角度来看，包含它们与否无关紧要。

使用元标签向网页添加元数据

您可以通过将 <meta> 标签放置在文档的头部（由 <head> 标签表示）中来向您的网页添加元数据。

可以使用 <meta> 标签添加以下元数据

指定关键词
文档修订日期
页面重定向
设置作者姓名

文档描述
文档刷新
设置 Cookie
指定字符集

下面，您可以查看所有示例，这些示例都通过代码很好地描述了我们应该如何在网站上使用个别元标签。

指定关键词

您可以使用 <meta> 标签指定与文档相关的重要的关键词，稍后搜索引擎在索引您的网页以供搜索时会使用这些关键词。

示例

以下是一个示例，其中我们将“HTML、元标签和元数据”作为关于文档的重要关键词添加。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文档描述

您可以使用 <meta> 标签提供关于文档的简短描述。这同样可以被各种搜索引擎在索引您的网页以供搜索时使用。

示例

以下示例演示了如何为网页定义元描述。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文档修订日期

您可以使用 <meta> 标签提供关于上次更新文档的信息。各种网络浏览器在刷新您的网页时可以使用此信息。

示例

以下示例演示了如何定义修订日期。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文档刷新

<meta> 标签可以用来指定网页自动刷新的持续时间。

示例

如果希望您的页面每 5 秒刷新一次，请使用以下语法。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="refresh" content="5" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

页面重定向

您可以使用 <meta> 标签将您的页面重定向到任何其他网页。如果您希望在一段时间后重定向页面，还可以指定持续时间。

示例

以下是如何在 5 秒后将当前页面重定向到另一个页面的示例。如果要立即重定向页面，则不要指定 content 属性。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="refresh" content="5; url=https://tutorialspoint.com" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

设置 Cookie

Cookie 是存储在您计算机上的小型文本文件中的数据，它在 Web 浏览器和 Web 服务器之间交换，以根据您的 Web 应用程序需求跟踪各种信息。

您可以使用 <meta> 标签在客户端存储 Cookie，稍后 Web 服务器可以使用此信息来跟踪网站访问者。如果您不包含过期日期和时间，则 Cookie 被视为会话 Cookie，并在用户退出浏览器时被删除。

示例

以下是如何在 5 秒后将当前页面重定向到另一个页面的示例。如果要立即重定向页面，则不要指定content属性。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

注意：您可以查看 PHP 和 Cookie 教程以获取有关 Cookie 的完整详细信息。

设置作者姓名

您可以使用 <meta> 标签在网页上设置作者姓名。可以通过将“author”值分配给“name”属性来指定作者姓名。

示例

以下示例演示了如何设置作者姓名。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

指定字符集

您可以使用 <meta> 标签指定网页中使用的字符集。默认情况下，Web 服务器和 Web 浏览器使用 ISO-8859-1 (Latin1) 编码来处理网页。

示例

以下是如何设置 UTF-8 编码的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

示例

要使用繁体中文字符提供静态页面，网页必须包含一个 <meta> 标签来设置 Big5 编码。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

视频：HTML 元标签

打印页面