首页 > 代码库 > 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=1a. 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标签及其应用