HTML - 元标记(Meta Tags)介绍 首页HTMLHTML - 元标记(Meta Tags)

HTML使您可以指定元数据<Metadata>-以各种方式有关文档的其他重要信息。 META元素可用于包含描述HTML文档属性的名称/值对,例如作者,有效期,关键字列表,文档作者等。

添加元标签

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

Sr.NoAttribute & 描述
1

Name

属性的名称,示例包括 keywords, description, author, revised, generator etc.

2

content

指定属性的值。

3

scheme

指定一种解释属性值的方案(如content属性中所声明)。

4

http-equiv

用于http响应消息头。例如,http-equiv可用于刷新页面或设置cookie。

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>

这将产生以下输出-

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>

Revision 时间

您可以使用<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="Learnfk, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

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="Learnfk, 3/7/2014" />
      <meta http-equiv="refresh" content="5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Page 重定向

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

以下是5秒钟后将当前页面重定向到另一个页面的示例。

<!DOCTYPE html>
<html>

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

Cookies 设置

Cookies是数据,存储在您计算机上的小文本文件中,并且在Web浏览器和Web服务器之间进行交换,以根据您的Web应用程序需求跟踪各种信息。

您可以使用<meta>标签在客户端存储cookie,以后,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="Learnfk, 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>

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

Author 作者名称

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

Character 字符编码

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

默认情况下,Web服务器和Web浏览器使用ISO-8859-1(Latin1)编码来处理Web页面。以下是设置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>

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 请将遇到的问题写入评论区中,大家一起进步。

祝学习愉快!(您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记