meta标签常见用法

还记得当年校招, 技术面问了meta标签的作用, 答得吞吞吐吐的, 这里记录一下

元数据(metadata)元素的概念，用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示，它们本身不是文档内容，但提供了关于后面文档内容的信息。——《html5权威指南》

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

元素	meta
属性	http-equiv、name、content、charset
HTML5	charset为HTML5中新增的，用来声明字符编码; http-equiv属性在HTML4中有很多值，在HTML5中只有refresh、default-style、content-type可用

<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>

<!--规定网页编码-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<!--设置http cache时间，在快速迭代的项目中，我们可以设置max-age=604800s，也就是七天 -->
<meta http-equiv="Cache-Control" content="max-age=604800" />

<!--优先使用 IE 最新版本和 Chrome-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="referrer" content="always" >

<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>

<!--网站描述-->
<meta name="description" content="网站描述">

<!--关键词-->
<meta name="keywords" content="your, tags">

<!-- 搜索引擎抓取 -->
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
 -->
<meta name="robots" content="index,follow"/>

<!-- 为移动设备添加， 初始缩放 1.0, 最大缩放 3，最小缩放 1， 不允许用户缩放 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!--国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="renderer" content="webkit"> //默认webkit内核 
<meta name="renderer" content="ie-comp"> //默认IE兼容模式 
<meta name="renderer" content="ie-stand"> //默认IE标准模式

<!--重定向, 0秒后跳转到百度-->
<meta http-equiv="refresh" content="0;url=http://baidu.com" />

<!--dns缓存-->
<meta rel="dns-preftech" href="//static.360buyimg.com">
<!--DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS 的解析，减少用户等待时间，提高用户体验。
我们DNS 解析的时候，需要用域名去DNS 解析匹配 IP ，这个是需要时间的，如果加了 dns-perfetch 呢，浏览器会记住（缓存）这个解析，直接就请求过去了，不需要再走DNS 解析-->