HTML - Meta 标记

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

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

添加 meta 标记的示例

您可以通过在文档的标题内放置 <meta> 标签来向网页添加meta 数据，该标签由 <head > 标签表示。

在这里，您可以检查所有示例，这些示例在代码中得到了很好的描述，即我们应该如何使用我们网站上的独立内容。

指定关键字

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

下面是一个示例，我们在其中添加 HTML、meta 标记和 meta 数据作为文档的重要关键字。


<!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> 标记来提供有关文档上次更新时间的信息。在刷新网页时，各种 Web 浏览器都可以使用此信息。


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

文档刷新

如果您希望页面每 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 秒后将当前页面重定向到另一个页面的示例。如果要立即重定向页面，请不要指定内容属性。


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

设置 Cookie

Cookie 是存储在您计算机上的小文本文件中的数据，它会在 Web 浏览器和 Web 服务器之间交换，以根据您的 Web 应用程序需求跟踪各种信息。您可以使用 <meta> 标签在客户端存储 cookie，然后 Web 服务器可以使用此信息来跟踪站点访问者。如果您不包含过期日期和时间，则该 cookie 将被视为会话 cookie，并将在用户退出浏览器时被删除。

以下是在 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="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
	 	<p>Hello HTML5!</p>
</body>
</html>

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

设置作者姓名

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

打印本页