Meta 标签详解

浏览数：38 / 时间：2015年06月09日

Meta标签

一、name属性（页面描述信息）

1、参数：keywords (关键字)

说明：为搜索引擎提供的关键字列表

提示：各关键词间用英文逗号“,"隔开。如果你使用的是中文的标点符号，关键词将不起作用。

2、参数：description (简介)

说明：用来写网页简短描述

3、参数：author (作者)

说明：标注网页的作者或制作组

4、参数：generator (编辑器)

说明：用来记录编辑器名称

5、参数：copyright (版权)

说明：用来标示网页版权或著作权声明

6、参数：distribution(分配目标)

说明：是指网站都在哪些地区范围出现，一般设置为Global即为全球范围

注：元标记分布定义你的网页的分布和应该如何进行分类有关分配的万维网上的方法的水平或程度。一般不用。目前只有三个被分配标签支持的形式分布：

Global - 表示你的网页的目的是为大家

Local - 用于文档的本地分销

IU - 内部使用，并非用于公共分配

7、参数：language (语言)

说明：网页语言的说明

8、参数：designer(设计者)

< meta name="designer" content ="设计者姓名">

说明：网页设计者的说明

提示：一般而言，发布者为个人信息

9、参数：publisher(发布者)

< meta name ="publisher" content ="发布者姓名">

说明：网站发布者的说明

提示：一般而言，发布者为发布公司信息

10、参数：title(主题)

< meta name ="title" content ="your title">
　　说明：网站主题说明
　　提示：通常这里的值是网页的内容标题

11、参数：subject(内容的主题)

< meta name ="subject" content ="your Subject">

说明：主要是指这篇文章的主题是什么，核心内容是什么。

12、参数：abstract(摘要)

< meta name ="abstract" content ="网页页面说明">
　　说明：网页页面说明
　　提示：对页面内容进行简短的描述，常见于内容页面中，可以加强搜索引擎对页面内容的保存，便于用户搜索。

13、参数：expires(期限)

< meta name ="expires" content ="time">
　　说明：网页页面期限
　　提示：必须是GMT标准时间，定义过期时间，超过时间后即不能从cache中调出。

例如：< meta name ="expires" content ="Wed, 11 Feb 2010 00:51:09 EST">

注：在到期meta标签声明搜索引擎时，在您的网站的内容将到期。在到期meta标签定义了文档的到期日期和时间被索引。如果您的网站运行在有限的时间事件或有当你的文档将不再是有效的预设日期，你应该包括到期标记来指示何时从他们的数据库中删除您的网页搜索引擎，将过期的标签是常用与重访标签作为一种手段相结合来获得搜索引擎重新访问一个网站每隔几天。这是常用的网站谁经常更新自己的内容，并希望搜索引擎都有自己的内容的新副本。

Also you will see the value zero "0" to have the page deleted. A better way to do this is using the 301 refer in case of a new page or the 404 - not found.

14、参数：revisit-after(重访时间)

< meta name ="revisit-after" content ="N Days">

　　说明：一般大型网站，蜘蛛爬行频率相当频繁，导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访，例如7 days就是七天访问一次
　　例如：< meta name ="revisit-after" content ="7 days">

15、参数：robots (机器人向导)

index：文件将被检索；（让robot/spider登录）
　　follow：页面上的链接可以被查询；
　　noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
　　nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
　　例如：< meta name ="robots" content ="all">

16、参数：viewport (视区)

说明：移动设备上让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

width：设置layout viewport 的宽度，例子中值为device-width是指设置为设备显示宽度。

height：设置layout viewport 的高度，很少使用。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例（范围从0到10）。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

17、<meta name="apple-mobile-web-app-capable" content="yes" />

说明：这meta的作用就是隐藏苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

18、<meta name="apple-touch-fullscreen" content="yes">

说明：添加到主屏幕后，全屏显示

19、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

20、<meta name="format-detection" content="telephone=no" />

说明：将不识别电话号码、邮箱，告诉设备忽略将页面中的数字识别为电话号码或邮箱

二、http-equiv属性（HTTP标题信息）

1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

说明：HTML 5 新增的 meta 功能 <meta charset="UTF-8">

最常用到的是charset=gb2312、charset=iso-8859-1和charset=utf-8。

1charset=gb2312代表说明网站是采用的编码是简体中文；

2charset=utf-8代表世界通用的语言编码；这个编码可以用到中文、韩文、日文等世界上所有语言编码上；

3charset=iso-8859-1是西欧的编码，代表说明网站是采用的编码是英文；

4charset=big5代表说明网站是采用的编码是繁体中文；

5charset=euc-kr代表说明网站是采用的编码是韩文；

6charset=GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准，GBK包含全部中文字符

2、<meta http-equiv="Content-Language" content="zh-CN">

说明：用以说明主页制作所使用的文字以及语言；

3、<meta http-equiv="refresh" content="n;url=http://yourlink">

说明：定时让网页在指定的时间n内，跳转到页面http://yourlink；

注：IE6~IE10（原页面刷新无效，enter进入可以跳转）

其他浏览器验证成功（原页面刷新有效，enter进入可以跳转）

4、<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT">

说明：可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

5、<meta http-equiv="Pragma" content="no-cache">

说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

　　6、<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

7、<meta http-equiv="windows-Target" content="_top">

强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。

8、<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" content="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

说明：这个是页面被载入和调出时的一些特效。

用法：<Meta http-equiv=Page-Enter Content=blendTrans(Duration=0.5)>

注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

Duration表示滤镜特效的持续时间(单位：秒)

Transition滤镜类型。表示使用哪种特效，取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

注：IE6验证成功（原页面刷新无效，enter进入可以显示），其他浏览器无法验证

9、<meta http-equiv="imagetoolbar" content="false" />

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

Eg: 图片工具栏

注：IE6验证成功，针对<img>标签图片，其他浏览器无法验证

10、<Meta http-equiv="Content-Script-Type" Content="text/javascript">

W3C网页规范，指明页面中脚本的类型。

11、Pics-label (网页RSAC等级评定)

说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级

别就是通过该参数来设置的。

用法：<META http-equiv=Pics-label Content=

(PICS－1.1‘http://www.rsac.org/ratingsv01.html‘

I gen comment ‘RSACi North America Sever‘ by ‘[email protected]‘

for ‘http://www.microsoft.com‘ on ‘1997.06.30T14:21－0500‘ r(n0 s0 v0 l0))>

注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。

12、MSThemeCompatible (XP主题)

说明：是否在IE中关闭 xp 的主题

用法：<Meta http-equiv=MSThemeCompatible Content=Yes>

注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

13、IE6 (页面生成器)

说明：页面生成器generator，是ie6

用法：<Meta http-equiv=IE6 Content=Generator>

注意：用什么东西做的，类似商品出厂厂商。

14、Content-Script-Type (脚本相关)

说明：这是近来W3C的规范，指明页面中脚本的类型。

用法：<Meta http-equiv=Content-Script-Type Content=text/javascript>

15、<meta http-equiv="Cache-Control" content="no-cache">

说明：缓存控制，设定此网页无法被存入缓存，每次打开此页面都需要重新读取。

★Head中的其它一些用法

1、scheme (方案)

说明：scheme can be used when name is used to specify how the value of content should be interpreted.

用法：<meta scheme=ISBN name=identifier content=0-14-043205-1 />

注意：

2、Link (链接)

说明：链接到文件

用法：<Link href=soim.ico rel=Shortcut Icon>

注意：很多网站如果你把她保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松实现这一功能。<LINK> 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於 <HEAD> 标记间，格式如下：

例1、<link rel="apple-touch-icon-precomposed" href="img /pic.png" />

说明：这个link就是设置web app的放置主屏幕上icon文件路径。

图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

例2、<link rel="apple-touch-startup-image" href="img/pic.png" />

说明：Web App启动画面

3、Base (基链接)

说明：插入网页基链接属性

用法：<Base href=http://www.***.net/ target=_blank>

注意：你网页上的所有相对路径在链接时都将在前面加上“http://www.***.com/”。其中target=_blank是链接文件在新的窗口中打开，你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开；改为“_self”链接文件在当前窗口（帧）中打开；改为“_top”链接文件全屏显示。

注：验证成功，相对路径链接

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Meta 标签详解