活动前端第二弹

举手投足前端第二弹:善用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用来告诉搜索引擎你的网站根本内容

Robots (机器人向导)

<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。假定客户端安装了谷歌 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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website