2.3　元信息标签<meta>

<meta>标签提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，<meta>标签不需要设置结束标签，在一对尖括号中的所有内容就是一个meta的信息，而在一个HTML头页面中可以有多个<meta>标签。<meta>标签的属性有两种：name和http-equiv。其中，name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。下面根据功能的不同分别介绍元信息标签的使用方法。

2.3.1　设置页面关键字

设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，这可以提高被搜索到的概率。一般可设置多个关键字，关键字之间用逗号隔开。但是，由于很多搜索引擎在检索时会限制关键字数量，因此在设置关键字时不要过多，应“一击即中”。设置页面关键字的语法格式如下。

     <meta name=" keywords " content="具体的关键字">

在该语法中，name为属性名，keywords为属性值，该属性用于设置页面的关键字，而在content中则定义具体的关键字的内容。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>设置页面关键字</title>
          <meta name=" keywords " content="html,元信息,关键字">
     </head>
     <body>
     </body>
     </html>

在该实例中设定了“html”“元信息”“关键字”3个词语作为该页面的关键字。

2.3.2　设置页面描述

设置页面描述也是为了便于搜索引擎的查找。它用来描述网页的主题等，与关键字一样，设置的页面描述也不会显示在网页中。语法格式如下。

     <meta name="description" content="对页面的描述">

在该语法中，name为属性名称，这里将它设置为description，也就是将元信息属性设置为页面描述，在content中定义具体的描述。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设置页面描述</title>
          <meta name=" keywords " content="html,元信息,关键字">
          <meta name="description" content="关于HTML使用的网站">
     </head>
     <body>
     </body>
     </html>

在该实例中，设置了“关于HTML使用的网站”为网页的描述。

2.3.3　设置编辑工具

现在有很多编辑软件都可以用于制作网页，在源代码的头页面中可以设置网页编辑工具的名称。与<meta>标签中的其他属性相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。设置编辑工具的语法格式如下。

     <meta name="generator" content="编辑软件的名称">

在该语法中，name为属性名，generator为属性值，该属性用于设置编辑工具，在content中定义具体的编辑器名称。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>设置编辑工具</title>
          <meta name=" keywords " content="html,元信息,关键字">
          <meta name="description" content="关于HTML使用的网站">
          <meta name="generator" content="WebStorm“>
     </head>
     <body>
     </body>
     </html>

在这一实例中，以WebStorm作为网页的编辑工具。

2.3.4　设定作者信息

在页面的源代码中，可以显示页面制作者的姓名及个人信息。这可以在源代码中保留作者希望保留的信息。设定作者信息的语法格式如下。

     <meta name="author" content="作者的姓名">

在该语法中，name为属性名，它被设置为author，也就是它被设置为作者信息，在content中定义具体的信息。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>设定作者信息</title>
          <meta name=" keywords " content="html,元信息,关键字">
          <meta name="description" content="关于HTML使用的网站">
          <meta name="generator" content=" Adobe Dreamweaver CS5.5">
          <meta name="author" content="李小米">
     </head>
     <body>
     </body>
     </html>

在这一实例中，将作者的姓名“李小米”添加到了网页的源代码中。

2.3.5　限制搜索方式

网页可以通过<meta>标签中的属性设置来限制搜索引擎对页面的搜索方式。语法格式如下。

     <meta name="robots" content="搜索方式">

在该语法中，搜索方式的值及其对应的含义如表2.4所示。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>限制搜索方式</title>
          <meta name="robots" content="index">
     </head>
     <body>
     </body>
     </html>

表2.4　content值及其对应的含义

2.3.6　设置网页文字及语言

在网页中，还可以设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要手动选取。设置网页文字及语言的方法有两种，分别如下。

　第一种方法：

     <meta http-equiv="Content-Type" content="text/html; charset=字符集类型">

在该语法中，http-equiv用于指定HTTP通信协议的标头，content用于设置具体的属性值，charset用于设置网页编码，它通常被设置为utf-8，此外还有BIG5、GB 2312、Shift-JIS、Euc、Koi8等字符集。

　第二种方法：

     <meta http-equiv="Content-Language" content="语言">

在该语法中，如果设置页面为以简体中文显示，则应该使用如下代码。

     <meta http-equiv="Content-Language" content="zh_CN">

上述为HTML通用的设置网页编码的方式。在HTML5中，设置网页编码格式更加简单化，即通过<meta>标签中的charset属性直接设置编码格式，其用法如下。

     <meta charset="utf-8">

2.3.7　设置网页的定时跳转

用户在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他页面，这就是网页的跳转。通过<meta>标签中的http-equiv属性设置，你可以很轻松地实现这一功能。语法格式如下。

     <meta http-equiv="refresh" content="跳转时间;url=链接地址">

在该语法中，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>设置网页的定时跳转</title>
          <meta charset="utf-8">
          <meta http-equiv="refresh" content="3;url=http://www.mingribook.com">
     </head>
     <body>
          您好，本页在3秒之后将自动跳转到明日图书网
     </body>
     </html>

运行程序，效果如图2.37所示。在3秒之后，网页自动跳转到明日图书网，如图2.38所示。

图2.37　运行自动跳转的页面

图2.38　跳转后的页面

2.3.8　设定有效期限

在某些网站上会设置网页的到期时间，一旦过期，就必须到服务器上重新调用。实现这一功能的语法格式如下。

     <meta http-equiv="expires" content="到期的时间">

在该语法中，到期的时间必须是GMT时间格式，即“星期，日月年时：分：秒”，这些时间都使用英文和数字进行设定。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>设置有效期限</title>
          <meta charset="utf-8">
          <meta http-equiv="expires" content="Wed, 14 september 2023 16:20:00 GMT ">
     </head>
     <body>
     </body>
     </html>

在实例中设置了网页的到期时间为2023年9月14日星期三16:20:00。

2.3.9　禁止从缓存中调用

使用网页缓存可以加快浏览器网页的速度，因为缓存将曾经浏览过的页面暂存在计算机中，当用户下次打开同一个网页内容时，即可快速浏览该网页，节省了读取同一网页的时间。但是，如果网页的内容经常频繁地更新，并且你希望用户随时都能查看到最新的网页内容，那么你可以通过<meta>标签中的http-equiv属性设置禁用页面缓存。语法格式如下。

     <meta http-equiv="cache-control" content="no-cache">
     <meta http-equiv="pragma" content=" no-cache ">

在该语法中，cache-control和pragma都可以用来设定缓存的属性，而在content中则是真正禁止调用缓存的语句。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>禁止从缓存中调用</title>
          <meta http-equiv="cache-control" content="no-cache">
          <meta http-equiv="pragma" content=" no-cache ">
     </head>
     <body>
     </body>
     </html>

2.3.10　删除过期的cookie

如果网页过期，则删除存盘的cookie。语法格式如下。

     <meta http-equiv="set-cookie" content="到期的时间">

在该语法中，到期的时间同样是GMT时间格式。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>删除过期的cookie</title>
          <meta http-equiv="set-cookie" content=" Wed, 14 september 2023 16:20:00 GMT">
     </head>
     <body>
     </body>
     </html>

在实例中，设置了网页的到期时间为2023年9月14日星期三16:20:00，即保存的cookie被删除的时间。

2.3.11　强制打开新窗口

强制网页在当前窗口中显示为独立的页面，可以防止自己的网页被其他人当作一个frame页调用。语法格式如下。

     <meta http-equiv="windows-target" content="_top">

在该语法中，windows-target表示新网页的打开方式，而content中设置_top则代表打开的是一个独立页面。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <title>强制打开新窗口</title>
          <meta charset="utf-8">
          <meta http-equiv="windows-target" content="_top">
     </head>
     <body>
     </body>
     </html>

2.3.12　设定建立网站的日期

通过<meta>标签中的name属性设置，你可以设定网站建立的日期。语法格式如下。

     <meta name="build" content="网站建立的日期">

在该语法中，build表示要设定网站建立的日期，在content中定义网站建立的具体时间。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设定网站建立日期</title>
          <meta name="build" content="2023.08.08">
     </head>
     <body>
     </body>
     </html>

在实例中，设置了网页的建立时间为2023年8月8日。

2.3.13　设定网页版权信息

通过<meta>标签中的name属性设置，你可以设定网页的版权信息。语法格式如下。

     <meta name="copyright" content="网页版权信息">

在该语法中，copyright表示要设定网页的版权信息，在content中定义网页版权的具体信息。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设定网页版权</title>
          <meta name="copyright" content="明日科技">
     </head>
     <body>
     </body>
     </html>

在该实例中，设置了网页的版权信息为明日科技。

2.3.14　设定联系人的邮箱

通过<meta>标签中的name属性设置，你可以设定网站联系人的邮箱。语法格式如下。

     <meta name="reply-to" content="邮箱地址">

在该语法中，reply-to表示要设定网站联系人的邮箱，在content中定义网站联系人的具体的邮箱地址。实例代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设定网站联系人邮箱</title>
          <meta name="reply-to" content="mingrisoft@mingrisoft.com">
     </head>
     <body>
     </body>
     </html>

在该实例中，设置了网站的联系人邮箱地址为mingrisoft@mingrisoft.com。

上一章目录下一章