前端值得一探究竟特辑 --- meta标签属性总结

MDN<meta>参考

1、charset

此属性声明网页的字符编码方式。

<meta charset="UTF-8">

常用字符集：
UTF-8：包含全世界所有国家需要用的字符，推荐使用。
GB2312：国家标准码，简体中文，6763个汉字。
BIG5：繁体中文，港澳台使用。
GBK：国标扩展，支撑繁体中文，包括全部中文字符。

2、content

包含http-equiv 或name 属性的值，具体取决于所使用的值。
多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。

＜meta http-equiv="参数" content="参数变量值"＞
或
＜meta name="参数" content="参数变量值"＞

3、http-equiv常用参数

枚举属性定义了能改变服务器和用户引擎行为的编译，这个编译值使用content 来定义。

• X-UA-Compatible：定义了浏览器的渲染方式，concent可为IE=Edge。
  参考百度网页使用<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">定义浏览器渲染方式。
  content 的值"IE=edge,chrome=1" 详解，这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。
  [GCF]：Google Chrome Frame，谷歌内嵌浏览器框架。
• x-dns-prefetch-control ：告知浏览器, 当前页面要做DNS预解析，协同link指明哪些链接需要DNS预解析，值为on/off。此属性可以提升页面载入速度优化前端性能，但也会造成查询DNS次数非常多。

  <!-- 开启DNS预获取 -->
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <!-- 设置DNS预获取的域名 -->
  <link rel="dns-prefetch" href="https://www.baidu.com" />
  

  其他：dns-prefetch、prerender、prefetch的理解
• Cache-control：指定请求和响应遵循的缓存机制。

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  

  • no-cache, no-store, must-revalidate：关闭缓存，打开新窗口访问时都会重新访问服务器。
    ： no-cache，响应不会被缓存,而是实时向服务器端请求资源，访问此页面不会在Internet临时文件夹留下页面备份。
    ： no-store，在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里。
    ： must-revalidate，响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的。按后退按扭 不会重新访问。
  • public, max-age=31536000： 缓存静态资源。
    ： public，响应会被缓存，并且在多用户间共享。
    ： max-age=[单位：秒 seconds] ， 设置缓存最大的有效时间，在此值内的时间里就不会重新访问服务器。 类似于 Expires, 但是这个参数定义的是时间大小（比如：60）而不是确定的时间点。
  • no-transform：禁止百度转码，类似于no-siteapp。当用户进入时，会直接跳转至原网页。参考禁止百度快照缓存，与no-siteapp 和 no-transform的通俗例子

4、name常用参数

定义文档级元数据的名称，与content 属性包含的值相关联。

• description：其中包含页面内容的简短和精确的描述，可能会体现在搜索引擎结果页面，搜索引擎优化需要特别重视的一个页面元素。
  
  

• keywords：包含与逗号分隔的页面内容相关的单词，通知搜索引擎这个网页包含的信息是关于什么的，但目前大多数SE现在不考虑它。

• viewport：提供有关视口初始大小的提示，仅供移动设备使用。

  // 禁止移动端缩放
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

  • width：正整数或device-width，定义viewport（视口）的宽度。
  • height：正整数或device-height，定义viewport（视口）的高度。
  • initial-scale：[0.0 , 10.0]，定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
  • maximum-scale：[0.0 , 10.0]，定义缩放的最大值。
  • minimum-scale：[0.0 , 10.0]，定义缩放的最小值。
  • user-scalable：yes /no，如果设置为 no，用户能否放大或缩小网页。

5、常见设置

1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
   强制让文档的宽度与设备的宽度保持1:1。
   文档初始化缩放比例是1:1。
   不允许用户点击屏幕放大浏览。
   允许用户缩放到的最大比例。

2. <meta name="apple-mobile-web-app-capable" content="yes" />
   iPhone私有标签，它表示：允许全屏模式浏览

3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式

4. <meta name="format-detection" content="telephone=no; email=no" />
   不识别邮件和不把数字识别为电话号码