道友请留步， 了解一下

meta的做用

meta是用来表示不可以由其余HTML元素(<link> <base> <script> <style>)表示的元数据信息。

什么是元数据

在MDN中是这样描述元数据概念的 in its very simplest definition — data that describes data. 描述数据的数据被称之为元数据。

举个例子来讲， 咱们的HTML页面内容是数据，经过它们咱们能够展示一个完整的界面，而描述构成界面的这些数据是怎么样的，就是元数据了。

也就是提供页面的做者、关键字、编码类型、编译方式等各类信息的数据。 它可能不会影响到咱们页面的展现，可是会影响到浏览器等对于咱们页面的解析方式。

meta关键字

meta的关键字一般有如下几种

name

name： 设置文档级别的元数据，应用于整个页面

格式： <meta name="参数" content="内容">。 name属性一般和content属性一块儿使用， 提供相似于键-值对同样的信息。name是键，content表明值。

name的常见参数

• anchor：提供做者信息，content格式能够自由定义

<meta name="anchor" content="JustDoIt521">
复制代码

• keyword：关键字信息，能够告诉搜素引擎这个页面的关键字是什么,注意content使用，分隔符。

<meta name="keyword" content="meta,前端，掘金">
复制代码

• generator： 包含生成页面的软件的标识符。 对generator有这样一段描述：

该值必须是标识用于生成文档的软件包之一的自由格式字符串。不得在标记不是由软件生成的页面上使用此值，例如其标记是由用户在文本编辑器中编写的页面。

我理解就是说 标识的字符串格式是自由格式，没有限制， 可是是能标明由哪一个软件包生成的该文档。 相似于txt这种不是由软件生产的页面上是不可使用这个值的。

<meta name="generator" content="WordPress 3.0.1">
// (在stackover上找到的例子)
// 连接 https://stackoverflow.com/questions/3632166/should-i-include-a-meta-generator-tag
复制代码

• referrer：控制从该页面发出的http请求中请求头的referrer首部内容

* viewpoint：进行移动端开发时设置页面大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//设置页面宽度为屏幕宽度， 最大最小缩放值为1，不容许用户缩放
复制代码

参考文章 viewport 深刻理解

http-equiv

http-equiv：MDN上是这样描述的属性定义了一个编译指示指令。这个属性叫作 http-equiv是由于全部容许的值都是特定HTTP头部的名称。 有点绕口，http-quiv全称是http-equivalent，http等价。再结合MDN上的描述能够理解为定义了http请求头部信息。来看下常见的参数吧：

http-equiv常见参数

• content-security-policy： 定义内容策略，即定义http请求容许的服务器源和脚本点。(看来是能够预防下跨站点脚本攻击了嘿)。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

作了以下限制
脚本：只信任当前域名
<object>标签：不信任任何URL，即不加载任何资源
样式表：只信任cdn.example.org和third-party.org
框架（frame）：必须使用HTTPS协议加载
其余资源：没有限制
复制代码

常见的各种资源限制加载

参考文章 Content Security Policy 入门教程

• content-type: 注意！若是使用这个属性，其值必须是text/html; charset=utf-8,该属性只能用于MIME type为 text/html 的文档，不能用于MIME类型为XML的文档。

<meta http-equiv="content-Type" content="text/html;charset=utf-8">
复制代码

• refresh: 页面在指定时间间隔后刷新，并跳转到对应的url去。格式以下

// 2秒后页面跳转到百度
<meta http-equiv="refresh" content="2；URL=http://www.baidu.com/">
// 页面每两秒刷新一次
<meta http-equiv="refresh" content="2">
复制代码

• x-ua-compatible：告知浏览器以何种版本渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
复制代码

charset

声明文章的字符编码格式， 若是使用这个属性，格式为

<meta charset='utf-8'> // 只有这一种用法 一种格式哦
复制代码

总结

不完善的地方还有不少，若有错误请各位不吝指正。