之前學(xué)習(xí)前端中吨瞎，對(duì)meta標(biāo)簽的了解僅僅只是這一句扎运。
<meta charset="UTF-8">
但是打開任意的網(wǎng)站沼侣，其head標(biāo)簽內(nèi)都有一列的meta標(biāo)簽综膀。比如我博客的。
但是自己卻很不熟悉葛躏，于是把meta標(biāo)簽加入了寒假學(xué)習(xí)計(jì)劃的最前方澈段。
簡(jiǎn)介
在查閱w3school中，第一句話中的“元數(shù)據(jù)”就讓我開始了Google之旅舰攒。然后很順利的在英文版的w3school找到了想要的結(jié)果败富。（中文w3school說的是元信息，Google和百度都沒有相關(guān)的詞條摩窃。但元數(shù)據(jù)在Google就有詳細(xì)解釋兽叮。所以這兒采用英文版W3school的解釋。）
The <meta> 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ù)。它不會(huì)顯示在頁(yè)面上椎麦，但是機(jī)器卻可以識(shí)別宰僧。這么一來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
這句話對(duì)meta標(biāo)簽用處的介紹观挎，簡(jiǎn)潔明了琴儿。翻譯過來就是：meta常用于定義頁(yè)面的說明，關(guān)鍵字嘁捷，最后修改日期造成，和其它的元數(shù)據(jù)。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁(yè)面）雄嚣，搜索引擎和其它網(wǎng)絡(luò)服務(wù)晒屎。
組成
meta標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性缓升。
1. name屬性
name屬性主要用于描述網(wǎng)頁(yè)鼓鲁，比如網(wǎng)頁(yè)的關(guān)鍵詞，敘述等港谊。與之對(duì)應(yīng)的屬性值為content骇吭，content中的內(nèi)容是對(duì)name填入類型的具體描述，便于搜索引擎抓取歧寺。meta標(biāo)簽中name屬性語(yǔ)法格式是：
<meta name="參數(shù)" content="具體的描述">燥狰。
其中name屬性共有以下幾種參數(shù)。(A-C為常用屬性)
A. keywords(關(guān)鍵字)
說明：用于告訴搜索引擎斜筐，你網(wǎng)頁(yè)的關(guān)鍵字龙致。舉例：
<meta name="keywords" content="Lxxyx,博客，文科生顷链，前端">
B. description(網(wǎng)站內(nèi)容的描述)
說明：用于告訴搜索引擎净当，你網(wǎng)站的主要內(nèi)容。舉例：
<meta name="description" content="文科生蕴潦，熱愛前端與編程。目前大二俘闯，這是我的前端博客">
C. viewport(移動(dòng)端的窗口)
說明：這個(gè)概念較為復(fù)雜潭苞，具體的會(huì)在下篇博文中講述。這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)真朗。在用bootstrap,AmazeUI等框架時(shí)候都有用過viewport此疹。
舉例（常用范例）：
<meta name="viewport" content="width=device-width, initial-scale=1">
D. robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow蝗碎。默認(rèn)是all湖笨。
舉例：
<meta name="robots" content="none">
具體參數(shù)如下：
1.none : 搜索引擎將忽略此網(wǎng)頁(yè)，等價(jià)于noindex蹦骑，nofollow慈省。2.noindex : 搜索引擎不索引此網(wǎng)頁(yè)。
3.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)眠菇。
4.all : 搜索引擎將索引此網(wǎng)頁(yè)與繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引边败，等價(jià)于index，follow捎废。
5.index : 搜索引擎索引此網(wǎng)頁(yè)笑窜。
6.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)。
E. author(作者)
說明：用于標(biāo)注網(wǎng)頁(yè)作者舉例：
<meta name="author" content="Lxxyx,841380530@qq.com">
F. generator(網(wǎng)頁(yè)制作軟件)
說明：用于標(biāo)明網(wǎng)頁(yè)是什么軟件做的舉例: (不知道能不能這樣寫)：
<meta name="generator" content="Sublime Text3">
G. copyright(版權(quán))
說明：用于標(biāo)注版權(quán)信息舉例：
<meta name="copyright" content="Lxxyx"> //代表該網(wǎng)站為L(zhǎng)xxyx個(gè)人版權(quán)所有登疗。
H. revisit-after(搜索引擎爬蟲重訪時(shí)間)
說明：如果頁(yè)面不是經(jīng)常更新排截，為了減輕搜索引擎爬蟲對(duì)服務(wù)器帶來的壓力，可以設(shè)置一個(gè)爬蟲的重訪時(shí)間辐益。如果重訪時(shí)間過短断傲，爬蟲將按它們定義的默認(rèn)時(shí)間來訪問。舉例：
<meta name="revisit-after" content="7 days" >
I. renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準(zhǔn)備的荷腊，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面艳悔。比如說360瀏覽器。舉例：
<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)模式
2. http-equiv屬性
介紹之前女仰，先說個(gè)小插曲猜年。看文檔和博客關(guān)于http-equiv的介紹時(shí)疾忍，有這么一句乔外。
http-equiv顧名思義，相當(dāng)于http的文件頭作用一罩。
一開始看到這句話的時(shí)候杨幼，我是迷糊的。因?yàn)槲铱锤黝惣夹g(shù)名詞聂渊，都會(huì)習(xí)慣性的去記住它的英文全稱差购。equiv的全稱是"equivalent"，意思是相等汉嗽，相當(dāng)于欲逃。然后我腦子里出現(xiàn)了大大的迷惑：“HTTP相等？”
后來還準(zhǔn)備去Segmentfault提問來著饼暑。結(jié)果在寫問題的時(shí)候稳析，突然反應(yīng)出equivalent還有相當(dāng)于的意思洗做。意思就是相當(dāng)于http的作用。至于文件頭是哪兒出來的彰居，估計(jì)是從其作用來分析的诚纸。我認(rèn)為顧名思義并不能得出"相當(dāng)于http的文件頭作用"這個(gè)論斷。
這個(gè)我所認(rèn)為的http-equiv意思的簡(jiǎn)介陈惰。
相當(dāng)于HTTP的作用畦徘，比如說定義些HTTP參數(shù)啥的。
meta標(biāo)簽中http-equiv屬性語(yǔ)法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">
其中http-equiv屬性主要有以下幾種參數(shù)：
A. content-Type(設(shè)定網(wǎng)頁(yè)字符集)(推薦使用HTML5的方式)
說明：用于設(shè)定網(wǎng)頁(yè)字符集奴潘，便于瀏覽器解析與渲染頁(yè)面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML旧烧，不推薦<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁(yè)字符集的方式，推薦使用UTF-8
B. X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁(yè)面)
說明：用于告知瀏覽器以何種版本來渲染頁(yè)面画髓。（一般都設(shè)置為最新模式掘剪，在各大框架中這個(gè)設(shè)置也很常見。）舉例：
C. cache-control(指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制)
用法1.
說明：指導(dǎo)瀏覽器如何緩存某個(gè)響應(yīng)以及緩存多長(zhǎng)時(shí)間奈虾。這一段內(nèi)容我在網(wǎng)上找了很久夺谁，但都沒有找到滿意的。最后終于在Google Developers中發(fā)現(xiàn)了我想要的答案肉微。
舉例:
<meta http-equiv="cache-control" content="no-cache">
共有以下幾種用法：
no-cache: 先發(fā)送請(qǐng)求匾鸥，與服務(wù)器確認(rèn)該資源是否被更改，如果未被更改碉纳，則使用緩存勿负。
no-store: 不允許緩存，每次都要去服務(wù)器上劳曹，下載完整的響應(yīng)奴愉。（安全措施）
public : 緩存所有響應(yīng)，但并非必須铁孵。因?yàn)閙ax-age也可以做到相同效果
private : 只為單個(gè)用戶緩存锭硼，因此不允許任何中繼進(jìn)行緩存。（比如說CDN就不允許緩存private的響應(yīng)）
maxage : 表示當(dāng)前請(qǐng)求開始蜕劝，該響應(yīng)在多久內(nèi)能被緩存和重用檀头，而不去服務(wù)器重新請(qǐng)求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒岖沛。
用法2.(禁止百度自動(dòng)轉(zhuǎn)碼)
說明：用于禁止當(dāng)前頁(yè)面在移動(dòng)端瀏覽時(shí)暑始，被百度自動(dòng)轉(zhuǎn)碼。雖然百度的本意是好的婴削，但是轉(zhuǎn)碼效果很多時(shí)候卻不盡人意蒋荚。所以可以在head中加入例子中的那句話，就可以避免百度自動(dòng)轉(zhuǎn)碼了馆蠕。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" />
D. expires(網(wǎng)頁(yè)到期時(shí)間)
說明:用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間期升，過期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自動(dòng)刷新并指向某頁(yè)面)
說明：網(wǎng)頁(yè)將在設(shè)定的時(shí)間內(nèi)互躬，自動(dòng)刷新并調(diào)向設(shè)定的網(wǎng)址播赁。舉例:
<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳轉(zhuǎn)向我的博客
F. Set-Cookie(cookie設(shè)定)
說明：如果網(wǎng)頁(yè)過期吼渡。那么這個(gè)網(wǎng)頁(yè)存在本地的cookies也會(huì)被自動(dòng)刪除容为。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體范例
最后
暫時(shí)總結(jié)的就這么多了，meta標(biāo)簽的自定義屬性實(shí)在太多了寺酪。所以只去找了常用的一些坎背，還有像Window-target
這樣已經(jīng)基本被廢棄的屬性，我也沒有添加寄雀。一開始以為一兩個(gè)小時(shí)就能學(xué)習(xí)完畢得滤，結(jié)果沒想到竟然花了五六個(gè)小時(shí)，各處查資料盒犹，推敲文字懂更。敲擊文字的時(shí)候，也感覺自己學(xué)習(xí)了非常多急膀。比如基本的SEO沮协，HTTP協(xié)議的再次理解等。
因?yàn)榻?jīng)驗(yàn)尚淺卓嫂，所以如果有出錯(cuò)的地方慷暂，希望各位能幫忙指正。最后附上本人博客地址和原文鏈接晨雳，希望能與各位多多交流行瑞。
