那些你不知道的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标签内容






但是,现实是残酷的,这些标签往往不会生效,甚至在HTML5规范中,http-equiv中的属性并不包括这三个,如果我们需要进行缓存控制的话,还是
寄希望与HTTP headers上。

x-dns-prefetch-control

虽然在meta标签设置缓存无效,但是我们可以设置meta标签来提前进行DNS解析以此来提升网站性能。在HTML页面中的a标签会自动启用DNS提前解析,但是在HTTPS上却失效了,这个时候就轮到该属性登场了
通过设置就可以让a标签在HTTPS环境下进行DNS预解析。

refresh

这个属性的值可以进行页面的跳转,其效果跟如下函数一样。

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

其常用的用法如下:

//当前页面每一秒后刷新一下

//当前页面一秒后跳转到首页

/当前页面一秒后跳转到百度

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

default-style

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