那些你不知道的meta标签

做为一名切图仔，对meta一直都是用于SEO优化、设置视口标签，可是最近一段时间查看淘宝、京东、苏宁等网站的前端代码却发现meta标签的使用多种多样，这才知道本身一直小觑了meta标签。 在陆续看了其余几家大型网站的前端代码和翻阅了相关资料写下了这篇文章，若是文章中有什么错误，麻烦指出，当即更正。

http-equiv

http-equiv是meta标签内容中很是重要的一环，从字面上看是跟HTTP相关，事实上其该属性的内容值都是特定HTTP的头，该属性与服务器和浏览器进行交互，让网站内容显示的准确和及时。 该属性中content-type、content-language和set-cookie已经被废除了，同时像cleartype、imagetoolbar这类不在HTML标准范围内的，在此再也不进行描述。

content-security-policy

处于安全方面的考虑，浏览器的同源策略在必定程度上保护了用户安全，可是像script、link、img等标签是不受同源策略的影响，而这些因素会给咱们的用户带来安全风险，这个时候，该属性就出马了。 在浏览器中，经过设置该属性来声明哪些动态资源容许被加载以此减小XSS攻击。该属性的内容包括了对script、style、font、media等静态资源的控制，因为其内容过多，在此就再也不进行赘述， 想要对此进行了解的，能够阅读Content Security Policy Reference。

cache-control、Pragma、Expires

将这三个属性并列在一块儿，是由于其跟HTTP头有着一样的属性。从字面上看，加上相应的属性可以让浏览器缓存相应的html内容，因此在某些网站（包括大型网站）上你可以看到如下meta标签内容

<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
复制代码

可是，现实是残酷的，这些标签每每不会生效，甚至在HTML5规范中，http-equiv中的属性并不包括这三个，若是咱们须要进行缓存控制的话，仍是 寄但愿与HTTP headers上。

x-dns-prefetch-control

虽然在meta标签设置缓存无效，可是咱们能够设置meta标签来提早进行DNS解析以此来提高网站性能。在HTML页面中的a标签会自动启用DNS提早解析，可是在HTTPS上却失效了，这个时候就轮到该属性登场了 经过设置<meta http-equiv="x-dns-prefetch-control" content="on" />就可让a标签在HTTPS环境下进行DNS预解析。

refresh

这个属性的值能够进行页面的跳转，其效果跟以下函数同样。

setTimeout(function(){
  window.location.href = "https://www.example.com"
},time)
复制代码

其经常使用的用法以下：

//当前页面每一秒后刷新一下
<meta http-equiv="refresh" content="1">
//当前页面一秒后跳转到首页
<meta http-equiv="refresh" content="0;url='/'">
/当前页面一秒后跳转到百度
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'">
复制代码

须要注意的是，在某些浏览器（Firefox）须要用户手动启用autorefreh，同时其相对于JS执行，跳转须要等待时间过长。

default-style

这个属性指定了在页面上使用的首选样式表. content属性必须包含<link>元素的标题, href属性连接到CSS样式表或包含CSS样式表的<style>元素的标题.

name

name是咱们平常使用最频繁的属性，其中author、keywords、description、robots、viewport的值在平时中常用，因此不在此进行讲解。 下面列出一些在应用中比较有用的值。

/*保留历史记录以及动画效果*/
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

/*是否启用 WebApp 全屏模式*/
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

/*添加到主屏后的标题*/
<meta name="apple-mobile-web-app-title" content="App Title">

/*在网页上方显示一个app banner，提供app store下载*/
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"

/*启用360浏览器的极速模式(webkit)*/
<meta name="renderer" content="webkit">

/*uc强制竖屏*/
<meta name="screen-orientation" content="portrait">

/*QQ强制竖屏*/
<meta name="x5-orientation" content="portrait">

/*UC强制全屏*/
<meta name="full-screen" content="yes">

/*QQ强制全屏*/
<meta name="x5-fullscreen" content="true">

/*UC应用模式*/
<meta name="browsermode" content="application">

/*QQ应用模式*/
<meta name="x5-page-mode" content="app">

/*禁止自动探测并格式化手机号码*/
<meta name="format-detection" content="telephone=no">
复制代码

杂项

其实meta标签的做用不止于此，不少网站（google,baidu,sogou,twitter）都有一套属于本身的规范，开发者为了兼容性，天然要加上相应的属性。 相应的meta标签在此也就再也不进行讲解。