HTML - 元标签

HTML 允许您以多种方式指定元数据 - 有关文档的其他重要信息。META 元素可用于包含描述 HTML 文档属性的名称/值对，例如作者、到期日期、关键字列表、文档作者等。

<meta>标签用于提供此类附加信息。该标签是一个空元素，因此没有结束标签，但它在其属性中携带信息。

您可以根据要在文档中保留的信息在文档中包含一个或多个元标记，但一般来说，元标记不会影响文档的物理外观，因此从外观的角度来看，是否包含元标记并不重要他们与否。

将元标签添加到您的文档

您可以通过将 <meta> 标签放置在由<head>和</head>标签表示的文档标题内，将元数据添加到网页中。除了核心属性之外，元标记还可以具有以下属性 -

先生编号	属性及描述
1	姓名属性的名称。可以是任何东西。示例包括关键字、描述、作者、修订版、生成器等。
2	内容指定属性的值。
3	方案指定解释属性值的方案（如内容属性中声明的那样）。
4	http 等效用于http响应消息头。例如，http-equiv 可用于刷新页面或设置 cookie。值包括 content-type、expires、refresh 和 set-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>

文档刷新

例子

如果您希望页面每 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 是存储在您计算机上的小文本文件中的数据，它在网络浏览器和网络服务器之间交换，以根据您的网络应用程序需求跟踪各种信息。

您可以使用 <meta> 标签在客户端存储 cookie，稍后 Web 服务器可以使用此信息来跟踪站点访问者。

例子

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

现场演示

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

如果您不包含过期日期和时间，则该 cookie 被视为会话 cookie，并会在用户退出浏览器时被删除。

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

设置作者姓名

您可以使用元标记在网页中设置作者姓名。请参阅下面的示例 -

例子

现场演示

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