meta标签属性及其功能

04月24日 收藏 0 评论 0 前端开发

meta标签属性及其功能

文章申明:转载来源:https://blog.csdn.net/qq_44827845/article/details/115742311

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="具体的参数值">

举例:

<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="参数变量值">

注意:涉及相关时间必须使用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=″2; URL=http://blog.sina.com.cn/s/articlelist_1842736075_11_2.html″>  //使当前某一个网页在2秒后自动转到指定页面中去

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

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

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

<meta http-equiv="Page-Enter" content="revealTrans(duration=5.0, transition=20)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=5.0, transition=20)">

注意:所加网页不能是一个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调用


C 0条回复 评论

帖子还没人回复快来抢沙发