HTML 元标签 - 易学教程，面试笔记经验！

HTML 允许您以多种方式指定元数据，元数据是有关HTML文档中的其他重要信息。 META 标签可用于包含描述 HTML 文档一些信息，例如网站作者(author)、过期时间(expires)、关键字列表(keywords)、网站描述(description)等。

注意：<meta> 标签没有结束标记，例如 <meta name = "xxx" content = "xxx infomation" />。

您可以根据需要在网站页面中声明这些信息，告诉搜索引擎或者其它的网络服务有哪些附加信息，但它不会在页面中显示出来。

文档中的元标记<meta>

元标记 <meta> 标签放置在 <head> 和 </head> 标签之间。除了核心属性之外，元标记还可以具有以下属性 -

序号	属性和描述
1	name 属性的名称。可以是 application-name、author、description、generator、keywords、viewport。
2	content 指定属性的值。
3	scheme 指定解释属性值的方案（如内容属性中声明的那样）。
4	http-equiv 用于http响应消息头。例如，http-equiv 可用于刷新页面或设置 cookie。值包括 content-type、expires、refresh 和 set-cookie。

指定关键字

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

示例

以下是一个示例，我们在其中添加 HTML, Meta Tags, Metadata 作为文档的重要关键字。

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

测试一下

文档描述

您可以使用 <meta> 标签来给出有关文档的简短描述。各种搜索引擎在为您的网页编制索引以进行搜索时也可以使用此功能。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</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 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "yxjc123, 3/7/2024" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下

文档刷新

示例

如果您希望页面在每次刷新后保持刷新5 秒，然后使用以下语法。

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "yxjc123, 3/7/2024" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下

页面重定向

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

示例

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

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "yxjc123, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.yxjc123.com"/>
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下

设置 Cookie

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

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

示例

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

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

测试一下

如果您不这样做包括到期日期和时间，该 cookie 被视为会话 cookie，并且将在用户退出浏览器时被删除。

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

设置作者

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Yxjc123.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下

指定字符集

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

示例

默认情况下，Web 服务器和 Web 浏览器使用 ISO-8859-1 (Latin1) 编码来处理网页。以下是设置 UTF-8 编码的示例 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "yxjc123.com" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下

要提供繁体中文静态页面，网页必须包含用于设置 Big5 编码的 <meta> 标签 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta 标签例子</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "yxjc123.com" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

测试一下