Meta 标签详解

分享到:

Meta标签

 

一、name属性(页面描述信息)

1、  参数:keywords (关键字)

<meta name="keywords" content="网页关键字">

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

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

2、参数:description (简介)

<meta name="description" content="网页简短描述">

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

3、参数:author (作者)

<meta name="author" content="作者姓名">

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

4、 参数:generator (编辑器)

<meta name="generator" content="编辑器名称">

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

<meta http-equiv="Generator" content="Simple HTML Editor V2.5">

5、 参数:copyright (版权)

<meta name="copyright" content="网页版权">

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

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

<meta name="distribution" content="网页发布地区">

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

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

 

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

Local - 用于文档的本地分销

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

7、参数:language (语言)

<meta name="language" content ="zh-CN">

说明:网页语言的说明

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.

<meta name="expires" content="0">

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

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

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

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

<meta name="robots" content="all|none|index|noindex|follow|nofollow">
  说明:Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all、none、index、noindex、follow、nofollow。默认是all。
  提示:许多搜索引擎都通过放出robot/spider搜索来登录网站,这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
  all:文件将被检索,且页面上的链接可以被查询;
  none:文件将不被检索,且页面上的链接不可以被查询;

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

 

16、参数:viewport (视区)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

       说明:移动设备上让当前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" />

        <meta name="format-detection" content="email=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)>

<Meta http-equiv=Page-Exit Content=blendTrans(Duration=0.5)>

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

<Meta http-equiv=Page-Enter Content=revealTrans(duration=x, transition=y)>

<Meta http-equiv=Page-Exit Content=revealTrans(duration=x, transition=y)>

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 'inet@microsoft.com'

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> 标记间, 格式如下:

<link href=URL rel=relationship>

<link href=URL rev=relationship>

       例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”链接文件全屏显示。

注:验证成功,相对路径链接

 

昵    称:
验证码:

相关文档:

  • -_-#placeholder颜色
    使用CSS修改HTML5inputplaceholder颜色 ::-webkit-input-placeholder{ color:#999; }...
  • 在html中插入音频文件
    1、<embedtype="audio/mp3"src=""autostart=trueloop=false></embed>问题:IE8上正常(通过mediaplayer插件来播放)但在IE6和IE7上不会播放Firefox上要...
  • 【HTML5】HTML5 综合
    HTML5教程: 视频教程:http://www.socss.cn/html5视频教程大集合/ DCloud关于HTML5:http://ask.dcloud.net.cn/docs 开发工具:HBuilder飞一样的编码 HTML5应...
  • HTML5标签与HTML4的区别分析
    (1)概念的变化: HTML5专注内容与结构,而不专注的表现...
  • placeholder的兼容处理方法
    placeholder是html5新增的一个属性,极大的减轻了表单提示功能的实现,但是对于IE6-IE9真的是只能靠自己写啦! 但是在自己写时会掉进了一...
  • 基于html5实现的愤怒的小鸟网页游戏
    之前给大家分享一款基于html5canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏。这款游戏适用浏...
  • html5打开摄像头并用canvas模拟拍照
    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵。根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验。废话不多说...
  • 4款基于html5 canvas充满想象力的重力特效
    今天给大家分享4个物理和重力实验,用来展示htmlcanvas的强大。几年前,所有这些实验都必须使用Java或Flash才能做。在下面这些惊人的例...
  • 9款超绚丽的HTML5/CSS3应用和动画特效
    1、CSS3飘带状3D菜单菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图...
  • Javascript history pushState onpopstate方法做AJAX SEO
    参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://developer.mozilla.org/zh-CN/docs/Mozilla_event_reference/...
  • Html5与CSS3权威指南 百度云下载
    Html5与CSS3权威指南百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm密码:php3...
  • WCF WebSocketsService (HTML5 WebSocket)
    在Web应用中,HTTP协议决定了客户端和服务端连接是“短连接”,即客户端Request,服务端Response,连接断开。要想实现客户端和服务...
  • HTML5之 离线数据存储
    ---Storage接口无论是sessionStorage还是localStorage 属性/方法 返回值 描述-------------------------------------------------------length integer 包含对象数目...
  • browser.html – HTML 实现 Firefox UI
    browser.html是一个实验性的项目,用于证明一个概念:使用HTML重新实现FirefoxUI,并作为一个应用程序。它是基于浏览器的API,并以浏览器...
  • HTML5手机开发——滚动和惯性缓动
    1.滚动 以下是三种实现方式: 1)利用原生的css属性overflow:scroll <divid="parent"style="overflow:scroll;><divid='content'>内容区域</div></d...
  • HTML5预览本地图片
    以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使...
  • HTML5 PACS 医学成像
    http://ivmartel.github.io/dwv/ http://oviyam.raster.in/oviyam2.html https://github.com/ivmartel/dwv https://github.com/ivmartel/dbv http://www.medicor...
  • HTML5+JS 《五子飞》游戏实现(一)规则
    很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家。 该《五子飞》游戏,不是平常大家...
  • 使用Html和ashx文件实现其简单的注册页面
    记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个...
  • SpringMVC 整合 shiro mybatis hibernate html5
    A代码生成器(开发利器);B阿里数据库连接池druid;C安全权限框架shiro 此系统为springmvc+mybaits3.2版本,提供maven的pom.xml文件,另免费赠送hibernate...