Html 简明教程

HTML - Meta Tags

标签让我们能够以多种方式指定元数据，这些元数据是关于文档的额外重要信息。我们可以使用 META 元素来包含描述 HTML 文档属性的名/值对，例如作者、过期日期、关键字列表、文档作者等。

标签可用于提供额外信息。它是一个自闭合元素，这意味着它不需要一个闭合标记，但它在属性中承载信息。可以根据想要在文档中保留哪些信息在文档中包含一个或多个元标记，但一般而言，元标记不会影响文档的外观，因此从外观的角度来看，包括或不包括它们都没有关系。

Examples of Adding Meta Tags

可以向网页添加元数据，方法是在文档的主体中放置 <meta> 标记，该主体由标签表示。

下面的示例展示了我们应该如何在网站上使用个体示例的所有内容，这些示例用代码进行了详细描述。

Specifying Keywords

可以使用 <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>

Document Description

可以使用 <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>

Document Revision Date

可以使用 <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>

Document Refreshing

可以使用 <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>

Page Redirection

可以使用 <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=http://www.tutorialspoint.com" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

Setting Cookies

Cookie 是数据，存储在计算机上较小的文本文件中，它在网络浏览器和网络服务器之间进行交换，以便根据网络应用程序需要跟踪各种信息。可以使用 <meta> 标记在客户端存储 cookie，以后可以由 Web 服务器使用此信息来跟踪网站访问者。如果不包括到期日期和时间，则 cookie 被视为会话 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>

Setting 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>

Specify Character Set

可以使用 <meta> 标记来指定网页中使用的字符集。

默认情况下，网络服务器和网络浏览器使用 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>

Video - HTML Meta Tag