活动前端第二弹

举手投足前端第二弹:善用meta

2016/04/19 · CSS ·
Meta

初稿出处:
杜瑶(@doyoe)   

前言

meta是html语言head区的一个扶助性标签。也许你觉得这几个代码可有可无。其实假若你可以用好meta标签,会给您带来意料之外的意义,meta标签的法力有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并对准新的页面,达成网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页突显的窗口等!

前言

在挪动前端第一弹:viewport详解中,我们讲了viewport,那是一个有关meta的故事。本次大家会就将meta那一个故事讲得更宽广、更幽默一些。

写过HTML的童鞋,应该都对这几个不陌生,或用它来定义页面编码,或用它来定义搜索引擎抓取格局,或用它定义页面关键字,描述等等。

Meta标签是HTML语言head区的一个接济性标签,它座落HTML文档底部的head标记和title标记之间,它提供用户不可见的新闻。它可用以浏览器(如何浮现内容或重复加载页面),搜索引擎(关键词),或其余web服务。
  我现将前端页面开发常常使用的meta标签内容整理成文,参加了运动端web开发meta音信,供要求时翻看。

前言

在挪动前端第一弹:viewport详解中,大家讲了viewport,这是一个有关meta的故事。本次大家会就将meta活动前端第二弹。以此故事讲得更宽泛、更好玩一些。

写过HTML的童鞋,应该都对这一个不陌生,或用它来定义页面编码,或用它来定义搜索引擎抓取方式,或用它定义页面关键字,描述等等。

http-equiv属性

来得字符集的设定

<meta  http-equiv=”Content-Type”  content=”text/html;
 charset=utf-8″>

<meta  http-equiv=”Content-Language”  content=”zh-CN”>

说明:用于评释主页制作所采纳的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

Refresh (刷新)

<meta http-equiv=”Refresh” content=”n; url=;

说明:定时让网页在指定的年月n内,跳转到你的页面;

Expires (期限)

<meta  http-equiv=”Expires”  content=”Mon,12 May 2001 00:20:00
GMT”>

说明:可以用于设定网页的到期时间,一旦过期则必须到服务器上再一次调用。必要注意的是必须拔取GMT时间格式;

Pragma (cach模式)

<meta  http-equiv=”Pragma”  content=”no-cache”>

说明:是用以设定禁止浏览器从本地机的缓存中调阅页面内容,设定后如若偏离网页就不能够从Cache中再调出;

Set-Cookie (cookie设定)

<meta  http-equiv=”set-cookie”  content=”Mon,12 May 2001 00:20:00
GMT”>

说明:cookie设定,固然网页过期,存盘的cookie将被去除。须求小心的也是必须采取GMT时间格式;

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

<meta  http-equiv=”Pics-label”  content=””>

说明:网页等级评定,在IE的internet选项中有一项内容设置,可避防患浏览部分受限制的网站,而网站的限制级别就是经过meta属性来设置的;

Window-target (展现窗口的设定)

<meta  http-equiv=”windows-Target”  content=”_top”>

说明:强制页面在方今窗口中以单独页面突显,可以幸免投机的网页被旁人作为一个frame页调用;

Page-Enter、Page-Exit (进入与脱离)

<meta http-equiv=”Page-Enter”
content=”revealTrans(duration=10,transition= 50)”>

<meta http-equiv=”Page-Exit”
content=”revealTrans(duration=20,transition=6)”>

说明:设定进入和离开页面时的特殊效果,那个效能即FrontPage中的”格式/网页过渡”,不过所加的页面不可见是一个frame页面。

宣示使用的浏览器及版本

x-ua-compatible设置是从IE8初阶伸张的(很显眼,只适用于IE),对于过往的版本无法辨别。开发者可以因而设置x-ua-compatible来指定渲染引擎的项目和版本,并且因为必要不一足以有多样差别的安装。当直接指定content为IE的某个具体版本,如上述代码第1条,客户端的IE将会动用IE7.0标准格局对页面进行渲染,并忽略Doctype定义。当指定的IE版本在客户端IE中不设有时,IE将会尝试将该值转换为无限接近的本子。例如指定一个稍低于5.0的IE版本,如上述代码第2条,客户端的IE将会动用IE5.0对页面举办渲染,由于IE5.0并从未正儿八经情势,所以将会直接使用quirks
mode来渲染;倘诺指定一个超出客户端IE的本子,如上述代码第3条,假定客户端IE的最高版本为9.0,那么IE会将该值转换为IE=9,即拔取IE9.0标准格局对页面举办渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=7″/>

<meta  http-equiv=”x-ua-compatible”  content=”IE=4″/>

当指定的content值加了Emulate前缀时,如上述代码,客户端IE将会根据Doctype定义来支配哪些来对页面举行渲染。如若页面使用了业内的Doctype,那么此概念效果等同地点的情形;即使页面并没有利用正式的Doctype,那么将应用quirks
mode来渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=EmulateIE7″/>

当指定的content值为IE=Edge时,如上述代码,客户端的IE将会利用最高的标准情势对页面进行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=Edge”/>

当指定的content值有多个版本时,如上述代码,假定客户端IE版本为8.0或者9.0,则采纳IE7.0标准方式对页面进行渲染;假定客户端IE版本为10.0要么11.0,则平昔使用相应版本的正统格局对页面举行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=7, 10, 11″/>

当指定的content值为IE=Edge,
chrome=1时,如上述代码,假定客户端安装了谷歌(Google) Chrome
Frame,则在IE中选取chrome的渲染引擎来渲染页面,否则,将会动用客户端IE最高的正规方式对页面举行渲染。

<meta  http-equiv=”x-ua-compatible”  content=”IE=Edge,
chrome=1″/>

meta列表

好的meta运用,能更好地升高页面的可用性及被搜寻的几率。

那里并不会列出装有的meta应用格局,只采取部分常用及实际意义比较大的发话,当然也席卷一些厂商私有定制的。

1、注脚文档使用的字符编码<meta charset=’utf-8′>  或
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
  该 meta 标签定义了 HTML 页面所选用的字符集为 utf-8
,就是万国码。它可以在同一页面展现中文简体、繁体及任何语言(如日文,斯拉维尼亚语)等。当然,你也可以动用gb2312(简体粤语),big5(繁体汉语)等等其余字符集。
  而眼下我们一般推荐应用第一种写法,也是HTML5使用的写法。

meta列表

好的meta选择,能更好地拉长页面的可用性及被寻找的几率。

此地并不会列出富有的meta运用格局,只选择部分常用及实际意义相比较大的出口,当然也包涵部分厂商私有定制的。

 

name属性

关键词

<Meta name=”Keywords”
Content=”关键词1,关键词2,关键词3,关键词4,……”>

说明:为寻找引擎提供的最首要字

Description (简介)

<Meta name=”Description” Content=”你网页的简述”>

说明:Description用来报告搜索引擎你的网站显要内容

罗布ots (机器人向导)

亚洲必赢官网 ,<Meta name=”Robots”
Content=”All|None|Index|Noindex|Follow|Nofollow”>

说明:罗布ots用来告诉搜索机器人怎么样页面要求索引,哪些页面不需求索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。

all:文件将被寻找,且页面上的链接能够被询问;

none:文件将不被搜寻,且页面上的链接不可以被询问;(和 “noindex, no
follow” 起相同效果)

index:文件将被搜寻;(让robot/spider登录)

follow:页面上的链接可以被询问;转自环 球 网校edu24ol.com转自环 球
网校edu24ol.com转自环 球 网校edu24ol.com

noindex:文件将不被寻找,但页面上的链接可以被询问;(不让robot/spider登录)

nofollow:文件将不被搜寻,页面上的链接可以被询问。(不让robot/spider顺着此页的接连往下探找)

作者

<Meta name=”Author” Content=”张三,abc@sina.com”>

说明:标明网页的撰稿人或制作组

Generator (编辑器)

<Meta name=”Generator” Content=”PCDATA|FrontPage|”>

讲明:编辑器的认证 注意:Content=”你所用编辑器”

revisit-after (重访)

<META name=”revisit-after” CONTENT=”7 days”>

常规

2、评释使用的浏览器及版本
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
  当指定的content值为IE=edge,chrome=1时,优先利用 IE 最新版本和
Chrome。假定客户端安装了谷歌(Google) Chrome
Frame,则在IE中采用chrome的渲染引擎来渲染页面,否则,将会利用客户端IE最高的正式情势对页面进行渲染。
  还有以下二种设置方法:
<meta http-equiv=”X-UA-Compatible” content=”IE=6″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=8″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=edge” />
 3、SEO优化相关
  页面描述,每个网页都应有一个不当先 150
个字符且能规范反映网页内容的讲述标签。
<meta name=”description” content=”不超过150个字符” />
  页面关键词,每个网页应持有描述该网页内容的一组唯一的要害字。
  使用人们也许会寻找,并规范描述网页上所提供音信的描述性和代表性关键字及短语。
<meta name=”keywords” content=”html5, css3, 关键字”/>
  定义网页小编,非须要
<meta name=”author” content=”月光光” />
 4、页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。即使加url,则会重定向到指定网页。
<meta http-equiv=”Refresh” contect=”5;url=”
/>
  上述代码表示停留5分钟后活动刷新跳转到URL网址http://www.admin10000.com。
 5、Expires网页过期时间
<meta http-equiv=”Expires” contect=”Mon,12 May 2016 00:20:00 GMT”
/>
  设定网页的到期时间,一旦过期则必须到服务器上再次调用,需求小心的是必须利用GMT时间格式,或直接设为0(不缓存)。
 6、Pragma禁止本地缓存
<meta http-equiv=”Pragma” contect=”no-cache” />
  设定网页不保存在缓存中,每一回访问都刷新页面。那样设定,访问者将无法脱机浏览。
 7、viewport移动设备屏幕可视区域
  由于移动设备显示屏宽度不一致于传统 web,由此大家要求转移 viewport 值。
  大多数4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6
plus设为414px。
  width – viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
  height – viewport 的高度 (范围从 223 到 10,000 )
  initial-scale – 开始的缩放比例 (范围从 > 0 到 10)
  minimum-scale – 允许用户缩放到的细微比例
maximum-scale – 允许用户缩放到的最大比例
  user-scalable – 用户是或不是足以手动缩放 (no,yes)
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no” />
  强制让文档与设备的小幅保持 1:1 ;
  文档最大的幅度比列是1.0( initial-scale 开端刻度值和 maximum-scale
最大刻度值);
  user-scalable 定义用户是不是足以手动缩放( no
为不缩放),使页面固定设备上面的轻重缓急;
  注意:实际测试中窥见,有些安卓系统自带的浏览器并不接济这一条规则,可以对页面举办推广,一旦松开响应的
box 也随着加大,导致页面出现混乱难点,解决措施:定义页面的蝇头宽度。
body { min-width: 320px; }
  注意,很多少人采纳initial-scale=1到非响应式网站上,那会让网站以100%宽度渲染,用户须要手动移动页面或者缩放。假设和initial-scale=1同时采取user-scalable=no或maximum-scale=1,则用户将无法松开/减少网页来察看整个的情节。
  对于运动装备上的meta还有以下一些设置。
  8、WebApp全屏格局:伪装app,离线应用。
<meta name=”apple-mobile-web-app-capable” content=”yes” />
  9、隐藏状态栏/设置情状栏颜色:唯有在开启WebApp全屏格局时才生效。content的值为default
| black | black-translucent 。
<meta name=”apple-mobile-web-app-status-bar-style”
content=”black-translucent” />
  10、添加到主屏后的标题
<meta name=”apple-mobile-web-app-title” content=”标题” />
  11、忽略数字自动识别为电话号码
<meta content=”telephone=no” name=”format-detection” />
  12、忽略识别邮箱
<meta content=”email=no” name=”format-detection” />

常规

注明文档使用的字符编码

1
<meta charset="utf-8" />

该注脚用来指定文档的编码,除了utf-8,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等

理所当然,你也许还见过使用其它一种办法来定义文档字符编码:

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

 

争执于这种方法,更推荐你使用第1种,言外之意,就是援引应用HTML5

扬言文档使用的字符编码

XHTML

<meta charset=”utf-8″ />

1
<meta charset="utf-8" />

该申明用来指定文档的编码,除了utf-8,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等

本来,你可能还见过使用别的一种形式来定义文档字符编码:

XHTML

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
/>

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

龃龉于那种方法,更推荐你采纳第1种,言外之意,就是推荐应用HTML5

扬言页面刷新或跳转

1
2
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该表明用来指定页面自刷新或者跳转到其他页面,其中的年月单位是s

扬言页面刷新或跳转

XHTML

<meta http-equiv=”refresh” content=”10″ /> <meta
http-equiv=”refresh” content=”10; url=” />

1
2
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该声明用来指定页面自刷新或者跳转到其余页面,其中的时日单位是s

扬言页面过期时间

1
2
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

该注脚用来指定页面的逾期时间,一旦网页过期,从服务器上再一次请求,其中时间必须选择GMT格式,或者直接是0(即不缓存)

宣示页面过期时间

XHTML

<meta http-equiv=”expires” content=”0″ /> <meta
http-equiv=”expires” content=”Wed, 26 Feb 1997 08:21:57 GMT” />

1
2
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

该评释用来指定页面的超时时间,一旦网页过期,从服务器上再次请求,其中时间必须利用GMT格式,或者直接是0(即不缓存)

宣称页面是还是不是缓存

1
2
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

上述讲话都能够用来指定文档不被缓存。一些依旧在应用HTTP/1.0的可以利用第1条,第2条由HTTP/1.1提供,常用值还有:public,
no-cache, no-store等

申明页面是还是不是缓存

XHTML

<meta http-equiv=”pragma” content=”no-cache” /> <meta
http-equiv=”cache-control” content=”no-cache” />

1
2
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

上述讲话都足以用来指定文档不被缓存。一些照旧在应用HTTP/1.0的可以利用第1条,第2条由HTTP/1.1提供,常用值还有:public,
no-cache, no-store等

宣示小编信息

1
<meta name="author" content="joy, dooyoe@gmail.com" />

扬言小编消息

XHTML

<meta name=”author” content=”joy, dooyoe@gmail.com” />

1
<meta name="author" content="joy, dooyoe@gmail.com" />

申明文档关键字

1
<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多紧要字之间以半角逗号分隔

扬言文档关键字

XHTML

<meta name=”keywords” content=”CSS, HTML, JavaScript, 前端” />

1
<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多紧要字之内以半角逗号分隔

宣称文档描述

1
<meta name="description" content="这是一份meta列表" />

文档描述内容极其是完好的一句话,以不超越50个字符为宜

声称文档描述

XHTML

<meta name=”description” content=”这是一份meta列表” />

1
<meta name="description" content="这是一份meta列表" />

文档描述内容极其是整体的一句话,以不超过50个字符为宜

扬言使用的浏览器及版本

x-ua-compatible安装是从IE8发端增多的(很显然,只适用于IE),对于过往的本子不能甄别。
开发者可以经过设置x-ua-compatible来指定渲染引擎的序列和本子,并且因为急需分裂足以有七种分裂的安装:

声称使用的浏览器及版本

x-ua-compatible安装是从IE8起来增多的(很分明,只适用于IE),对于过往的本子无法甄别。
开发者可以经过设置x-ua-compatible来指定渲染引擎的门类和本子,并且因为急需分歧足以有各类不相同的安装:

Case1:
1
2
3
4
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=4" />
<meta http-equiv="x-ua-compatible" content="IE=xx" />
<meta http-equiv="x-ua-compatible" content="IE=50" />

当直接指定contentIE的某个具体版本,如上述代码第1条,客户端的IE将会使用IE7.0标准格局对页面举行渲染,并忽略Doctype定义。
当指定的IE版本在客户端IE中不设有时,IE将会尝试将该值转换为极其接近的本子。
比如说指定一个荒谬的照旧低于5.0的IE版本,如上述代码第2,3条,客户端的IE将会利用IE5.0对页面举办渲染,由于IE5.0并不曾正式情势,所以将会一向利用quirks mode来渲染;
若果指定一个超出客户端IE的本子,如上述代码第4条,假定客户端IE的万丈版本为9.0,那么IE会将该值转换为IE=9,即利用IE9.0标准情势对页面进行渲染。

Case1:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=7″ /> <meta
http-equiv=”x-ua-compatible” content=”IE=4″ /> <meta
http-equiv=”x-ua-compatible” content=”IE=xx” /> <meta
http-equiv=”x-ua-compatible” content=”IE=50″ />

1
2
3
4
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=4" />
<meta http-equiv="x-ua-compatible" content="IE=xx" />
<meta http-equiv="x-ua-compatible" content="IE=50" />

当直接指定contentIE的某个具体版本,如上述代码第1条,客户端的IE将会利用IE7.0标准格局对页面进行渲染,并忽略Doctype定义。
当指定的IE版本在客户端IE中不设有时,IE将会尝试将该值转换为无限接近的版本。
譬如说指定一个漏洞极度多的或者低于5.0的IE版本,如上述代码第2,3条,客户端的IE将会利用IE5.0对页面进行渲染,由于IE5.0并从未正经形式,所以将会一贯运用quirks mode来渲染;
假定指定一个高于客户端IE的版本,如上述代码第4条,假定客户端IE的最高版本为9.0,那么IE会将该值转换为IE=9,即采纳IE9.0标准形式对页面举行渲染。

Case2:
1
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

当指定的content值加了Emulate前缀时,如上述代码,客户端IE将会根据Doctype定义来决定怎样来对页面进行渲染。假如页面使用了正规的Doctype,那么此概念效果等同Case1;假使页面并从未运用正式的Doctype,那么将运用quirks mode来渲染。

Case2:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=EmulateIE7″ />

1
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

当指定的content值加了Emulate前缀时,如上述代码,客户端IE将会基于Doctype定义来控制怎样来对页面进行渲染。即使页面使用了专业的Doctype,那么此概念效果等同Case1;假设页面并不曾接纳正式的Doctype,那么将应用quirks mode来渲染。

Case3:
1
<meta http-equiv="x-ua-compatible" content="IE=Edge" />

当指定的content值为IE=Edge时,如上述代码,客户端的IE将会使用最高的正统形式对页面举行渲染。

Case3:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=Edge” />

1
<meta http-equiv="x-ua-compatible" content="IE=Edge" />

当指定的content值为IE=Edge时,如上述代码,客户端的IE将会使用最高的正儿八经方式对页面进行渲染。

Case4:
1
<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

当指定的content值有多少个版本时,如上述代码,假定客户端IE版本为8.0要么9.0,则利用IE7.0标准形式对页面举行渲染;假定客户端IE版本为10.0依然11.0,则一贯利用相应版本的专业方式对页面举行渲染。

Case4:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=7, 10, 11″ />

1
<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

当指定的content值有几个本蛇时,如上述代码,假定客户端IE版本为8.0要么9.0,则动用IE7.0标准格局对页面举办渲染;假定客户端IE版本为10.0仍然11.0,则直接行使相应版本的规范方式对页面举行渲染。

Case5:
1
<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

当指定的content值为IE=Edge, chrome=1时,如上述代码,假定客户端安装了Google Chrome Frame,则在IE中利用chrome的渲染引擎来渲染页面,否则,将会选用客户端IE最高的正式方式对页面举行渲染。

Case5:

XHTML

<meta http-equiv=”x-ua-compatible” content=”IE=Edge, chrome=1″ />

1
<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

当指定的content值为IE=Edge, chrome=1时,如上述代码,假定客户端安装了Google Chrome Frame,则在IE中利用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的业内格局对页面举行渲染。

扬言搜索引擎抓取格局

1
<meta name="robots" content="index" />

通告搜索引擎文档是或不是须要被索引。可选值有:

  • all(默许值,索引当前页并跟踪链接,相当于:index, follow)
  • none(忽略当前页,相当于:noindex, nofollow)
  • index(索引当前页)
  • noindex(不索引当前页)
  • follow(跟踪当前页链接,不论当前页是不是被索引)
  • nofollow(不跟踪当前页链接,不论当前页是不是被索引)

万一申明争执,某些引擎可能会做严刻处理:

1
2
<meta name="robots" content="noindex" />
<meta name="robots" content="index" />

 

类似上述代码,在Google引擎中,会执行noindex这几个更加严谨的扬言。

急需小心的是并不是持有搜索引擎都协理robots meta,相比较保守的做法是匹配robots.txt使用。

宣称搜索引擎抓取格局

XHTML

<meta name=”robots” content=”index” />

1
<meta name="robots" content="index" />

 

文告搜索引擎文档是或不是必要被索引。可选值有:

  • all(默许值,索引当前页并跟踪链接,相当于:index, follow)
  • none(忽略当前页,相当于:noindex, nofollow)
  • index(索引当前页)
  • noindex(不索引当前页)
  • follow(跟踪当前页链接,不论当前页是或不是被索引)
  • nofollow(不跟踪当前页链接,不论当前页是不是被索引)

借使评释龃龉,某些引擎可能会做严刻处理:

XHTML

<meta name=”robots” content=”noindex” /> <meta name=”robots”
content=”index” />

1
2
<meta name="robots" content="noindex" />
<meta name="robots" content="index" />

接近上述代码,在Google引擎中,会执行noindex那些更是严苛的评释。

须要小心的是并不是具有搜索引擎都帮助robots meta,比较保守的做法是同盟robots.txt使用。

声明搜索引擎抓取间隔

1
<meta name="revisit-after" content="10 days" />

突发性你或许并不指望站点向来被寻找引擎抓取,而是每间隔一段时间才来做客两遍,那时,可以表明revisit-after meta

宣称搜索引擎抓取间隔

XHTML

<meta name=”revisit-after” content=”10 days” />

1
<meta name="revisit-after" content="10 days" />

偶然你也许并不愿意站点向来被搜寻引擎抓取,而是每间隔一段时间才来拜访四次,那时,可以表明revisit-after meta

移动

移动

声明viewport视口

1
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

该注明用于指定在活动装备上页面的布局视口怎么样设置。对于viewport meta的事无巨细设置,请参见:挪动前端第一弹:viewport详解

声明viewport视口

XHTML

<meta name=”viewport” content=”initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no” />

1
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

该注解用于指定在移动设备上页面的布局视口如何设置。对于viewport meta的详实设置,请参考:举手投足前端第一弹:viewport详解

宣示添加到主屏幕的Web App标题

iOS Safari允许用户将一个网页添加到主显示器然后像App同样来操作它。大家领略各样App尘世都会有一个名字,iOS Safari提供了一个私房的meta来定义那一个名字,代码如下:

1
<meta name="apple-mobile-web-app-title" content="Web App名称" />

 

Android Chrome31.0Android Browser5.0也起始援救添加到主屏幕了,但并不曾提供相应的定义标题的方法,所以如若您想统一iOSAndroid阳台定义Web app名称的主意,可以运用title标签来定义,代码如下:

1
<title>Web App名称</title>

 

但如果你想要网页标题和App名字不雷同的话,那就只有iOS才行。

宣示添加到主显示器的Web App标题

iOS Safari同意用户将一个网页添加到主显示器然后像App一律来操作它。我们知道各类App江湖都会有一个名字,iOS Safari提供了一个私有的meta来定义那几个名字,代码如下:

XHTML

<meta name=”apple-mobile-web-app-title” content=”Web App名称” />

1
<meta name="apple-mobile-web-app-title" content="Web App名称" />

Android Chrome31.0Android Browser5.0也起首帮忙添加到主显示屏了,但并没有提供对应的概念标题的主意,所以一旦你想统一iOSAndroid阳台定义Web app名称的措施,可以动用title标签来定义,代码如下:

XHTML

<title>Web App名称</title>

1
<title>Web App名称</title>

但借使您想要网页标题和App名字分裂的话,那就只有iOS才行。

扬言添加到主显示屏时隐藏地址栏和状态栏(即全屏)

当大家将一个网页添加到主屏幕时,会更期望它能有像App无异于的变现,没有地址栏和情景栏全屏展现,代码如下:

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

 

该方案在 iOS 和 Android5.0+ 上都通用。

表明添加到主显示屏时隐藏地址栏和状态栏(即全屏)

当我们将一个网页添加到主屏幕时,会更希望它能有像App无异于的显示,没有地址栏和情景栏全屏显示,代码如下:

XHTML

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

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

该方案在 iOSAndroid5.0+ 上都通用。

声称添加到主显示器时设置系统顶栏颜色

当大家将一个网页添加到主屏幕时,仍可以对 系统显示手机信号、时间、电池的顶部状态栏 颜色举行安装,前提是敞开了:

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

 

有了那么些前提,你能够因此上面的办法来拓展定义:

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

 

content只有3个固定值可选:default | black | black-translucent

  • 假诺设置为 default,状态栏将为正规的,即白色,网页从气象栏以下开首显示;
  • 若果设置为 black,状态栏将为灰色,网页从气象栏以下初阶突显;
  • 设若设置为 black-translucent,状态栏将为粉红色半透明,网页将充满整个显示屏,状态栏会盖在网页之上;

该装置只在 iOS 上有效。

扬言添加到主屏幕时设置系统顶栏颜色

当我们将一个网页添加到主显示屏时,还足以对
系统显示手机信号、时间、电池的顶部状态栏 颜色举办安装,前提是敞开了:

XHTML

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

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

有了那些前提,你可以由此下边的艺术来开展定义:

XHTML

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

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

content唯有3个固定值可选:default | black | black-translucent

  • 借使设置为
    default,状态栏将为正规的,即白色,网页从气象栏以下伊始突显;
  • 假如设置为 black,状态栏将为青色,网页从气象栏以下开端显得;
  • 一经设置为
    black-translucent,状态栏将为藏蓝色半透明,网页将充满整个显示屏,状态栏会盖在网页之上;

该装置只在 iOS 上有效。

电话号码识别

在 iOS Safari (其他浏览器和Android均不会)上会对那个看起来像是电话号码的数字处理为电话链接,比如:

  • 7位数字,形如:1234567
  • 带括号及加号的数字,形如:(+86)123456789
  • 双连接线的数字,形如:00-00-00111
  • 11位数字,形如:13800138000

可能还有任何品种的数字也会被识别,但在切切实实的作业场景中,有些时候那是不必须的,所以你可以关闭电话自动识别,然后在急需拨号的地点,开启电话呼出和短信功用。

  1. 关门电话号码识别:

    1
    <meta name="format-detection" content="telephone=no" />
  2. 敞开拨打电话作用:

    1
    <a href="tel:123456">123456</a>
  3. 翻开发送短信功效:

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

电话号码识别

iOS Safari
(其余浏览器和Android均不会)上会对这个看起来像是电话号码的数字处理为电话链接,比如:

  • 7位数字,形如:1234567
  • 带括号及加号的数字,形如:(+86)123456789
  • 双连接线的数字,形如:00-00-00111
  • 11位数字,形如:13800138000

兴许还有其它类其他数字也会被辨认,但在具体的事务场景中,有些时候那是不必须的,所以您可以关闭电话自动识别,然后在须求拨号的地方,开启电话呼出和短信功用。

  1. 关闭电话号码识别:
XHTML

&lt;meta name="format-detection" content="telephone=no" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262c9918702199-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262c9918702199-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 打开拨打电话功效:
XHTML

&lt;a href="tel:123456"&gt;123456&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262cc287691951-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262cc287691951-1" class="crayon-line">
&lt;a href=&quot;tel:123456&quot;&gt;123456&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 敞开发送短信功能:
XHTML

&lt;a href="sms:123456"&gt;123456&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262cf285203593-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262cf285203593-1" class="crayon-line">
&lt;a href=&quot;sms:123456&quot;&gt;123456&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

Android
(iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有您从未拉长邮箱链接,当你在那几个字符串上长按,会弹出发邮件的升迁。

  1. 关闭邮箱地址识别:
XHTML

&lt;meta name="format-detection" content="email=no" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d2121807146-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d2121807146-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;email=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 拉开邮件发送:
XHTML

&lt;a href="mailto:dooyoe@gmail.com"&gt;dooyoe@gmail.com&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d5072414295-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d5072414295-1" class="crayon-line">
&lt;a href=&quot;mailto:dooyoe@gmail.com&quot;&gt;dooyoe@gmail.com&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 倘使想同时关闭电话和信箱识别,可以把它们写到一条 meta
    内,代码如下:
XHTML

&lt;meta name="format-detection" content="telephone=no,email=no"
/&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d8257433028-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d8257433028-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no,email=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

邮箱地址识别

在 Android (iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有您没有添加邮箱链接,当你在这么些字符串上长按,会弹出发邮件的提示。

  1. 关门邮箱地址识别:

    1
    <meta name="format-detection" content="email=no" />
  2. 拉开邮件发送:

    1
    <a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
  3. 假诺想同时关闭电话和邮箱识别,可以把它们写到一条 meta 内,代码如下:

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

附注

部分meta概念来自于trip

3 赞 10 收藏
评论

亚洲必赢官网 1

附注

部分meta概念来自于trip

网站地图xml地图