HTML meta標簽總結與屬性使用介紹
之前學習前端中，對meta標簽的了解僅僅只是這一句纺且。
<meta charset="UTF-8">
但是打開任意的網(wǎng)站盏道，其head標簽內(nèi)都有一列的meta標簽。比如我博客的载碌。
[圖片上傳失敗...(image-8ea241-1510383011928)]
但是自己卻很不熟悉猜嘱，于是把meta標簽加入了寒假學習計劃的最前方。
簡介
在查閱w3school中嫁艇，第一句話中的“元數(shù)據(jù)”就讓我開始了Google之旅朗伶。然后很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息步咪，Google和百度都沒有相關的詞條论皆。但元數(shù)據(jù)在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，中文名叫元數(shù)據(jù)静袖，是用于描述數(shù)據(jù)的數(shù)據(jù)觉鼻。它不會顯示在頁面上，但是機器卻可以識別队橙。這么一來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常用于定義頁面的說明仇矾，關鍵字庸蔼，最后修改日期，和其它的元數(shù)據(jù)贮匕。這些元數(shù)據(jù)將服務于瀏覽器（如何布局或重載頁面）姐仅，搜索引擎和其它網(wǎng)絡服務。
組成
meta標簽共有兩個屬性刻盐，分別是http-equiv屬性和name屬性掏膏。
1. name屬性
name屬性主要用于描述網(wǎng)頁，比如網(wǎng)頁的關鍵詞敦锌，敘述等馒疹。與之對應的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述乙墙，便于搜索引擎抓取颖变。meta標簽中name屬性語法格式是：
<meta name="參數(shù)" content="具體的描述">。
其中name屬性共有以下幾種參數(shù)听想。(A-C為常用屬性)
A. keywords(關鍵字)
說明：用于告訴搜索引擎腥刹，你網(wǎng)頁的關鍵字。舉例：
<meta name="keywords" content="Lxxyx,博客汉买，文科生衔峰，前端">
B. description(網(wǎng)站內(nèi)容的描述)
說明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容录别。舉例：
<meta name="description" content="文科生朽色，熱愛前端與編程。目前大二组题，這是我的前端博客">
C. viewport(移動端的窗口)
說明：這個概念較為復雜葫男，具體的會在下篇博文中講述。這個屬性常用于設計移動端網(wǎng)頁崔列。在用bootstrap,AmazeUI等框架時候都有用過viewport梢褐。
舉例（常用范例）：
<meta name="viewport" content="width=device-width, initial-scale=1">
D. robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引赵讯。content的參數(shù)有all,none,index,noindex,follow,nofollow盈咳。默認是all。
舉例：
<meta name="robots" content="none">
具體參數(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)頁。
E. author(作者)
說明：用于標注網(wǎng)頁作者舉例：
<meta name="author" content="Lxxyx,841380530@qq.com">
F. generator(網(wǎng)頁制作軟件)
說明：用于標明網(wǎng)頁是什么軟件做的舉例: (不知道能不能這樣寫)：
<meta name="generator" content="Sublime Text3">
G. copyright(版權)
說明：用于標注版權信息舉例：
<meta name="copyright" content="Lxxyx"> //代表該網(wǎng)站為Lxxyx個人版權所有唬滑。
H. revisit-after(搜索引擎爬蟲重訪時間)
說明：如果頁面不是經(jīng)常更新告唆，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間晶密。如果重訪時間過短擒悬，爬蟲將按它們定義的默認時間來訪問。舉例：
<meta name="revisit-after" content="7 days" >
I. renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器雪猪。舉例：
<meta name="renderer" content="webkit"> //默認webkit內(nèi)核
<meta name="renderer" content="ie-comp"> //默認IE兼容模式
<meta name="renderer" content="ie-stand"> //默認IE標準模式
2. http-equiv屬性
介紹之前旋圆，先說個小插曲∮糜看文檔和博客關于http-equiv的介紹時运怖，有這么一句。
http-equiv顧名思義夏伊，相當于http的文件頭作用摇展。
一開始看到這句話的時候，我是迷糊的溺忧。因為我看各類技術名詞咏连，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"鲁森，意思是相等祟滴，相當于。然后我腦子里出現(xiàn)了大大的迷惑：“HTTP相等歌溉？”
后來還準備去Segmentfault提問來著垄懂。結果在寫問題的時候，突然反應出equivalent還有相當于的意思痛垛。意思就是相當于http的作用草慧。至于文件頭是哪兒出來的，估計是從其作用來分析的匙头。我認為顧名思義并不能得出"相當于http的文件頭作用"這個論斷漫谷。
這個我所認為的http-equiv意思的簡介。
相當于HTTP的作用蹂析，比如說定義些HTTP參數(shù)啥的舔示。
meta標簽中http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">
其中http-equiv屬性主要有以下幾種參數(shù)：
A. content-Type(設定網(wǎng)頁字符集)(推薦使用HTML5的方式)
說明：用于設定網(wǎng)頁字符集碟婆，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦
<meta charset="utf-8"> //HTML5設定網(wǎng)頁字符集的方式斩郎，推薦使用UTF-8
B. X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)
說明：用于告知瀏覽器以何種版本來渲染頁面脑融。（一般都設置為最新模式，在各大框架中這個設置也很常見缩宜。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面
C. cache-control(指定請求和響應遵循的緩存機制)
用法1.
說明：指導瀏覽器如何緩存某個響應以及緩存多長時間肘迎。這一段內(nèi)容我在網(wǎng)上找了很久，但都沒有找到滿意的锻煌。最后終于在Google Developers中發(fā)現(xiàn)了我想要的答案妓布。
[圖片上傳失敗...(image-c70fa5-1510383011928)]
舉例:
<meta http-equiv="cache-control" content="no-cache">
共有以下幾種用法：
no-cache: 先發(fā)送請求，與服務器確認該資源是否被更改宋梧，如果未被更改匣沼，則使用緩存。
no-store: 不允許緩存捂龄，每次都要去服務器上释涛，下載完整的響應。（安全措施）
public : 緩存所有響應倦沧，但并非必須唇撬。因為max-age也可以做到相同效果
private : 只為單個用戶緩存，因此不允許任何中繼進行緩存展融。（比如說CDN就不允許緩存private的響應）
maxage : 表示當前請求開始窖认，該響應在多久內(nèi)能被緩存和重用，而不去服務器重新請求告希。例如：max-age=60表示響應可以再緩存和重用 60 秒扑浸。
用法2.(禁止百度自動轉碼)
說明：用于禁止當前頁面在移動端瀏覽時，被百度自動轉碼燕偶。雖然百度的本意是好的喝噪，但是轉碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話杭跪，就可以避免百度自動轉碼了仙逻。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" />
D. expires(網(wǎng)頁到期時間)
說明:用于設定網(wǎng)頁的到期時間，過期后網(wǎng)頁必須到服務器上重新傳輸涧尿。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自動刷新并指向某頁面)
說明：網(wǎng)頁將在設定的時間內(nèi)系奉，自動刷新并調向設定的網(wǎng)址。舉例:
<meta http-equiv="refresh" content="2姑廉；URL=http://www.lxxyx.win/"> //意思是2秒后跳轉向我的博客
F. Set-Cookie(cookie設定)
說明：如果網(wǎng)頁過期缺亮。那么這個網(wǎng)頁存在本地的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這樣已經(jīng)基本被廢棄的屬性，我也沒有添加并鸵。
一開始以為一兩個小時就能學習完畢鸳粉，結果沒想到竟然花了五六個小時，各處查資料园担，推敲文字届谈。敲擊文字的時候，也感覺自己學習了非常多弯汰。比如基本的SEO艰山，HTTP協(xié)議的再次理解等。
因為經(jīng)驗尚淺咏闪，所以如果有出錯的地方曙搬，希望各位能幫忙指正。最后附上本人博客地址和原文鏈接鸽嫂，希望能與各位多多交流纵装。
