meta标签总结

Posted 2020-08-17 爱博客

tags:

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

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

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

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

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

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

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

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

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

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" />

收藏的图标

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

默认值为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，这两个会让网页内容以应用程序风格显示，并使状态栏透明。

apple-touch-icon

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