摘要：列表好的使用，能更好地提高页面的可用性及被检索的几率。假设页面使用了标准的，那么此定义效果等同假设页面并没有使用标准的，那么将使用来渲染。需要注意的是并不是所有搜索引擎都支持，比较保守的做法是配合使用。
前言
在移动前端第一弹：viewport详解中，我们讲了viewport，那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。
写过HTML的童鞋，应该都对这个不陌生，或用它来定义页面编码，或用它来定义搜索引擎抓取方式，或用它定义页面关键字，描述等等。
meta列表好的meta使用，能更好地提高页面的可用性及被检索的几率。
这里并不会列出所有的meta使用方式，只挑选一些常用及实际意义比较大的讲讲，当然也包括一些厂商私有定制的。
常规 声明文档使用的字符编码该声明用来指定文档的编码，除了utf-8，可选值还有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等
当然，你可能还见过使用另外一种方式来定义文档字符编码：
相对于这种方式，更推荐你使用第1种，言外之意，就是推荐使用HTML5。
声明页面刷新或跳转该声明用来指定页面自刷新或者跳转到其它页面，其中的时间单位是s。
声明页面过期时间该声明用来指定页面的过期时间，一旦网页过期，从服务器上重新请求，其中时间必须使用GMT格式，或者直接是0（即不缓存）
声明页面是否缓存上述语句都可以用来指定文档不被缓存。一些仍然在使用HTTP/1.0的可以使用第1条，第2条由HTTP/1.1提供，常用值还有：public, no-cache, no-store等
声明作者信息 声明文档关键字多关键字之间以半角逗号分隔
声明文档描述文档描述内容最好是完整的一句话，以不超过50个字符为宜
声明使用的浏览器及版本x-ua-compatible设置是从IE8开始增加的（很明显，只适用于IE），对于过往的版本无法识别。
开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本，并且因为需求不同可以有多种不同的设置：
Case1:
当直接指定content为IE的某个具体版本，如上述代码第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:
当指定的content值加了Emulate前缀时，如上述代码，客户端IE将会根据Doctype定义来决定如何来对页面进行渲染。假设页面使用了标准的Doctype，那么此定义效果等同Case1；假设页面并没有使用标准的Doctype，那么将使用quirks mode来渲染。
Case3:
当指定的content值为IE=Edge时，如上述代码，客户端的IE将会使用最高的标准模式对页面进行渲染。
Case4:
当指定的content值有多个版本时，如上述代码，假定客户端IE版本为8.0或者9.0，则使用IE7.0标准模式对页面进行渲染；假定客户端IE版本为10.0或者11.0，则直接使用对应版本的标准模式对页面进行渲染。
Case5:
当指定的content值为IE=Edge, chrome=1时，如上述代码，假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。
声明搜索引擎抓取方式通知搜索引擎文档是否需要被索引。可选值有：
all（默认值，索引当前页并跟踪链接，相当于：index, follow）
none（忽略当前页，相当于：noindex, nofollow）
index（索引当前页）
noindex（不索引当前页）
follow（跟踪当前页链接，不论当前页是否被索引）
nofollow（不跟踪当前页链接，不论当前页是否被索引）
如果声明冲突，某些引擎可能会做严格处理：
类似上述代码，在Google引擎中，会执行noindex这个更为严格的声明。
需要注意的是并不是所有搜索引擎都支持robots meta，比较保守的做法是配合robots.txt使用。
声明搜索引擎抓取间隔有时候你可能并不希望站点一直被搜索引擎抓取，而是每间隔一段时间才来访问一次，这时，可以声明revisit-after meta。
移动 声明viewport视口该声明用于指定在移动设备上页面的布局视口如何设置。对于viewport meta的详细设置，请参考：viewport详解
声明添加到主屏幕的Web App标题iOS Safari允许用户将一个网页添加到主屏幕然后像App一样来操作它。我们知道每个App下方都会有一个名字，iOS Safari提供了一个私有的meta来定义这个名字，代码如下：
Android Chrome31.0，Android Browser5.0也开始支持添加到主屏幕了，但并没有提供相应的定义标题的方式，所以如果你想统一iOS和Android平台定义Web app名称的方式，可以使用title标签来定义，代码如下：
Web App名称
但如果你想要网页标题和App名字不一样的话，那就只有iOS才行。
声明添加到主屏幕时隐藏地址栏和状态栏（即全屏）当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示，代码如下：
该方案在 iOS 和 Android5.0+ 上都通用。
声明添加到主屏幕时设置系统顶栏颜色当我们将一个网页添加到主屏幕时，还可以对 系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了：
有了这个前提，你可以通过下面的方式来进行定义：
content只有3个固定值可选：default | black | black-translucent
如果设置为 default，状态栏将为正常的，即白色，网页从状态栏以下开始显示；
如果设置为 black，状态栏将为黑色，网页从状态栏以下开始显示；
如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上；
该设置只在 iOS 上有效。
电话号码识别在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11位数字，形如：13800138000
可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。
关闭电话号码识别：
开启拨打电话功能：
123456
开启发送短信功能：
123456
在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。
关闭邮箱地址识别：
开启邮件发送：
dooyoe@gmail.com
如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：
附注部分meta定义来自于trip
转载：http://web.jobbole.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49835.html
摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲 基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。 二、历史版本 基于Vue-CLI2.0:点我查看 这个分支版本是一两年前...
摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。 一、前言提纲 基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。 二、历史版本 基于Vue-CLI2.0:点我查看这个分支版本是一两...
摘要：我今天的工作又遇到一个难题。前端右下角这个按钮被设置为禁用状态。这个按钮的可用状态由属性控制。而行执行之前，还没有这个的属性。我成功找到了我在寻找的给添加了的代码位置。 我今天的工作又遇到一个难题。前端UI右下角这个按钮被设置为禁用(disabled)状态。 showImg(https://segmentfault.com/img/remote/1460000016811187); 这...
摘要：我今天的工作又遇到一个难题。前端右下角这个按钮被设置为禁用状态。这个按钮的可用状态由属性控制。而行执行之前，还没有这个的属性。我成功找到了我在寻找的给添加了的代码位置。 我今天的工作又遇到一个难题。前端UI右下角这个按钮被设置为禁用(disabled)状态。 showImg(https://segmentfault.com/img/remote/1460000016811187); 这...
摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。 先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面 讲到选项卡（...
阅读 772·2023-04-25 23:55
阅读 2506·2023-04-25 14:13
阅读 3120·2019-08-26 13:47
阅读 2746·2019-08-23 18:16
阅读 491·2019-08-23 17:20
阅读 3061·2019-08-23 16:55
阅读 2969·2019-08-22 15:39
阅读 3050·2019-08-20 18:10
