- Web前端开发技术：HTML、CSS、JavaScript（第2版）
- 聂常红
- 1967字
- 2020-08-27 06:18:22
2.3 元信息标记<meta>
meta标记是页面头部区域中的一个辅助性标签，用于提供HTTP标题信息和页面描述信息的设置。
目前，Internet已得到了广泛的应用，并已深入到我们的日常生活中，几乎每一天我们都需要在Internet上查阅各种资料。在大家使用Internet查阅资料时，不知是否曾想过，为什么我们只要输入搜索关键字就可以搜索到相关的资料？而在搜索到的众多资料中，我们又怎么知道哪些信息才是我们真正需要的呢？这些问题通过<meta>标记将很容易得到解决，下面将详细介绍<meta>标记的常用情况。图2-2截取了输入关键字后搜索到的相关信息中的几条信息。
图2-2 百度搜索信息
2.3.1 <meta>标记属性
meta功能虽然强大，使用却很简单，在HTML4中，它只包含3个属性，使用时仅需设置两个属性就可以实现各项功能。表2-2所示为meta标记的各个属性的描述。
表2-2 <meta>标记的属性
http-equiv属性类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确地显示网页内容。name属性用于描述网页，以便于搜索引擎机器人查找、分类。目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类，一个设计良好的meta标记可以大大提高网站被搜索到的可能性。
每一个<meta>实现一种功能，可以在html文件的头部区域中包含任意数量的<meta>标记，以实现多种功能。
2.3.2 设定网页关键字
关键字是为搜索引擎提供的。为提高网页在搜索引擎中被搜索到的概率，我们可以设定多个与网页主题相关的关键字。
基本语法：
<meta name="keywords" content="关键字1,关键字2,关键字3,…">
语法说明：keywords表示“关键字”设置项目，content中设置具体的关键字，不同的关键字使用逗号分隔。需注意的是，虽然设定多个关键字可提高被搜索到的几率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，有时关键字过多，该网页反而会在检索中被忽略掉，所以关键字的输入不宜过多，而应切中要害。
【示例2-2】关键字设置。
<html>
<head>
<title>网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程</title>
<meta name="keywords" content="网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程,计算机类">注（1）
</head>
<body>
</body>
</html>
注（1）：设置一个关于网页制作三剑客教程网页的关键字
2.3.3 设定网页描述信息
网页的描述信息主要用于概述性地描述页面的主要内容，可以作为搜索结果返回给浏览者。像关键字一样，搜索引擎对描述信息的字数也有限制，所以内容应尽量简明扼要。
基本语法：
<meta name="discription" content="网页描述信息">
语法说明：discription表示“描述”设置项目，content中设置具体的描述信息。
【示例2-3】网页描述信息设置。
<html> <head> <title>网页制作三剑客Dreamweaver、Flash、Fireworks综合实例教程</title> <meta name="keywords" content="网页制作三剑客Dreamweaver、Flash、Fireworks 综合实例教程,计算机类"> <meta name="discription" content="本书以Adobe公司的网页制作三剑客Flash、 Dreamweaver和Fireworks为依托，结合建立一个完整网站的实例，完全按照实际的操 作流程，系统地介绍了网站的规划、设计和制作方法，以及上传的全过程。">注（1） </head> <body> </body> </html>
注（1）：设置网页的描述信息
当将示例2-3页面发布到Internet上后，就可以在图2-2所示输入①处的关键字搜索该页面，图2-2中的②处显示的是页面的title，③处显示的是网页的描述信息。结合页面的title和描述信息，可知我们要搜索的信息是第三条。
2.3.4 设定网页字符集
设定页面使用的字符集（即编码），用以说明页面制作所使用的文字语言，浏览器会据此来调用相应的字符集显示页面内容。如果页面中没有显式指明字符集，将使用浏览器默认的字符集显示。中文操作系统下IE浏览器的默认字符集是GB2312。当页面的编码和显示页面内容的编码不一致时，页面中的中文将显示乱码。如页面编码是uft-8，如果没有使用meta设置字符集，则浏览器运行后，页面中的中文将出现乱码，如图2-3所示，通过meta设置字符集可以解决该问题。
图2-3 中文乱码显示
基本语法：
<meta http-equiv="Content-Type" content="text/html; charset=某种字符集">
语法说明：http-equiv传送HTTP通信协议标题头，Content-Type表示“字符集”设置项目，content用于定义文档的MIME类型，以及页面所使用的具体的字符集。当charset取值为gb2132时，表示页面使用的字符集是国标汉字码，目前最新的国标汉字码是gb18030，在实际应用中，我们也经常使用utf-8编码。
【示例2-4】网页字符集设置。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />注（1）
<title>网页字符集设置示例</title>
</head>
<body>
中文乱码示例
</body>
</html>
注（1）：设置网页所使用的字符集为国标汉字码
上述代码在IE浏览器中的运行结果如图2-4所示，可见图2-3中的标题和正文得到了正常显示。
图2-4 设置字符集后中文显示正常
2.3.5 设定网页自动刷新
使用<meta>标记可以实现每隔一定时间刷新页面内容，这一功能常用于需要实时刷新页面的场合，如Internet现场图文直播、聊天室、论坛消息的自动更新等。
基本语法：
<meta http-equiv="refresh" content="刷新间隔时间">
语法说明：http-equiv传送HTTP通信协议标题头，refresh表示刷新功能，content用于设定刷新间隔的时间，单位是秒。
【示例2-5】页面的自动刷新设置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="refresh" content="3">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面的自动刷新设置示例</title>
</head>
<body>
页面每隔3秒刷新一次
</body>
</html>
上述代码在IE浏览器中的运行结果如图2-5所示。
图2-5 页面自动刷新
2.3.6 设定网页自动跳转
使用http-equiv属性值refresh，不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转。这一功能目前已被越来越多的网页所使用，例如，当网站地址有变化时，希望在当前的页面中等待几秒钟后自动跳转到新的网站地址；或者希望首先在一个页面上显示欢迎信息，然后经过一段时间后，自动跳转到指定的网页上。
基本语法：
<meta http-equiv="refresh" content="刷新间隔时间;url=页面地址">
语法说明：http-equiv传送HTTP通信协议标题头，refresh表示刷新功能，content中设定刷新间隔的秒数，以及跳转到的页面地址。
【示例2-6】页面的自动跳转设置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn">注（1）
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面的自动跳转设置示例</title>
</head>
<body>
<p>本页面3秒钟后跳转到新浪网</p>
</body>
</html>
注（1）：在当前页面停留3s后，自动跳转到新浪网站首页
上述代码在IE浏览器中的运行结果如图2-6和图2-7所示。首先显示图2-6所示的当前页面，3s后跳转到新浪首页。
图2-6 当前页面
图2-7 3s后跳到新浪首页