之前學習前端中，對meta標簽的了解僅僅只是這一句。
<meta charset="UTF-8">但是打開任意的網站，其head標簽內都有一列的meta標簽。比如我博客的。
但是自己卻很不熟悉，于是把meta標簽加入了寒假學習計劃的最前方。
簡介
在查閱w3school中，第一句話中的“元數據”就讓我開始了Google之旅。然后很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，Google和百度都沒有相關的詞條。但元數據在Google就有詳細解釋。所以這兒采用英文版W3school的解釋。）
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
不難看出，其中的關鍵是metadata，中文名叫元數據，是用于描述數據的數據。它不會顯示在頁面上，但是機器卻可以識別。這么一來meta標簽的作用方式就很好理解了。
用處
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標簽用處的介紹，簡潔明了。翻譯過來就是：meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。
組成
meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。
1. name屬性
name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。meta標簽中name屬性語法格式是：
<meta name="參數"content="具體的描述">。 其中name屬性共有以下幾種參數。?(A-C為常用屬性)
A. keywords(關鍵字)
說明：用于告訴搜索引擎，你網頁的關鍵字。舉例：
<meta name="keywords"content="Lxxyx,博客，文科生，前端">B. description(網站內容的描述)
說明：用于告訴搜索引擎，你網站的主要內容。舉例：
<meta name="description"content="文科生，熱愛前端與編程。目前大二，這是我的前端博客"> C. viewport(移動端的窗口)
說明：這個概念較為復雜，具體的會在下篇博文中講述。這個屬性常用于設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。
舉例（常用范例）：
<meta name="viewport" content="width=device-width, initial-scale=1">D. robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。
舉例：
<meta name="robots" content="none"> 具體參數如下：
1.none : 搜索引擎將忽略此網頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網頁。
3.nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。
4.all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網頁。
6.follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。
E. author(作者)
說明：用于標注網頁作者舉例：
<meta name="author"content="Lxxyx,841380530@qq.com"> F. generator(網頁制作軟件)
說明：用于標明網頁是什么軟件做的舉例(不知道能不能這樣寫)：
<meta name="generator"content="Sublime Text3"> G. copyright(版權)
說明：用于標注版權信息舉例：
<meta name="copyright"content="Lxxyx"> //代表該網站為Lxxyx個人版權所有。H. revisit-after(搜索引擎爬蟲重訪時間)
說明：如果頁面不是經常更新，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：
<meta name="revisit-after" content="7 days" >I. renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：
<meta name="renderer" content="webkit"> //默認webkit內核
<meta name="renderer" content="ie-comp"> //默認IE兼容模式 <meta name="renderer" content="ie-stand"> //默認IE標準模式2. http-equiv屬性
介紹之前，先說個小插曲。看文檔和博客關于http-equiv的介紹時，有這么一句。
http-equiv顧名思義，相當于http的文件頭作用。
一開始看到這句話的時候，我是迷糊的。因為我看各類技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等，相當于。然后我腦子里出現了大大的迷惑：“HTTP相等？”
后來還準備去Segmentfault提問來著。結果在寫問題的時候，突然反應出equivalent還有相當于的意思。意思就是相當于http的作用。至于文件頭是哪兒出來的，估計是從其作用來分析的。我認為顧名思義并不能得出"相當于http的文件頭作用"這個論斷。
這個我所認為的http-equiv意思的簡介。
相當于HTTP的作用，比如說定義些HTTP參數啥的。meta標簽中http-equiv屬性語法格式是：
<meta http-equiv="參數" content="具體的描述">其中http-equiv屬性主要有以下幾種參數：
A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)
說明：用于設定網頁字符集，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦<meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8B. X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)
說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式，在各大框架中這個設置也很常見。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面C. cache-control(指定請求和響應遵循的緩存機制)
用法1.
說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。這一段內容我在網上找了很久，但都沒有找到滿意的。最后終于在Google Developers中發現了我想要的答案。
舉例:
<meta http-equiv="cache-control" content="no-cache">共有以下幾種用法：
-
no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
-
no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
-
public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果
-
private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
-
maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。
參考鏈接：HTTP緩存
用法2.(禁止百度自動轉碼)
說明：用于禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，但是轉碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉碼了。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" />D. expires(網頁到期時間)
說明:用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />E. refresh(自動刷新并指向某頁面)
說明：網頁將在設定的時間內，自動刷新并調向設定的網址。舉例:
<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳轉向我的博客F. Set-Cookie(cookie設定)
說明：如果網頁過期。那么這個網頁存在本地的cookies也會被自動刪除。
<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"> //具體范例最后
暫時總結的就這么多了，meta標簽的自定義屬性實在太多了。所以只去找了常用的一些，還有像?Window-target?這樣已經基本被廢棄的屬性，我也沒有添加。
?
meta標簽作用
META標簽是HTML標記HEAD區的一個關鍵標簽，提供文檔字符集、使用語言、作者等基本信息，以及對關鍵詞和網頁等級的設定等，最大的作用是能夠做搜索引擎優化（SEO）。
PS：便于搜索引擎機器人查找、分類，互聯網應用應該要注意。
大網站都是怎么寫？
在了解這個標簽之前，我查找了各個主流網站他們的對于Meta的設置，如下：
京東首頁的Meta設置：
<meta charset="gbk"> <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"> <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東">
淘寶首頁的Meta設置：
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="spm-id" content="a21bo"> <meta name="description" content="淘寶網 - 亞洲最大、最安全的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 8億優質特價商品，同時提供擔保交易(先收貨后付款)、先行賠付、假一賠三、七天無理由退換貨、數碼免費維修等安全交易保障服務，讓你全面安心享受網上購物樂趣！"> <meta name="keyword" content="">
youku首頁的Meta設置：
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="title" content="優酷-中國領先視頻網站,提供視頻播放,視頻發布,視頻搜索 - 優酷視頻" /> <meta name="keywords" content="視頻,視頻分享,視頻搜索,視頻播放,優酷視頻" /> <meta name="description" content="視頻服務平臺,提供視頻播放,視頻發布,視頻搜索,視頻分享" />
斗魚首頁的Meta設置：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <name="keywords" content="DOTA2,熱門游戲直播,游戲直播,高清游戲直播,手機游戲直播,電子競技直播" /> <meta name="description" content="斗魚 - 全民直播平臺提供高清、快捷、流暢的視頻直播和游戲賽事直播服務，包含DOTA2等各類熱門游戲賽事直播和各種名家大神游戲直播，內容豐富，推送及時，帶給你不一樣的視聽體驗，一切盡在斗魚 - 全民直播平臺。" />
騰訊網首頁的Meta設置：
<meta charset="UTF-8"> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="keywords" content="新聞 新聞中心 事實派 新聞頻道,時事報道"> <meta name="description" content="騰訊新聞，事實派。新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站"> <meta name="author" content="skeetershi" />
起點小說網首頁的Meta設置：
<meta name="keywords" content="小說,小說網,言情小說,青春小說,玄幻小說,武俠小說,都市小說,歷史小說,網絡小說,原創網絡文學" /> <meta name="description" content="小說閱讀,精彩小說盡在起點小說。起點小說提供玄幻小說,武俠小說,原創小說,網游小說,都市小說,言情小說,青春小說,歷史小說,軍事小說,網游小說,科幻小說,恐怖小說,首發小說最新章節免費小說閱讀,精彩盡在起點小說！ver:071011熱門小說:。" /> <meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" /> <meta name="robots" content="all" /> <meta name="googlebot" content="all" /> <meta name="baiduspider" content="all" /> <meta name="copyright" content="本頁版權 www.qidian.com 起點中文網所有。All Rights Reserved" /> <meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" /> <meta name="application-name" content="起點中文小說網" / <meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" /> <meta name="msapplication-tooltip" content="小說閱讀_起點中文小說網|免費小說,玄幻小說,武俠小說,言情小說,青春小說,小說網各類小說下載" /> <meta name="msapplication-task" content="name=起點小游戲;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> <meta name="msapplication-task" content="name=藏書架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" /> <meta name="msapplication-task" content="name=讀書客戶端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" /> <meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" /> <meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" /> <meta property="qc:admins" content="204236767661141166375" />
meta詳解
meta標簽可分為兩大部分：http-equiv和name變量。
http-equiv
http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
| 值 | 描述 | 例子 |
| content-type | 設定頁面使用的字符集 | <meta http-equiv="content-Type" content="text/html; charset=utf-8"> GB2312時，代表說明網站是采用的編碼是簡體中文； ISO-8859-1時，代表說明網站是采用的編碼是英文； UTF-8時，代表世界通用的語言編碼； PS：html5頁面的做法是直接使用<meta charset="utf-8"/> |
| X-UA-Compatible | IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分兼容問題。 | <meta http-equiv="X-UA-Compatible" content="IE=7"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame. PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器。 |
| expires | 設定網頁的過期時間。 | <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> PS：必須使用GMT的時間格式 |
| refresh | 自動刷新并指向新頁面。 | <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> PS：2代表頁面停留2秒后跳轉到后面的網址上 |
| set-cookie | 如果網頁過期，那么自動刪除本地cookie。 | <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> PS：必須使用GMT的時間格式。 |
| windows-target | 強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用 | <meta http-equiv="Window-target" content="_top"> |
| cache-control | 緩存機制 | <meta http-equiv="cache-control" content="no-cache"> Public：指示響應可被任何緩存區緩存。 Private：指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效。 no-cache：指示請求或響應消息不能緩存。 no-store：用于防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存。 max-age：指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應。 min-fresh：指示客戶機可以接收響應時間小于當前時間加上指定時間的響應。 max-stale：指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息。 |
name
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
| 值 | 描述 | 例子 |
| author | 標注網頁的作者 | <meta name="author" content="dashen" /> |
| keywords | 頁面關鍵詞，用于被搜索引擎收錄 | <meta name="keywords" content="新聞,新聞中心, 新聞頻道"> |
| description | 頁面描述，用于搜索引擎收錄 | <meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站"> |
| viewport | 用于控制頁面縮放 | <meta name="viewport" content="width=device-width, initial-scale=1, |
| renderer | 指定雙核瀏覽器默認以何種方式渲染頁面。 | <meta name="renderer" content="webkit">//默認webkit內核 <meta name="renderer" content="ie-comp">//默認IE兼容模式 <meta name="renderer" content="ie-stand">//默認IE標準模式 PS：360瀏覽器支持 |
| generator | 說明網站的采用的什么軟件制作 | <meta name="generator" content="Microsoft"/> |
| revised | 網頁文檔的修改時間 | <meta name="revised" content="設計網, 6/24/2015"/> |
| robots | 用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 | <meta name="robots" content="none"/> 取值：all|none|index|noindex|follow|nofollow, 默認all all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索，但頁面上的鏈接可以被查詢； nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。 |
| copyright | 網站版權信息 | <meta name="copyright" content="本頁版權XXX所有。All Rights Reserved" /> |
?
總結
通過大網站對于meta的設置，可以看到常用的有，X-UA-Compatible、keywords、description。
?
參考文獻
1.?http://www.haorooms.com/post/html_meta_ds
?
