摘要：用處這句話對標(biāo)簽用處的介紹，簡潔明了。組成標(biāo)簽共有兩個屬性，分別是屬性和屬性。與之對應(yīng)的屬性值為，中的內(nèi)容是對填入類型的具體描述，便于搜索引擎抓取。為常用屬性關(guān)鍵字說明用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字。安全措施緩存所有響應(yīng)，但并非必須。

之前學(xué)習(xí)前端中，對meta標(biāo)簽的了解僅僅只是這一句。

但是打開任意的網(wǎng)站，其head標(biāo)簽內(nèi)都有一列的meta標(biāo)簽。比如我博客的。

但是自己卻很不熟悉，于是把meta標(biāo)簽加入了寒假學(xué)習(xí)計劃的最前方。

在查閱w3school中，第一句話中的“元數(shù)據(jù)”就讓我開始了Google之旅。然后很順利的在英文版的w3school找到了想要的結(jié)果。（中文w3school說的是元信息，Google和百度都沒有相關(guān)的詞條。但元數(shù)據(jù)在Google就有詳細(xì)解釋。所以這兒采用英文版W3school的解釋。）

The  tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

不難看出，其中的關(guān)鍵是metadata，中文名叫元數(shù)據(jù)，是用于描述數(shù)據(jù)的數(shù)據(jù)。它不會顯示在頁面上，但是機(jī)器卻可以識別。這么一來meta標(biāo)簽的作用方式就很好理解了。

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標(biāo)簽用處的介紹，簡潔明了。
翻譯過來就是：meta常用于定義頁面的說明，關(guān)鍵字，最后修改日期，和其它的元數(shù)據(jù)。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁面），搜索引擎和其它網(wǎng)絡(luò)服務(wù)。

meta標(biāo)簽共有兩個屬性，分別是http-equiv屬性和name屬性。

name屬性主要用于描述網(wǎng)頁，比如網(wǎng)頁的關(guān)鍵詞，敘述等。與之對應(yīng)的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述，便于搜索引擎抓取。
meta標(biāo)簽中name屬性語法格式是：

。 

其中name屬性共有以下幾種參數(shù)。(A-C為常用屬性)

說明：用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字。
舉例：

說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。
舉例：

說明：這個概念較為復(fù)雜，具體的會在下篇博文中講述。
這個屬性常用于設(shè)計移動端網(wǎng)頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用范例）：

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。
content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。

舉例：

具體參數(shù)如下：

1.none : 搜索引擎將忽略此網(wǎng)頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網(wǎng)頁。
3.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
4.all : 搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網(wǎng)頁。
6.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。

說明：用于標(biāo)注網(wǎng)頁作者
舉例：

說明：用于標(biāo)明網(wǎng)頁是什么軟件做的
舉例: (不知道能不能這樣寫)：

說明：用于標(biāo)注版權(quán)信息
舉例：

 //代表該網(wǎng)站為Lxxyx個人版權(quán)所有。

說明：如果頁面不是經(jīng)常更新，為了減輕搜索引擎爬蟲對服務(wù)器帶來的壓力，可以設(shè)置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認(rèn)時間來訪問。
舉例：

說明：renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面。比如說360瀏覽器。
舉例：

 //默認(rèn)webkit內(nèi)核
 //默認(rèn)IE兼容模式
 //默認(rèn)IE標(biāo)準(zhǔn)模式

介紹之前，先說個小插曲。看文檔和博客關(guān)于http-equiv的介紹時，有這么一句。

http-equiv顧名思義，相當(dāng)于http的文件頭作用。

一開始看到這句話的時候，我是迷糊的。因為我看各類技術(shù)名詞，都會習(xí)慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等，相當(dāng)于。然后我腦子里出現(xiàn)了大大的迷惑：“HTTP相等？”

后來還準(zhǔn)備去Segmentfault提問來著。結(jié)果在寫問題的時候，突然反應(yīng)出equivalent還有相當(dāng)于的意思。意思就是相當(dāng)于http的作用。至于文件頭是哪兒出來的，估計是從其作用來分析的。我認(rèn)為顧名思義并不能得出"相當(dāng)于http的文件頭作用"這個論斷。

這個我所認(rèn)為的http-equiv意思的簡介。
相當(dāng)于HTTP的作用，比如說定義些HTTP參數(shù)啥的。

meta標(biāo)簽中http-equiv屬性語法格式是：

其中http-equiv屬性主要有以下幾種參數(shù)：

說明：用于設(shè)定網(wǎng)頁字符集，便于瀏覽器解析與渲染頁面
舉例：

  //舊的HTML，不推薦

 //HTML5設(shè)定網(wǎng)頁字符集的方式，推薦使用UTF-8

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設(shè)置為最新模式，在各大框架中這個設(shè)置也很常見。）
舉例：

  //指定IE和Chrome使用最新版本渲染當(dāng)前頁面

用法1.

說明：指導(dǎo)瀏覽器如何緩存某個響應(yīng)以及緩存多長時間。這一段內(nèi)容我在網(wǎng)上找了很久，但都沒有找到滿意的。
最后終于在Google Developers中發(fā)現(xiàn)了我想要的答案。

舉例:

共有以下幾種用法：

no-cache: 先發(fā)送請求，與服務(wù)器確認(rèn)該資源是否被更改，如果未被更改，則使用緩存。

no-store: 不允許緩存，每次都要去服務(wù)器上，下載完整的響應(yīng)。（安全措施）

public : 緩存所有響應(yīng)，但并非必須。因為max-age也可以做到相同效果

private : 只為單個用戶緩存，因此不允許任何中繼進(jìn)行緩存。（比如說CDN就不允許緩存private的響應(yīng)）

maxage : 表示當(dāng)前請求開始，該響應(yīng)在多久內(nèi)能被緩存和重用，而不去服務(wù)器重新請求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒。

參考鏈接：HTTP緩存

用法2.(禁止百度自動轉(zhuǎn)碼)

說明：用于禁止當(dāng)前頁面在移動端瀏覽時，被百度自動轉(zhuǎn)碼。雖然百度的本意是好的，但是轉(zhuǎn)碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉(zhuǎn)碼了。
舉例：

說明:用于設(shè)定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸。
舉例：

說明：網(wǎng)頁將在設(shè)定的時間內(nèi)，自動刷新并調(diào)向設(shè)定的網(wǎng)址。
舉例:

 //意思是2秒后跳轉(zhuǎn)向我的博客

說明：如果網(wǎng)頁過期。那么這個網(wǎng)頁存在本地的cookies也會被自動刪除。

 //格式

 //具體范例

暫時總結(jié)的就這么多了，meta標(biāo)簽的自定義屬性實在太多了。所以只去找了常用的一些，還有像Window-target這樣已經(jīng)基本被廢棄的屬性，我也沒有添加。
一開始以為一兩個小時就能學(xué)習(xí)完畢，結(jié)果沒想到竟然花了五六個小時，各處查資料，推敲文字。敲擊文字的時候，也感覺自己學(xué)習(xí)了非常多。比如基本的SEO，HTTP協(xié)議的再次理解等。

因為經(jīng)驗尚淺，所以如果有出錯的地方，希望各位能幫忙指正。
最后附上本人博客地址和原文鏈接，希望能與各位多多交流。

Lxxyx的前端樂園
寒假前端學(xué)習(xí)(1)——HTML meta標(biāo)簽總結(jié)