meta标签总结

Posted 爱博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了meta标签总结相关的知识,希望对你有一定的参考价值。

keywords,description(经常用到的两个)

页面的关键字描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="html,CSS,javascript,php">

<meta name="description" content="html meta标签大全,整理一下加强记忆">

<meta name="author" content="[email protected]" />

 

Content-Type 告诉浏览器当前访问的资源类型

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--告诉浏览器当前访问的资源类型 并声明编码-->

 

refresh  重定向(以下示例5秒后会跳转到:http://blog.csdn.net

<meta http-equiv="refresh" content="5;url="http://blog.csdn.net" />

 

full-screen  全屏显示网页(部分移动端浏览器的专有属性)

<meta name="full-screen" content="yes"/>

 

browsermode  浏览器模式-强制坚屏显示(部分移动端浏览器的专有属性),

<meta name="browsermode" content="application"/>

 

format-detection  数据格式验证渲染: 

telephone:而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!默认开启 
email:浏览器会识别邮箱并加样式,点击可以调用系统默认邮件应用给该地址发邮件,默认开启 
adress:adress=yes就开启了点击地址直接跳转至地图的功能,默认开启

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码

<meta content="telephone=no" name="format-detection" />
<meta content="telephone=no,email=no,adress=no" name="format-detection" />

 

x5-orientation   QQ浏览器强制竖屏

<meta name="x5-orientation" content="portrait"/>

 

x5-fullscreen   QQ浏览器强制全屏

<meta name="x5-fullscreen" content="true"/>

 

x5-page-mode QQ浏览器应用模式

<meta name="x5-page-mode" content="app"/>

 

X-UA-Compatible

IE的兼容模式:以IE的哪个版本去渲染页面(IE=8:以IE8的模式去渲染页面,IE=Edge:以最新版本的IE去渲染页面,当然这个最新指的是你系统装的最高版本的IE)

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

 

enderer

这貌似是360浏览器专用,兼容360的利器啊,,360默认是用IE7去渲染页面的,不管你的系统装了多高版本的IE,这种行为真是业界毒瘤啊。

<meta name="renderer" content="webkit">//默认webkit内核

<meta name="renderer" content="ie-comp">//默认IE兼容模式

<meta name="renderer" content="ie-stand">//默认IE标准模式

 

Expires (期限)

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

 

 

Pragma (cach模式)

说明:禁止浏览器从本地机的缓存中调阅页面内容。
用法:<meta http-equiv="Pragma" Content="No-cach" />
注意:网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。

 

 

Set-Cookie (cookie设定)

说明:浏览器访问某个页面时会将它存在缓存中,下次再次访问时就可从缓存中读取,以提高速度。
当你希望访问者每次都刷新你广告的图标,或每次都刷新你的计数器,就要禁用缓存了。
通常HTML文件没有必要禁用缓存,对于ASP等页面,就可以使用禁用缓存,因为每次看到的页面都是在服务器动态生成的,
缓存就失去意义。如果网页过期,那么存盘的cookie将被删除。
用法:<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
21-Oct-98 16:14:21 GMT; path=/">

 

 

Window-target (显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。
用法:<meta http-equiv="Widow-target" Content="_top">
注意:这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent

 

 

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

说明:在IE的Internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级
别就是通过该参数来设置的。
用法:<meta http-equiv="Pics-label" Contect=“(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/

 

 

Content-Script-Type (脚本相关)

说明:这是近来W3C的规范,指明页面中脚本的类型。
用法:<meta http-equiv="Content-Script-Type" Content="text/javascript" />

 

 

RSS 网站地图-Sitemap

复制代码保存到一个sitemap.xml(或者ror.xml)文件中,然后上传到你应用的根目录下。
并且把下面代码增加到你站点主页的 <head> 标签中,主要是为了方便搜索引擎来读取。
     
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />

如果你的站点地图文件名是ror.xml,记得要把上面代码中的href改成href="ror.xml"
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />

 

 收藏的图标

<link rel="shortcut icon" href="http://c.csdnimg.cn/public/favicon.ico">

 

Content-Type和Content-Language (显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,
浏览器会根据此来调用相应的字符集显示page内容。
用法:<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312″ />
<meta http-equiv="Content-Language" Content="zh-CN" />
注意:
该meta标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码。
如果将其中的“charset=GB2312"替换成“BIG5",则该页面所用的字符集就是繁体中文Big5码。
当你浏览一些国外的站点时,IE浏览器会提示你要正确显示该页面需要下载xx语支持。
这个功能就是通过读取HTML页面meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。
如果系统里没有装相应的字符集,则IE就提示下载。
其他的语言也对应不同的charset,比如日文的字符集是“iso-2022-jp ",韩文的是“ks_c_5601"。

Content-Type的Content还可以是:text/xml等文档类型;
Charset选项:
ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii,
x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr,
iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;
Content-Language的Content还可以是:EN、FR等语言代码。

 

webapp里主要的mate用途

<meta name="apple-touch-fullscreen" content="yes">  添加到主屏幕后,全屏显示。

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

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

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

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

ios中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)

 

apple-touch-icon

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>  

 

ps:

告诉浏览器以什么版本的IE的兼容模式来显示网页
    <meta http-equiv="X-UA-Compatible" content="IE=5" >
    <meta http-equiv="X-UA-Compatible" content="IE=7" >
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    其中最后一行是永远以最新的IE版本模式来显示网页的。
    另外加上Emulate模式
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    Emulate模式后则更重视<!DOCTYPE>
    (细心的人会注意到,用IE9去访问带有x-ua-compatible的页面时是不会出现兼容视图按钮的)

以上是关于meta标签总结的主要内容,如果未能解决你的问题,请参考以下文章

html的meta总结,html标签中meta属性使用介绍

meta标签部分总结

meta标签的总结

关于meta标签使用总结

html的meta总结,html标签中meta属性使用介绍

HTML中meta标签作用及属性总结