（注1：如果有問題歡迎留言探討，一起學(xué)習(xí)！轉(zhuǎn)載請注明出處，喜歡可以點個贊哦！）
（注2：更多內(nèi)容請查看我的目錄。）
上篇我們主要認(rèn)識了頭部內(nèi)容的標(biāo)簽，但是還留了一個小尾巴，那就是meta標(biāo)簽。在文章中我給出了一篇文章Http meta詳解供大家學(xué)習(xí)參考，該篇作者所述的內(nèi)容已經(jīng)非常詳盡了，但是我們還是要用自己的方式去理解一遍。
1. 簡介
理解一樣?xùn)|西，首先在于理解其存在的意義，或者說這個東西的出現(xiàn)是為了解決什么問題。那么meta到底為我們的網(wǎng)頁帶來了什么作用呢？大家試想一下，我們寫了一個網(wǎng)頁丟在網(wǎng)上，是希望別人來訪問的。我們把寫好的代碼放在服務(wù)器，需要通過瀏覽器的處理變成網(wǎng)頁。而網(wǎng)絡(luò)上的網(wǎng)頁多如繁星，需要吸引用戶搜索，點擊這個鏈接，然后才能最終呈現(xiàn)在用戶面前。這里有兩個關(guān)鍵點：
- 瀏覽器會如何顯示網(wǎng)頁的內(nèi)容
- 用戶為何會點擊你的網(wǎng)頁
meta的出現(xiàn)就是為了解決這兩個問題。那么，它是如何解決這兩個問題呢？
2. http-equiv
http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。meta標(biāo)簽的http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="參數(shù)變量值"> ；
當(dāng)瀏覽器等設(shè)備接收服務(wù)器端傳送的文件時，首先會接收文件的相關(guān)名稱/值對，通常為多個。雖然有些服務(wù)器會發(fā)送許多這種名稱/值對，但是所有服務(wù)器都至少要發(fā)送一個：content-type:text/html。這將告訴瀏覽器準(zhǔn)備接受一個 HTML 文檔。
其中http-equiv屬性主要有以下幾種參數(shù)：
2.1 content-Type(定義mime類型，顯示字符集)
作用 content-type用于定義用戶的瀏覽器或相關(guān)設(shè)備如何顯示將要加載的數(shù)據(jù)，或者如何處理將要加載的數(shù)據(jù)，此屬性的值可以查看MIME類型。但是其最重要的MIME類型是text/html，并用來設(shè)置字符集。
用法：
<meta http-equiv="content-type" content="text/html;charset=XXX">
示例：
<meta http-equiv="content-type" content="text/html;charset=utf-8">
設(shè)置字符集時，可以簡寫：
<meta charset="utf-8">
XXX取值：
- gb2312（或gbk）時，代表說明網(wǎng)站是采用的編碼是簡體中文
- big5時，代表說明網(wǎng)站是采用的編碼是繁體中文
- iso-2022-jp時，代表說明網(wǎng)站是采用的編碼是日文
- ks_c_5601時，代表說明網(wǎng)站是采用的編碼是韓文
- iso-8859-1時，代表說明網(wǎng)站是采用的編碼是英文
- utf-8時，代表世界通用的語言編碼（最常用）
2.2content-language(顯示語言設(shè)置)
作用：設(shè)定頁面的語言以及國家代碼（HTML文檔的語言可通過在html標(biāo)簽的lang屬性、xml:lang屬性或meta標(biāo)簽的content-language中聲明。明確網(wǎng)頁使用的語言，有助于瀏覽器與搜索引擎進行相應(yīng)的解析與索引。
）
用法：
<meta http-equiv="content-language" content="primarycode-subcode">
示例：
<meta http-equiv="content-language" content="zh-cn">
例如：language-code為"en"時，代表English英文，而language-code為"en-US"時，代表the U.S. version of English美國版本的英文。
primary-code為語言代碼設(shè)置，subcode為國家代碼
primarycode常用取值：
- zh (Chinese)中國
- fr (French)法國
- de (German)德國
- it (Italian)意大利
- nl (Dutch)荷蘭
- el (Greek)希臘
- es (Spanish)西班牙
- pt (Portuguese)葡萄牙
- ar (Arabic)阿拉伯
- ru (Russian)俄羅斯
- ja (Japanese)日本
另外，關(guān)于charset和content-type的區(qū)別，大家可以參考這篇文章：html中charset和content-language的區(qū)別
2.3 refresh(刷新與重定向)
作用：用于刷新與重定向頁面。
用法示例：
5秒之后刷新本頁面：
<meta http-equiv="refresh" content="5">
5秒之后跳轉(zhuǎn)到我的簡書主頁：
<meta http-equiv="refresh" content="5; url=http://www.lxweimin.com/u/7a62ab344c39">
2.4 expires(過期時間-控制緩存)
作用：可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。時間必須使用GMT格式。
用法示例：
<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" >
2.5 pragma(cache模式)
作用：禁止瀏覽器從本地計算機讀取緩存
用法：
<meta http-equiv="pragma" content="no-cache">
注意：這樣設(shè)定，訪問者將無法脫機瀏覽。
2.6 cache-control(緩存設(shè)定)
作用：HTTP1.1中啟用Cache-Control 來控制頁面的緩存與否
用法：
<meta http-equiv="cache-control" content="XXX">
XXX取值如下;
- max-age=[秒] — 執(zhí)行緩存被認(rèn)為是最新的最長時間。類似于過期時間，這個參數(shù)是基于請求時間的相對時間間隔，而不是絕對過期時間，[秒]是一個數(shù)字，單位是秒：從請求時間 開始到過期時間之間的秒數(shù)。
- s-maxage=[秒] — 類似于max-age屬性，除了他應(yīng)用于共享（如：代理服務(wù)器）緩存。
- public — 標(biāo)記認(rèn)證內(nèi)容也可以被緩存，一般來說： 經(jīng)過HTTP認(rèn)證才能訪問的內(nèi)容，輸出是自動不可以緩存的。
- no-cache — 強制每次請求直接發(fā)送給源服務(wù)器，而不經(jīng)過本地緩存版本的校驗。這對于需要確認(rèn)認(rèn)證應(yīng)用很有用（可以和public結(jié)合使用），或者嚴(yán)格要求使用最新數(shù)據(jù)的應(yīng)用（不惜犧牲使用緩存的所有好處）。
- no-store — 強制緩存在任何情況下都不要保留任何副本。
- must-revalidate — 告訴緩存必須遵循所有你給予副本的新鮮度，HTTP允許緩存在某些特定情況下返回過期數(shù)據(jù)，指定了這個屬性，你可以高速緩存，表明你希望嚴(yán)格的遵循你的規(guī)則。
- proxy-revalidate — 和 must-revalidate類似，除了他只對緩存代理服務(wù)器起作用。
(ps:可以看到expires,pragma和cache-control都對緩存起作用，那么他們有什么區(qū)別，不同的參數(shù)在不同的瀏覽器表現(xiàn)形式如何呢。這一塊我們今后會在HTTP系列具體說明。)
2.7 set-cookie(cookie設(shè)定)
作用：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。
用法：
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
注意：必須使用GMT的時間格式。
2.8 window-target(顯示窗口的設(shè)定)
作用：強制頁面在當(dāng)前窗口以獨立頁面顯示，用來防止別人在框架里調(diào)用自己的頁面。
用法：
<meta http-equiv="Window-target" content="_top">
2.9 X-UA-Compatible(IE8專用標(biāo)記-兼容)
作用：IE8的專用標(biāo)記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分兼容問題。
用法示例：
<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標(biāo)準(zhǔn)，IE8/9都會以IE7引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代碼告訴IE瀏覽器，IE8/9及以后的版本都會以最高版本IE來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
以上代碼IE=edge告訴IE使用最新的引擎渲染網(wǎng)頁，chrome=1則可以激活Chrome Frame。
PS：谷歌添加一個插件：Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF），這個插件可以讓用戶的IE瀏覽器外觀不變，但用戶在瀏覽網(wǎng)頁時，實際上使用的是Google Chrome瀏覽器內(nèi)核，而且支持IE6、7、8等多個版本的IE瀏覽器。
3. name
name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。
meta標(biāo)簽的name屬性語法格式是：
<meta name="參數(shù)" content="具體的參數(shù)值">；
name主要有以下幾種參數(shù)：
3.1 author(定義網(wǎng)頁作者)
作用：定義網(wǎng)頁作者
用法示例：
<meta name="author" content="yourName">
網(wǎng)頁作者是yourName
3.2 keywords(定義關(guān)鍵詞)
作用：定義頁面關(guān)鍵詞，用于被搜索引擎收錄。
用法示例：
<meta name ="keywords" content="science,education,culture,politics,ecnomics,relationships,entertainment,human">
3.3 descption(網(wǎng)頁描述)
作用：用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
用法示例：
<meta name="description" content="This page is about the meaning of science,education,culture.">
網(wǎng)站內(nèi)容描述（description）的設(shè)計要點：
①網(wǎng)頁描述為自然語言而不是羅列關(guān)鍵詞（與keywords設(shè)計正好相反）；
②盡可能準(zhǔn)確地描述網(wǎng)頁的核心內(nèi)容，通常為網(wǎng)頁內(nèi)容的摘要信息，也就是希望搜索引擎在檢索結(jié)果中展示的摘要信息；
③網(wǎng)頁描述中含有有效關(guān)鍵詞；
④網(wǎng)頁描述內(nèi)容與網(wǎng)頁標(biāo)題內(nèi)容有高度相關(guān)性；
⑤網(wǎng)頁描述內(nèi)容與網(wǎng)頁主體內(nèi)容有高度相關(guān)性；
⑥網(wǎng)頁描述的文字不必太多，一般不超過搜索引擎檢索結(jié)果摘要信息的最多字?jǐn)?shù)（通常在100中文字之內(nèi)，不同搜索引擎略有差異）。
3.4 robots(搜索引擎索引方式)
作用：用于定義網(wǎng)頁搜索引擎索引方式。告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
用法：
<meta name="robots" content="XXX">
XXX取值說明（默認(rèn)是all）：
- none
搜索引擎將忽略此網(wǎng)頁，等價于noindex，nofollow。 - noindex
搜索引擎不索引此網(wǎng)頁。 - nofollow
搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。 - all
搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引，等價于index，follow。 - index
搜索引擎索引此網(wǎng)頁。 - follow
搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。 - noarchive
禁止搜索引擎建立網(wǎng)頁快照。
特殊用法示例：
- 針對谷歌GOOGLEBOT使用robots
可以將name的屬性只定義為GOOGLEBOT標(biāo)識為谷歌搜索引擎。
<meta name="googlebot" content="noindex, nofollow" />
- 針對百度baiduspider使用robots
可以將name的屬性只定義為baiduspider標(biāo)識為百度搜索引擎。
<meta name="baiduspider" content="noarchive" />
3.5 copyright(網(wǎng)頁版權(quán))
作用：定義網(wǎng)頁的版權(quán)
用法示例：
<meta name="copyright" content="本頁版權(quán)XXX所有。All Rights Reserved" />
3.6 data(定義網(wǎng)頁生成時間)
作用：定義網(wǎng)頁生成時間
用法示例：
<meta name="data" content="2017-11-22T13:47:30+00:00">
3.7 revisied(定義網(wǎng)頁文檔修改時間)
作用：定義網(wǎng)頁文檔修改時間
用法示例：
<meta name="revised" content="css入門修煉, 11/23/2017"/>
3.8 renderer(渲染方式)
作用：指定雙核瀏覽器默認(rèn)以何種方式渲染頁面。
用法示例：
<meta name="renderer" content="webkit">//默認(rèn)webkit內(nèi)核
<meta name="renderer" content="ie-comp">//默認(rèn)IE兼容模式
<meta name="renderer" content="ie-stand">//默認(rèn)IE標(biāo)準(zhǔn)模式
PS：360瀏覽器支持
3.9 generator(網(wǎng)頁制作軟件)
用法示例：
<meta name="generator" content="Microsoft"/>
3.10 viewport(用戶網(wǎng)頁的可視區(qū)域)
作用：設(shè)置用戶網(wǎng)頁的可視區(qū)域
(ps：viewport展開來講又是一個很大的話題，首先需要我們對像素，分辨率等內(nèi)容有所了解。這一塊我會專門放在單位和響應(yīng)式布局的章節(jié)中來講解。現(xiàn)在我們先簡單看一下，content的可選項)
- width：viewport 的寬度
- height：viewport的高度 （很少使用）
- initial-scale：設(shè)置頁面的初始縮放值
- minimum-scale：允許用戶的最小縮放值
- maximum-scale：允許用戶的最大縮放值
- user-scalable：是否允許用戶進行縮放
- target-densitydpi（android才生效）：設(shè)備的密度等級
常用移動端設(shè)置方法如下：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
這段代碼的意思是，讓viewport的寬度等于物理設(shè)備上的真實分辨率，不允許用戶縮放。一般主流的web app都是這么設(shè)置的，它的作用其實是故意舍棄viewport，不縮放頁面，這樣dpi肯定和設(shè)備上的真實分辨率是一樣的，不做任何縮放，網(wǎng)頁會因此顯得更高細(xì)膩。
參考
W3school-HTML <meta> 標(biāo)簽
百度百科-meta
Http meta詳解
html中charset和content-language的區(qū)別
HTML meta content-language 定義頁面語言
語言名稱代碼表
國家名稱代碼表
夢之都-HTML meta 標(biāo)簽
頁面的緩存設(shè)置與meta的作用詳細(xì)解釋
Http頭介紹:Expires,Cache-Control,Last-Modified,ETag
百度百科-Cache-control
響應(yīng)式 Web 設(shè)計 - Viewport
說說移動前端中 viewport (視口)
HTML meta viewport屬性說明(mark)
viewport就是這回事
