关于meta标签

时间 2019-11-20

标签关于 meta 标签栏目 HTML5 繁體版

原文原文链接

1、Meta标签中的format-detection属性及含义javascript

意为：格式检测php

或许你会有这样的经历：当你在制做手机端的页面中，点击了没有加任何连接的格式的数字时，这时手机会进行自动拔号提示操做！css

禁止这一提示方法：html

加入meta标签，如：<meta name="format-detection" content="telephone=no">java

同理，还会有如下相关操做：web

一、禁止跳转邮箱：<meta name="format-detection" content="email=no">chrome

二、禁止跳转地图：<meta name="format-detection" content="adress=no">浏览器

三、禁止连接高亮：<meta name="msapplication-tap-highlight" content="no">缓存

四、设置响应式网页必备：<meta name="viewport" content="user-scalable=no,initial-scale=1">服务器

（由于：包括iOS上的Safari和Windows Phone上的IE在内的一些移动端浏览器会在超连接元素被触摸（tap）的时候显示一个半透明的高亮背景，禁用这种默认的行为来更好地控制本身站点的外观和体验）

meta是神马？有神马做用？

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处不少。meta 的属性有两种：name和http-equiv。 name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎全部的搜索引擎都使用网上机器人自动查找 meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），因此应该给每页加一个 meta值。比较经常使用的有如下几个：

name 属性

　　一、<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；

　　二、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；

　　注意：各关键词间用英文逗号“,”隔开。META的一般用处是指定搜索引擎用来提升搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并经过用户的语言优先参照来显示搜索结果。例如：
　　　　　　<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
　　　　　　<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

　　三、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；

　　四、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制做的做者；

　　Robots用来告诉搜索机器人哪些页面须要索引，哪些页面不须要索引

　　其中的属性说明以下：

　　设定为all：文件将被检索，且页面上的连接能够被查询；

　　设定为none：文件将不被检索，且页面上的连接不能够被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的连接能够被查询；

　　设定为noindex：文件将不被检索，但页面上的连接能够被查询；

　　设定为nofollow：文件将不被检索，页面上的连接能够被查询。

HTTP-EQUIV

　　HTTP-EQUIV相似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。经常使用的HTTP-EQUIV类型有：

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

　　说明：设定页面使用的字符集，用以说明主页制做所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。

　　用法：

<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"> <Meta http-equiv="Content-Language" Content="zh-CN">

H5中能够简化为

<meta charset="utf-8">

　　注意：　该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(英文)、BIG五、UTF-八、SHIFT-Jis、Euc、Koi8-二、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等语言代码。

二、Refresh (刷新)

　　　说明：让网页多长时间（秒）刷新本身，或在多长时间后让网页自动连接到其它网页。
　　　用法：

<Meta http-equiv="Refresh" Content="30"> <Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">

　　　注意：其中的5是指停留5秒钟后自动刷新到URL网址。

三、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=/">
　　　注意：必须使用GMT的时间格式。

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

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

七、Pics-label (网页RSAC等级评定) ps:这个之前还真不知道
　　　说明：在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 '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/。

八、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也能够用于页面进入与退出效果:

　　　　　　　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种随机选择一种

　　九、MSThemeCompatible (XP主题)
　　　说明：是否在IE中关闭 xp 的主题
　　　用法：<Meta http-equiv="MSThemeCompatible" Content="Yes">
　　　注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

　　十、IE6 (页面生成器)
　　　说明：页面生成器generator，是ie6
　　　用法：<Meta http-equiv="IE6" Content="Generator">
　　　注意：用什么东西作的，相似商品出厂厂商。

　　十一、Content-Script-Type (脚本相关)
　　　说明：这是近来W3C的规范，指明页面中脚本的类型。
　　　用法：<Meta http-equiv="Content-Script-Type" Content="text/javascript">
　　　注意：

移动端特有属性

viewport

可视区域的定义，如屏幕缩放等。告诉浏览器如何规范的渲染网页。

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

format-detection

对电话号码的识别

<meta name="format-detection" content="telphone=no" />

IOS私有属性

apple-mobile-web-app-capable

启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。

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

apple-mobile-web-app-status-bar-style

在webapp模式下，改变顶部状态条的颜色。

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

default(白色，默认) | black(黑色) | black-translucent(半透明)

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

此外；附上一些移动端关于meta的细节用法

1. 添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题">

2. 启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入连接进入并无此效果）

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

3. 百度禁止转码

经过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，很是之恶心。不过咱们能够经过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp转码声明

4. 设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效

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

content 参数：

default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。若是设置为 default 或 black ,网页内容从状态栏底部开始。若是设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

5. 移动端手机号码识别（IOS）

在 iOS Safari （其余浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话连接，好比：

7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双链接线的数字，形如：00-00-00111
11位数字，形如：13800138000

可能还有其余类型的数字也会被识别。咱们能够经过以下的meta来关闭电话号码的自动识别：

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

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能：

<a href="sms:123456">123456</a>

6. 移动端邮箱识别（Android）

与电话号码的识别同样，在安卓上会对符合邮箱格式的字符串进行识别，咱们能够经过以下的meta来管别邮箱的自动识别：

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

一样地，咱们也能够经过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app启动动画

因为iPad 的启动画面是不包括状态栏区域的。因此启动图片须要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小

<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) --> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

（landscape：横屏 | portrait：竖屏）

9. 添加到主屏后的APP图标

指定web app添加到主屏后的图标路径，有两种略微不一样的方式：

<!-- 设计原图 --> <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png" rel="apple-touch-icon">

* apple-touch-icon：在IOS6及如下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格） * apple-touch-icon-precomposed：使用“设计原图图标”

效果：

图标尺寸：

可经过指定size属性来为不一样的设备提供不一样的图标（但一般来讲，咱们只需提供一个114 x 114 pixels大小的图标便可）

官方说明以下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes. For iPhone and iPod touch both of these sizes are required: 57 x 57 pixels 114 x 114 pixels (high resolution) For iPad, both of these sizes are required: 72 x 72 pixels 144 x 144 (high resolution)

10. 优先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

11.viewport模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>