那些你不知道的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标签在此也就不再进行讲解。
原文地址:https://juejin.im/post/5c288546e51d451a6b51554a
相关推荐
-
flex布局被子元素撑开,如何保持内容不超出容器 html5
2019-6-22
-
前端必懂之Sticky Footer(粘性页脚) html5
2019-5-3
-
移动端导航布局(基础属性解决大问题) html5
2019-8-16
-
我从HTML的meta中学到了什么 html5
2018-12-6
-
H5单页面手势滑屏切换原理 html5
2018-10-23
-
浮动的label html5
2018-10-18
-
实用的 Web 布局技巧:Flex 主轴上的自动外边距 html5
2019-5-25
-
项目中引入特殊字体【小程序、h5】包括canvas画图 html5
2019-2-27
-
H5手机端开发问题汇总及解决方案 html5
2018-4-10
-
h5 ios输入框与键盘 兼容性优化 html5
2018-12-3