說實(shí)話奄容，在寫這篇博客之前，我只知道兩個常用的meta元素：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
并且由于代碼編輯器可以自動幫我寫好head的內(nèi)容，對于meta這個標(biāo)簽北发，我始終沒有去認(rèn)真的搞懂它。
為了走上前端事業(yè)的康莊大道喷屋，我參考了一些官方文檔琳拨、大神博客，對常用的meta元素做了一個簡單的匯總屯曹，當(dāng)做自己的讀書筆記狱庇。
meta標(biāo)簽的屬性
meta標(biāo)簽有兩個屬性： http-equiv和name。我將對這兩個屬性進(jìn)行簡單整理恶耽。
1密任、http-equiv
用法：<meta http-equiv="參數(shù)" content="參數(shù)描述" />
http-equiv屬性主要有以下幾個參數(shù)：
1、Content-Type：用來設(shè)定網(wǎng)頁字符集偷俭，說明網(wǎng)頁制作使用的文字和語言浪讳，瀏覽器會據(jù)此調(diào)用相應(yīng)的字符集。舉例：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> //舊的HTML涌萤，不推薦
<meta charset="UTF-8" > //HTML5設(shè)定網(wǎng)頁字符集的方式
2淹遵、X-UA-Compatible：用于告知瀏覽器以何種版本渲染當(dāng)前頁面。舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> //優(yōu)先使用IE最新版本和Chrome
3负溪、pragma：禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容透揣。舉例：
<meta http-equiv="Pragma" content="no-cache" />
4、refresh：讓網(wǎng)頁在一定的時間內(nèi)刷新自己川抡，或者在多長時間后跳轉(zhuǎn)到其他網(wǎng)頁辐真。舉例：
<meta http-equiv="refresh" content="30" > //30s后刷新自己
<meta http-equiv="refresh" content="30;URL="http://www.baidu.com" > //30s后跳轉(zhuǎn)到百度
5、expires：指定網(wǎng)頁的過期時間，過期后必須重新請求服務(wù)器拆祈。舉例：
<meta http-equiv="expires" content="Sat, 29 Apr 2017 04:25:02 GMT" >
6恨闪、Cache-Control：避免百度打開網(wǎng)頁時可能會對其進(jìn)行轉(zhuǎn)碼（比如貼廣告等）。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" /> //先發(fā)送請求放坏，與服務(wù)器確認(rèn)該資源是否被更改咙咽，未被更改則使用緩存
以上就是對http-equiv的常用參數(shù)的介紹。http-equiv的參數(shù)還有很多淤年，不常用钧敞，寫在這里只是為了提醒自己http-equiv可以實(shí)現(xiàn)什么，具體需要時再詳細(xì)研究麸粮。
2溉苛、name
用法：<meta name="參數(shù)" content="參數(shù)描述" />
name屬性主要用于描述網(wǎng)頁，如網(wǎng)頁關(guān)鍵字弄诲、敘述等愚战。用于SEO優(yōu)化。
1齐遵、keywords：用戶告訴搜索引擎你的網(wǎng)頁關(guān)鍵字是什么寂玲。舉例：
<meta name="keywords" content="博客，前端梗摇，meta" />
2拓哟、description：網(wǎng)站內(nèi)容描述，用來告訴搜索引擎你網(wǎng)站的主要內(nèi)容伶授。舉例：
<meta name="description" content="前端博客知識分享" />
3断序、author：標(biāo)注網(wǎng)頁的作者。舉例：
<meta name="author" content="Caroline糜烹，xx@xxxx.com" />
4违诗、viewport：用于移動端顯示網(wǎng)頁，將網(wǎng)頁寬度設(shè)置為視口寬度疮蹦，并且可以設(shè)置縮放比例较雕、是否允許用戶縮放等。舉例：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> //用戶不能縮放
這個屬性較為復(fù)雜挚币，我另寫了一篇博客進(jìn)行整理，詳見viewport用法扣典。
5妆毕、renderer:雙核瀏覽器的渲染方式，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面贮尖。舉例：
<meta name="renderer" content="webkit/ie-comp/ie-stand" /> //默認(rèn)webkit內(nèi)核/默認(rèn)IE兼容模式/默認(rèn)IE標(biāo)準(zhǔn)模式
6笛粘、referrer：Referrer Policy規(guī)定了五種Referrer策略：No Referrer、No Referrer When Downgrade、Origin Only薪前、Origin When Cross-origin润努、Unsafe URL。
看了很多資料示括，都說referrer策略和網(wǎng)頁安全有關(guān)铺浇，在分析用戶來源時非常有用。然而我之前沒有接觸過referrer策略的相關(guān)知識垛膝，所以理解也并不深刻鳍侣。感覺這個策略還挺重要的，用到的時候會再寫一篇博客進(jìn)行總結(jié)吼拥。目前參閱了Referrer Policy介紹和解決百度統(tǒng)計(jì)無法獲取https來源的Referrer這兩篇文章倚聚。
舉例：
<meta name="referrer" content="no-referrer|origin|no-referrer-when-downgrade|origin-when-crossorigin|unsafe-url" />
7、其他：
<meta name="format-detection" content="telephone=no" /> //忽略數(shù)字自動識別為電話號碼
<meta name="format-detection" content="email=no" /> //忽略識別郵箱
關(guān)于meta元素就先總結(jié)到這里凿可。由于個人水平有限惑折，博客錯誤之處，煩請指正枯跑！
參考資料
1惨驶、常用meta標(biāo)簽|前端知識手冊
2、HTML meta標(biāo)簽總結(jié)與屬性的使用介紹
