meta标签属性及其功能

梁丘洲

2023-12-01

1.meta标签

<meta>标签是html语言中，head区的一个辅助性标签。几乎所有的网页里，我们都可看到类似网页中<meta>标签的使用，例如下面这段代码：

<head>
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
</head>

<meta>标签的正确使用会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。下面将详细介绍<meta>标签。

2.meta标签属性

<meta>标签有两个属性：http-equiv属性和name属性,不同的属性有不同的参数值，这些不同的参数值就实现了不同的网页功能。

(1)name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
语法格式是：＜meta name="参数" content="具体的参数值"＞

name属性的参数	作用
Keywords(关键字)	告诉搜索引擎你网页的关键字是什么
description(网站内容描述)	告诉搜索引擎你的网站主要内容
robots(机器人向导)	告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
author(作者)	标注网页的作者

举例：

<head>
	<meta name ="keywords" content="science,education,culture,politics,ecnomics，relationships, entertaiment, human">
	<meta name="description" content="This page is about the meaning of science, education,culture.">
	<meta name="robots" content="none">     //content的参数有all,none,index,noindex,follow,nofollow 默认是all
	<meta name="author" content="root,root@21cn.com">
</head>

其中，robots(机器人向导)中content各种信息参数的特点：

all：文件将被检索，且页面上的链接可以被查询
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索
follow：页面上的链接可以被查询
noindex：文件将不被检索，但页面上的链接可以被查询
nofollow：文件将被检索，但页面上的链接不可以被查询

(2)http-equiv属性

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
语法格式是：＜meta http-equiv="参数" content="参数变量值"＞

http-equiv属性的参数	作用
Expires(期限)	设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式)	禁止浏览器从本地计算机的缓存中访问页面内容，访问者将无法脱机浏览。
Refresh(刷新)	自动刷新并指向新页面。
Set-Cookie(cookie设定)	如果网页过期，那么存盘的cookie将被删除。
Window-target(显示窗口的设定)	强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。
content-Type(显示字符集的设定)	设定页面使用的字符集。

注意：涉及相关时间必须使用GMT的时间格式

举例：

<head>	
	<meta http-equiv="expires" content="Tuesday, 12 Jan 2021 18:18:18 GMT">  //必须使用GMT的时间格式
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Refresh" content="2；URL=http://www.root.net">   //在当前页面停留2秒钟后自动刷新到URL网址
	<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 15-Apri-2021 18:18:18 GMT； path=/">   //必须使用GMT的时间格式,设置的cookie的值为 xxx 
	<meta http-equiv="Window-target" content="_top">
	<meta http-equiv="content-Type" content="text/html; charset=gb2312">  //GB2312简体中文；BIG5繁体中文；iso-2022-jp日文；ks_c_5601韩文；ISO-8859-1英文；UTF-8世界通用的语言编码；
</head>

3.meta标签功能

(1)帮助主页被各大搜索引擎登录

meta标签一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。其中最重要的就是对Keywords和description的设置。

<meta name="keywords" content="政治,经济, 科技,文化, 卫生, 情感，心灵，娱乐，生活，社会，企业，交通">
<meta name="description" content="政治,经济, 科技,文化, 卫生, 情感，心灵，娱乐，生活，社会，企业，交通">

（搜索引擎的工作原理：搜索引擎首先派出机器人自动检索页面中的keywords和description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序）因此，我们必须设置好关键字，来提高页面的搜索点击率。

(2)定义页面的使用语言

这是meta标签最常见的功能,在制作网页时,我们在纯HTML代码下都会看到它,它起的作用是定义你网页的语言。当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言,如果你网页设置的是GB码,而浏览者没有安装GB码,这时网页只会呈现浏览者所设置的浏览器默认语言。

<meta http-equiv=″content－Type″ content=″text/html; charset=gb2312″>    //将网页的语言设置成国标码

(3)自动刷新并指向新的页面

如果你想使您的网页在无人控制的情况下，能自动在指定的时间内去访问指定的网页，就可以使用<meta>标签的自动刷新网页的功能。

<meta http-equiv=″refresh″ content=″２; URL=http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html″>  //使当前某一个网页在２秒后自动转到指定页面中去

在上述代码的content中,２代表设置的时间（单位为秒），URL指在规定时间后自动连接的网页地址。

(4)实现网页转换时的动画效果

使用<meta>标签，我们还可以在进入网页或者离开网页的一刹那实现动画效果，在<head>内添加如下代码。

<meta http-equiv="Page-Enter" content="revealTrans(duration=５.０, transition=２０)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=５.０, transition=２０)">

注意：所加网页不能是一个Frame页

(5)网页定级评价

IE4.0以上版本的浏览器可以防止浏览一些受限制的网站,而之所以浏览器会自动识别某些网站是否受限制,就是因为在网站<meta>标签中已经设置好了该网站的级别。
级别的评定是由美国RSAC评级机构评定的,如果你需要评价自己的网站,可以连接到该网站，按要求提交表格,那么RSAC会提供一段<meta>代码给你,复制到自己网页里就可以了。下面是一段样例：

<meta http-equiv=″PICS－Label″
　  content=′(PICS－1.1   ″http://www.rsac.org/ratingsv01.html″
　　l gen true comment ″RSACi North America Server″
　　for ″http://www.rsac.org″
　　on ″2001.08.16T08:15－0500″
　　r (n 0 s 0 v 0 l 0))′>

(6)控制页面缓冲

<meta>标签可以设置网页到期的时间,也就是说,当你在Internet Explorer浏览器中设置浏览网页时,首先查看本地缓冲里的页面,那么当浏览某一网页,而本地缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到<meta>中设置的时间到期,这时候浏览器才会去取得新页面。

<meta http-equiv=″expires″ content="Saturday, 1-May-2021 18:18:18 GMT">   //表示网页的到期时间是2021年5月1日18时18分18秒

(7)控制网页显示的窗口

我们还可以使用<meta>标签来控制网页显示的窗口，只要在网页中加入：

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

这段代码可以防止网页被别人作为一个Frame调用