- HTML5/CSS3/JavaScript技术大全
- 曹衍龙 汪杰
- 3905字
- 2021-04-01 18:49:03
2.4.2 元信息标签<meta>
<meta>标签的主要作用是在浏览器解释一个HTML页面前预先获得该页面的一些基本资料和属性。也就是说，<meta>标签所定义的是和整个HTML页面本身有关的一些操作。<meta>标签只能出现在<head>标签里。
<meta>标签提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。在html中，<meta>标签不需要设置结束标签，在尖括号内就是<meta>标签内容。在一个HTML页面中可以有多个<meta>标签。<meta>标签可分为两大部分：HTTP标题信息（httpequiv）和页面描述信息（name）。
<meta>标签的主要属性如表2-5所示。
表2-5 <meta>标签的主要属性
下面详细介绍以上几种属性的含义。
（1）http-equiv属性。该属性用于指定<meta>标签的性质或绑定HTTP的响应标签。它与其他属性配合使用，可指定主页所用字符集或通知浏览器自动刷新（重新加载）内容等等。该属性规定<meta>标签其他属性的含义。
（2）name属性。该属性用来定义元信息的名称。name属性和http-equiv属性只能定义一个，不能同时定义两个。
（3）content属性。该属性应根据http-equiv属性或者name属性指定的类型设置相应的内容。如指定主页的关键字或刷新时刻（或时间间隔）等。
（4）charset属性。该属性描述HTML文档所用的字符集。在HTML4种，该属性需要与http-equiv属性配合使用，但是在HTML5中，对该属性进行了重新定义，使用更为简单。
（5）scheme：HTML4中，<meta>支持scheme属性，该属性用于解释content属性的方案。但是在HTML 5中不支持该属性。
下面通过案例学习<meta>标签的应用。
1. 设置页面关键字
在搜索引擎中，检索信息都是通过输入关键字来实现的。关键字是整个网站登录过程中最基本也是最重要的一个部分，是进行网页优化的基础。关键字在浏览网页时是看不到的，它可提供给搜索引擎使用。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。
语法格式：
<meta name="keywords" content="关键字">
语法说明：
在该语法中，name为属性名称，name属性值为“keywords”，也就是设置网页的关键字属性，而content属性则定义具体的搜索关键字。
应用举例（keywords.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="keywords" content="HTML, CSS">
<title>keywords</title>
</head>
<body>
设置搜索关键字
</body>
</html>
代码分析：
以上代码中，加粗的部分通过<meta>标签的name属性设置网页的搜索关键字。name属性值必须被设置为“keywords”，而content属性值应该根据实际文档内容来设置，案例中设置了两个字符串，分别是“HTML”以及“CSS”，多个搜索关键字之间用“，”隔开。
关键字不会显示在页面中，因此这里也就看不到它的效果了。
下面选择关键字时的技巧与原则。
（1）要选择与网站或页面主题相关的文字作为关键字；
（2）揣摩用户会用什么作为搜索词，把这些词放在页面上或直接作为关键字；
（3）关键字可以不止一个，最好根据不同的页面，指定不同的关键字组合，这样页面被搜索到的概率就会大大增加。
2. 设置robots属性
搜索引擎都有自己的“搜索机器人”（ROBOTS），并通过这些ROBOTS在网络中沿着网页上的链接（一般是http和src链接）不断抓取资料，建立自己的数据库。
对于网站管理者和内容提供者来说，有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，可以通过将<meta>标签的name属性值设置为“robots”来解决。
语法格式：
<meta name="robots" content="属性值">
语法说明：
在该语法中，name 属性值必须被设置为“robots”，而content属性值有以下6种选择。
（1）all：表示搜索机器人可以抓取该文档，也可以沿着该页面上的链接继续抓取下去；
（2）none：表示搜索机器人不能抓取该文档，也不能沿着该页面上的链接继续抓取下去；
（3）index：表示搜索机器人可以抓取该文档；
（4）follow：表示搜索机器人可以沿着该页面上的链接继续抓取下去；
（5）noindex：表示文件不能被抓取；
（6）nofollow：表示不能沿着该页面上的链接继续抓取下去。
提示：index、follow、noindex以及nofollow可以相互组合（之间用逗号隔开），组合结果为"index，follow"、"noindex，follow"、"index，nofollow"以及"noindex，nofollow"。其中"index，follow"等同于all，而"noindex，nofollow"等同于none。浏览器缺省值为"ndex，nofollow"。
应用举例（robots.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="robots" content="all">
<title>robots</title>
</head>
<body>
设置机器人搜索
</body>
</html>
代码说明：
以上代码中，加粗部分将<meta>标签的name属性值设置为“robots”，而将content属性值设置为“all”。该设置不会显示在页面中。
3. 设置页面说明
设置页面说明也是为了方便搜索引擎的查找，它用来详细说明网页的内容。页面说明在网页中不显示出来。
语法格式：
<meta name="description" content="页面设置说明">
语法说明：
在该语法中，name属性值必须被设置为“description”，而content属性值被设置为具体的描述语言。
应用举例（description.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="HTML5和FLASH">
<title>description</title>
</head>
<body>
设置页面说明
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的name属性值设置为“description”，而将content属性值设置为“HTML5和FLASH”。该设置同样也不会显示在页面中。
4. 定义编辑工具
<meta>标签可以让开发者在网页头部设置网页编辑软件的名称，以便后续的开发者或者浏览者知道该网页是通过什么软件完成的。
语法格式：
meta name="generator" content="编辑软件的名称">
语法说明：
在该语法中，name属性值必须被设置为“generator”，而content属性值被设置为具体的编辑软件名称。
应用举例（generator.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="NotePad++">
<title>generator</title>
</head>
<body>
设置网页编辑软件
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的name属性值设置为“generator”，而将content属性值设置为“NotePad++”，表示这是通过NotePad++来设计网页的。该设置同样也不会显示在页面中。
5. 设置作者信息
<meta>标签可以让开发者在网页头部设置开发者的名称，以便后续的开发者或者浏览者知道该网页是谁完成的。
语法格式：
<meta name="author" content="作者姓名">
语法说明：
在该语法中，name属性值必须被设置为“author”，而content属性值被设置为具体的作者名称。
应用举例（author.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="author" content="sansan">
<title>author</title>
</head>
<body>
设置作者信息
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的name属性值设置为“author”，而将content属性值设置为“sansan”，表示网页由sansan设计。该设置同样也不会显示在页面中。
6. 设置版权信息
<meta>标签可以让开发者在网页头部设置网页版权信息。
语法格式：
<meta name="copyright" content="版权声明">
语法说明：
在该语法中，name 属性值必须被设置为“copyright”，而content属性值被设置为具体的版权声明。
应用举例（copyright.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta name="copyright" content="版权所有盗版必究">
<title>copyright</title>
</head>
<body>
设置版权信息
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的name属性值设置为“copyright”，而将content属性值设置为“版权所有盗版必究”。该设置同样也不会显示在页面中。
7. 设定网页最新版本
<meta>标签可以让开发者在网页头部设置版本信息或者最后修改信息，以便让用户了解网页的开发进程。
语法格式：
<meta name="revised" content="作者,修改日期">
语法说明：
在该语法中，name属性值必须被设置为“revised”，而content属性值被设置为版本信息或者最后修改信息。
应用举例（revised.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="revised" content="Busywxp,10/10/2011">
<title>revised</title>
</head>
<body>
设定网页版本信息
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的name属性值设置为“revised”，而将content属性值设置为“V1.0，10/10/2011”，表示当前网页版本为1.0，最后修改日期为10/10/2011。该设置同样也不会显示在页面中。
8. 设置页面定时跳转
使用<meta>标签可以使网页在经过一定时间后自动刷新或者跳转，可通过将http-equiv属性值设置为refresh来实现，content属性值可以设置为更新时间。
语法格式：
<meta http-equiv="refresh" content="页面跳转时间;ur=跳转URL地址">
语法说明：
在该语法中，http-equiv属性值必须被设置为“refresh”，而content属性值需要设置跳转时间和跳转的URL地址。其中跳转时间和跳转URL地址之间用分号隔开。
默认情况下，跳转时间以秒为单位。如果不设置url，则表示每隔指定时间刷新本页。
应用举例（refresh.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="20;url=index.html">
<title>refresh</title>
</head>
<body>
20秒后将自动跳转
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的http-equiv属性值设置为“refresh”，而将content属性值设置为“20;url=index.html”，表示浏览器20秒后自动跳转到index.html页面。
跳转效果如图2-7和2-8所示。
图2-7 refresh.html
图2-8 index.html
9. 设定字符集
由于网页面向的国家、地区不同，因此需要针对不同的读者采用不同的字符集和语言。可以通过http-equiv属性来设定字符集以及语言。
语法格式：
<meta http-equiv="content-type" content="text/html;charset=字符集">
语法说明：
在该语法中，http-equiv属性值必须被设置为“content-type”，表示要设置网页类型。而content属性值需要被设置为“text/html；charset=字符集”，字符集表示具体的字符集名称，如GB 2312等，text/html表示网页类型为text/html格式。
应用举例（charset.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content= "text/html; charset=gb 2312">
<title>charset</title>
</head>
<body>
设定字符集
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的http-equiv属性值设置为“content-type”，将content属性值设置为“text/html；charset=gb 2312”，表示将网页字符集设置为GB 2312。
目前通用的字符集大致有如下5种。
（1）GB 2312：表示简体中文；
（2）GBK：GBK是GB 2312的扩展，包含GB 2312的所有汉字，同时包含了繁体字的编码；
（3）BIG5：又称大五码，主要为中国香港与中国台湾使用，是一个繁体字编码；
（4）ISO-8859-1：表示英文编码（欧洲地区常用该编码）；
（5）UTF-8：国际标准编码，能显示多种字符集。
10. HTML5中的字符集
在HTML5中，为标签<meta>增加了字符集属性charset，这样为文档设置字符集就会更加直观、方便。
语法格式：
<meta charset="字符集">
语法说明：
HTML4中没有charset属性，而必须依靠http-equiv属性和content实现。
在该语法中，charset为属性名称，属性值为需要设置的字符集名称。
应用举例（charset-5.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1">
<title>charset</title>
</head>
<body>
HTML5中设置字符集更简单了。
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的charset属性值设置为“ISO-8859-1”，表示将网页字符集设置为ISO-8859-1。
在浏览器中显示的效果如图2-9所示。
图2-9 HTML5中的字符集设置
11. 设置有效期限
通过http-equiv属性的expires属性值可以设置网页的有效期限。一旦网页过期则必须到服务器上重新调用。
语法格式：
<meta http-equiv="expires" content=" Mon,12 May 2001 00:20:00 GMT">
语法说明：
在该语法中，http-equiv属性值必须被设置为“expires”，表示要设定有效期限。而content属性值需要被设置为到期时间。需要注意的是必须使用GMT时间格式。如果将content设置为0，则表示立刻过期。
应用举例（expires.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="expires" content="0">
<title>expires</title>
</head>
<body>
设定有效期限
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的http-equiv属性值设置为“expires”，将content属性值设置为“0”，表示将网页立刻过期。
12. 设置缓存
通过http-equiv属性的cache-control属性值可以设置浏览器是否能将网页缓存在本地电脑中。如果设置为禁止缓存，则浏览器需要每次从服务器重新下载网页。
语法格式：
<meta http-equiv= "cache-control" content="no-cache">
语法说明：
在该语法中，http-equiv属性值必须被设置为“cache-control”，表示缓存控制。而content属性值被设置为no-cache表示禁止缓存。
应用举例（cache-control.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<title>cache-control</title>
</head>
<body>
禁止缓存
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的http-equiv属性值设置为“cache-control”，将content属性值设置为“no-cache”，表示禁止使用缓存。需要注意的是禁止缓存会减慢浏览速度。
13. 设定cookie
通过http-equiv属性的set-cookie属性值可以设置网页的cookie属性。cookie指某些网站为了辨别用户身份、进行会话跟踪而储存在用户本地终端上的数据（通常经过加密）。
语法格式：
<meta http-equiv="set-cookie" content=" Mon,12 May 2012 00:20:00 GMT">
语法说明：
在该语法中，http-equiv属性值必须被设置为“set-cookie”，表示设置cookie。而content属性值需要被设置为cookie的失效时间。需要注意的也是必须使用GMT时间格式。
应用举例（set-cookie.html）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="set-cookie" content="Mon,12 May 2012 00:20:00 GMT">
<title>set-cookie</title>
</head>
<body>
设定COOKIE有效期限
</body>
</html>
代码说明：
在以上代码中，加粗的部分将<meta>标签的http-equiv属性值设置为“set-cookie”，将content属性值设置为“Mon,12 May 2012 00:20:00 GMT”表示cookie的有效期限。