meta标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但却是文档的最基本的元数据。 对于网页来说，meta data就是通过一些字段信息来描述一下当前网页，以便浏览器和搜索引擎在访问到此网页的时候，可以通过这些描述信息来知道如何去解析此网页数据。
meta标签共有四个属性：http-equiv、name、scheme和content;不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。其中http-equiv顾名思义，常用来做http协议上的一些限制，其作用是把 content 属性关联到 HTTP 头部。scheme 属性用于指定要用来翻译属性值的方案。
简单来说，就是meta标签提供的是一个“键值对”，name/http-equiv作为键，content作为值，scheme不常用。基于以上理念，meta标签又常被用来作为SEO的有力提供。
常见的meta标识有：
01 02 03 04 05 06 07 08 09 10 11 | //声明文档使用的字符编码<meta charset=’utf-8′> //页面描述<meta name=”description” content=”网页描述”/>//页面关键词<meta name=”keywords” content=””/>//网页作者<meta name=”author” content=”name, [url=mailto:email@gmail.com]email@gmail.com[/url]”/> |
这里的charset其实是h5的新属性，等同于 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，作用是会在本网页的http请求头中添加： content-type: text/html; charset=UTF-8
这些是最正规的meta用法，基本上每个浏览器都支持，也是定义在标签规范内的。
然而尴尬的是，就像当初script标签本意也不是作为jsonp的用法一样，现代浏览器支持的meta标签完全超出了其初始的定义。上文有说过，meta标签的信息用户是不可见的，而且其简单的键值对结构无疑是最简单的传递网页信息的方式，才是浏览器厂商最终对meta标签下手的原因，加上每个浏览器希望体现自身特色，最终导致了meta标签的凌乱不堪。
其中有作为特定浏览器专用的meta标识。例：
01 02 03 04 05 06 07 08 09 10 11 | //uc强制竖屏<meta name=”screen-orientation” content=”portrait”> //QQ强制竖屏<meta name=”x5-orientation” content=”portrait”> //UC强制全屏<meta name=”full-screen” content=”yes”> //设置苹果工具栏颜色<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> |
这些其实都是浏览器厂商定制版本的meta，虽然不常见，但是一旦用上也能减少很多复杂的需求。
作为一个前端开发者，不得不说一句，还是很期待浏览器早日实现统一的
下面是收集的meta标签，以后有更多收集会及时更新，也希望网友有更多的meta标签能不吝赐教：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | //声明文档使用的字符编码<meta charset=’utf-8′> //优先使用 IE 最新版本和 Chrome<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> //页面描述<meta name=”description” content=”网页描述”/> //页面关键词<meta name=”keywords” content=””/> //网页作者<meta name=”author” content=”name, [url=mailto:email@gmail.com]email@gmail.com[/url]”/> //搜索引擎抓取<meta name=”robots” content=”index,follow”/> //为移动设备添加 viewport<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> //添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>//设置苹果工具栏颜色<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>//启用360浏览器的极速模式(webkit)<meta name=”renderer” content=”webkit”> //避免IE使用兼容模式<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> //不让百度转码<meta http-equiv=”Cache-Control” content=”no-siteapp” /> //针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓<meta name=”HandheldFriendly” content=”true”> //微软的老式浏览器<meta name=”MobileOptimized” content=”320″> //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”> //windows phone 点击无高光<meta name=”msapplication-tap-highlight” content=”no”> //设置页面不缓存<meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”><meta http-equiv=”expires” content=”0″> |
作者：ZoenLeo
链接：https://juejin.cn/post/6844903732421853191
