2.3 元信息标记<meta>
教学录像：光盘\TM\lx\2\元信息标记．exe
meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找和分类。下面根据功能的不同分别介绍元信息标记的使用方法。
2.3.1 设置页面关键字
设置页面关键字是为了向搜索引擎说明这一网页的关键字，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率，一般可设置多个关键字，之间用逗号隔开。但是由于很多搜索引擎在检索时会限制关键字的数量，因此在设置关键字时不要过多，应“一击即中”。
语法
<meta name="keyname" content="具体的关键字">
语法解释
在该语法中，name为属性名称，这里是“keyname”，也就是设置网页的关键字属性，而在content中则定义了具体的关键字的内容。
实例代码
<html>
<head>
<title>设置页面关键字</title>
<meta name="keyword" content="html，元信息，关键字">
</head>
<body>
</body>
</html>
在该实例中设定了html、“元信息”和“关键字”这3个词语作为该页面的关键字。
2.3.2 设置页面描述
设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。
语法
<meta name="description" content="对页面的描述语言">
语法解释
在该语法中，name为属性名称，这里设置为“description”，也就是将元信息属性设置为页面描述，在content中定义具体的描述语言。
实例代码
<html>
<head>
<title>设置页面描述</title>
<meta name="keyword" content="html，元信息，关键字">
<meta name="description" content="关于HTML使用的网站">
</head>
<body>
</body>
</html>
在该实例中，设置了网页的描述为“关于HTML使用的网站”。
2.3.3 设置编辑工具
现在有很多编辑软件都可以制作网页，在源代码的头页面中可以设置网页编辑工具的名称。与其他meta元素相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。
语法
<meta name="generator" content="编辑软件的名称">
语法解释
在该语法中，name为属性名称，这里设置为generator，也就是设置编辑软件的名称，然后在content中定义具体的编辑软件的名称。
实例代码
<html>
<head>
<title>设置编辑工具</title>
<meta name="keyword" content="html，元信息，关键字">
<meta name="description" content="关于HTML使用的网站">
<meta name="generator" content="Adobe Dreamweaver CC">
</head>
<body>
</body>
</html>
在这一实例中，以Adobe Dreamweaver CC作为网页的编辑工具。
2.3.4 设定作者信息
在页面的源代码中，可以显示页面制作者的姓名及个人信息。这可以在源代码中保留作者希望保留的信息。
语法
<meta name="author" content="作者的姓名">
语法解释
在该语法中，name为属性名，设置为“author”，即设置作者信息，在content中定义具体的信息。
实例代码
<html>
<head>
<title>设定作者信息</title>
<meta name="keyword" 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.2所示。
表2.2 content值与其对应的含义
实例代码
<html>
<head>
<title>限制搜索方式</title>
<meta name="robots" content="index">
</head>
<body>
</body>
</html>
2.3.6 设置网页文字及语言
在网页中还可以通过语句来设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要手动选取。
语法
第一种方法：<meta http-equiv="Content-Type" content="text/html; charset=字符集类型">
第二种方法：<meta http-equiv="Content-Language" content="语言">
语法解释
在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，而在content中才设具体的属性值。其中charset设置了网页的内码语系，也就是字符集的类型，charset往往设置为gb2312，即简体中文。英文是ISO-8859-1字符集，此外还有BIG5、utf-8、shift-Jis、Euc、Koi8等字符集。如果采用第二种方法，则简体中文的设置为：
<meta http-equiv="Content-Language" content="zh_CN">
2.3.7 设置网页的定时跳转
在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他页面中，这就是网页的跳转。使用HTTP代码就可以很轻松地实现这一功能。
语法
<meta http-equiv="refresh" content="跳转时间；url=链接地址">
语法解释
在该语法中，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。
实例代码
<html>
<head>
<title>设置网页的定时跳转</title>
<meta http-equiv="refresh" content="3; url=http://www.mingribook.com">
</head>
<body>
您好，本页在3秒之后将自动跳转到明日图书网
</body>
</html>
运行程序代码，效果如图2.2所示。在3秒之后，网页自动跳转到了明日图书网站，如图2.3所示。
图2.2 运行自动跳转的页面
图2.3 跳转后的页面
2.3.8 设定有效期限
在某些网站上会设置网页的到期时间，一旦过期则必须到服务器上重新调用。
语法
<meta http-equiv="expires" content="到期的时间">
语法解释
在该语法中，到期的时间必须是GMT时间格式，即星期，日 月 年 时 分 秒，这些时间都使用英文和数字进行设定。
实例代码
<html>
<head>
<title>设置有效期限</title>
<meta http-equiv="expires" content="Web, 14 september 2011 16:20:00 GMT ">
</head>
<body>
</body>
</html>
在本实例中设置了网页的到期时间为2011年9月14日16:20。
2.3.9 禁止从缓存中调用
使用网页缓存可以加快浏览网页的速度，因为缓存将曾经浏览过的页面暂存在电脑中，当用户下次打开同一个网页内容时，即可快速浏览该网页，省却读取同一网页的时间。但是如果网页的内容频繁地更新，网页制作者希望用户随时都能查看到最新的网页内容，则可以通过meta语句禁用页面缓存。
语法
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content=" no-cache ">
语法解释
在该语法中，cache-control和pragma都可以用来设定缓存的属性，而在content中则是真正禁止调用缓存的语句。
实例代码
<html>
<head>
<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时间格式。
实例代码
<html>
<head>
<title>删除过期的cookie</title>
<meta http-equiv="set-cookie" content=" Web, 14 september 2011 16:20:00 GMT">
</head>
<body>
</body>
</html>
在实例中，设置了网页的到期时间为2011年9月14日16:20，即到该时间就删除存盘的cookie。
2.3.11 强制打开新窗口
强制网页在当前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。
语法
<meta http-equiv="windows-target" content="_top">
语法解释
在该语法中，windows-target表示新网页的打开方式，而content中设置_top则代表打开的是一个独立页面。
实例代码
<html>
<head>
<title>强制打开新窗口</title>
<meta http-equiv="windows-target" content="_top">
</head>
<body>
</body>
</html>
2.3.12 设置网页的过渡效果
在浏览某些网站时，常常会在进入或退出某个网页时看到一些过渡效果，使得网页更加生动。这些效果在meta属性中就可以实现。
语法
<meta http-equiv="过渡事件" content="revealtrans(duration=过渡效果持续时间，transition=过渡方式)">
语法解释
在该语法中，过渡事件可以进入页面或者离开页面。进入页面的http-equiv值为page-enter，离开页面的http-equiv值为page-exist。过渡效果的持续时间默认情况下以秒为单位，过渡方式的编号及含义如表2.3所示。
表2.3 过渡方式的编号及含义
【例2.1】利用本实例来演示进入和离开网页的过渡效果，其中以随机水平线效果进入页面2-enter.html，而以垂直百叶窗效果展开页面2-exit.html。（实例位置：光盘\TM\sl\2\1）
其实现的过程如下。
（1）建立一个2-gd.html页面，设置该页面的背景颜色为橘色，在该页面中插入一张图片，以便更清晰地观察到页面切换转场的效果，同时在该页面中插入两个链接文字，分别是“进入网页”和“离开网页”，其实现的代码如下。
<html>
<head>
<title>页面的过渡效果</title>
</head>
<body bgcolor="#FFCC00">
<center><h2>页面的过渡效果</h2>
<img src="images/1.jpg" width="498" height="349" /><br/><br/><br/>
<a href="2-enter.html">进入网页</a><br/><br/><br/>
<a href="2-exit.html">离开网页</a>
</center>
</body>
</html>
运行效果如图2.4所示。
图2.4 页面的过渡效果
（2）当单击图2.4中的“进入网页”超链接后，将在浏览器中显示随机水平线的切换转场效果，如图2.5所示，3秒钟过后，进入到如图2.6所示的页面，单击“返回”超链接后回到2-gd.html。
图2.5 进入页面的水平线效果
图2.6 页面的进入页
其实现的代码如下。
<html>
<head>
<title>页面的进入效果</title>
<meta http-equiv="page-enter" content="revealtrans(duration=3, transition=21)"/>
</head>
<body bgcolor="#FFCC99">
<center><h2>显示页面的进入效果</h2>
<img src="images/2.jpg" width="498" height="462" /><br /><br />
<a href="2-gd.html">返回</a>
</center>
</body>
</html>
（3）当单击图2.4中的“离开网页”超链接后，进入到如图2.7所示的网页的离开页面，单击“返回”超链接后，再回到如图2.8所示的页面过程中，经过5秒钟，显示退出页面时的垂直百叶窗切换转场效果，最终返回如图2.4所示的页面。
图2.7 页面的退出页
图2.8 页面的垂直百叶窗退出效果
其实现的代码如下。
<html>
<head>
<meta http-equiv="page-exit" content="revealtrans(duration=5, transition=8)"/>
<title>页面的离开效果</title>
</head>
<body bgcolor="#FFCC99">
<center><h2>显示页面的退出效果</h2>
<img src="images/3.jpg" width="498" height="462" /><br /><br />
<a href="2-gd.html">返回</a>
</center>
</body>
</html>
注意
本例在IE9及以上版本不能正常实现过渡效果，建议用IE6运行本例，以便更好地了解网页的过渡效果。
2.3.13 设定建立网站的日期
在HTML5中可以设定网站建立的日期。
语法
<meta name="build" content="网站建立的日期">
语法解释
在该语法中，build表示要设定网站建立的日期，在content中定义网站建立的具体时间。
实例代码
<html>
<head>
<title>设定网站建立日期</title>
<meta name="build" content="2008.08.08">
</head>
<body>
</body>
</html>
在实例中，设置了网页的建立时间为2008年8月8日。
2.3.14 设定网页版权信息
通过设置可以说明网页的版权信息。
语法
<meta name="copyright" content="网页版权信息">
语法解释
在该语法中，copyright表示要设定网页的版权信息，在content中定义网页版权的具体信息。
实例代码
<html>
<head>
<title>设定网页版权</title>
<meta name="copyright" content="明日科技">
</head>
<body>
</body>
</html>
在实例中，设置了网页的版权信息，网页版权为明日科技。
2.3.15 设定联系人的邮箱
通过设置可以设定联系人的邮箱。
语法
<meta name="reply-to" content="邮箱地址">
语法解释
在该语法中，reply-to表示要设定网站联系人的邮箱，在content中定义网站联系人具体的邮箱地址。
实例代码
<html>
<head>
<title>设定网站联系人邮箱</title>
<meta name="reply-to" content="mingrisoft@mingrisoft.com">
</head>
<body>
</body>
</html>
在实例中，设置了网站联系人的邮箱地址为mingrisoft@mingrisoft.com。