道友請留步， 瞭解一下

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'> // 只有這一種用法 一種格式哦
複製代碼

總結

不完善的地方還有不少，若有錯誤請各位不吝指正。