HTML5从入门到精通(第4版)
上QQ阅读APP看书,第一时间看更新

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。