首页 > 代码库 > meta标签及其应用

meta标签及其应用

META标签是HTML语言HEAD区的一个辅助性标签,提供用户不可见的信息。

meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等等。

META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。
1、Content-Type和Content-Language (显示字符集的设定)
设定页面使用的字符集,用以说明主页制作所使用的文字以及语言,浏览器会根据此来调用相应的字符集显示page内容。
<Meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<Meta http-equiv="Content-Language" Content="zh-CN">
浏览器通过读取HTML页面META标签的Content-Type属性从而得知需要使用哪种字符集显示页面。如果系统里没有装相应的字符集,则会进行相应的下载。
     
2、Refresh (刷新)
让网页多长时间(秒)刷新自己,或在多长时间后让网页自动链接到其它网页。
<Meta http-equiv="Refresh" Content="30">
<Meta http-equiv="Refresh" Content="5; Url=http://www.xxx.com">

3、Expires (期限)
指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。  
<Meta http-equiv="Expires" Content="0">
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)。

4、Page-Enter、Page-Exit (进入与退出)

页面被载入和调出时的一些特效。
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
blendTrans是动态滤镜的一种,产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果。

页面描述信息NAME变量
name是描述网页的,对应于Content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。
1、Keywords (关键字)
为搜索引擎提供的关键字列表

<Meta name="Keywords" Content="关键词1,关键词2,关键词3,关键词4,……">
各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。


2、Description (简介)

Description用来告诉搜索引擎你的网站主要内容。

<Meta name="Description" Content="你网页的简述">


3、Author (作者)
标注网页的作者或制作组

移动页面开发相关

1、viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1
a. width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)
b. height : 和width相对应,指定高度
c. initial-scale : 初始缩放比例,页面第一次加载时的缩放比例
d. maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0
e. minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0
f. user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放

2、format-detection
<meta name=”format-detection” content=”telephone=no” />
telephone=no禁止把数字转化为拨号链接;
telephone=yes开启了把数字转化为拨号链接,默认是情况下是开启。
3、apple-mobile-web-app-capable
<meta name=”apple-mobile-web-app-capable” content=”yes” />
meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
4、apple-mobile-web-app-status-bar-style
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
 作用是控制状态栏显示样式


meta标签及其应用