HTML - Meta Tags

原创

admin 4个月前 (08-07) 阅读数 91 #HTML

HTML - Meta Tags

HTML <meta> 标签允许我们以多种方式指定元数据，即关于文档的额外重要信息。META 元素可用于包含描述 HTML 文档属性的 name 和 content 对，例如作者、到期日期、关键词列表、文档作者等。

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

使用 Meta Tags 向网页添加元数据

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

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

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

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

下面，您可以查看所有示例，这些示例都配有代码，详细说明了我们应该如何在网站上使用它们。

指定关键词

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

示例

以下是一个示例，我们添加"HTML、Meta Tags 和 Metadata"作为文档的重要关键词：

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

文档描述

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

示例

以下示例演示了如何为网页定义 meta 描述：

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

文档修订日期

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

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="revised" content="教程点, 2014/3/7" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

文档刷新

<meta> 标签可用于指定一个持续时间，之后您的网页将自动刷新。

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="revised" content="教程点, 2014/3/7" />
   <meta http-equiv="refresh" content="5" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

页面重定向

您可以使用 <meta> 标签将您的页面重定向到任何其他网页。如果您想在经过一定秒数后重定向页面，也可以指定持续时间。

示例

以下示例演示了如何在5秒后将当前页面重定向到另一个页面。如果您希望立即重定向页面，请不要指定 content 属性：

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="revised" content="教程点, 2014/3/7" />
   <meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

设置 Cookie

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

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

示例

以下示例演示了如何在5秒后将当前页面重定向到另一个页面。如果您希望立即重定向页面，请不要指定 content 属性。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="revised" content="教程点, 2014/3/7" />
   <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

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

设置作者名称

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

示例

以下示例演示了如何设置作者名称：

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="author" content="Mahnaz Mohtashim" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

指定字符集

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

示例

以下示例设置 UTF-8 编码：

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags 示例</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="学习 Meta Tags。" />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
   <p>你好 HTML5!</p>
</body>
</html>