W3School say meta
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。 —— W3School
mdn say meta
HTML <meta> 元素表示那些不能由其它HTML相關(guān)元素(<base>, <link>, <script>, <style> or <title>.)之一表示的任何元數(shù)據(jù)信息。
通俗的講
meta常用于定義頁(yè)面的說(shuō)明，關(guān)鍵字，最后修改日期，和其它的元數(shù)據(jù)。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁(yè)面），搜索引擎和其它網(wǎng)絡(luò)服務(wù)。
屬性說(shuō)明
1. name
name屬性主要用于描述網(wǎng)頁(yè)，比如網(wǎng)頁(yè)的關(guān)鍵詞，敘述等。與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容是對(duì)name填入類(lèi)型的具體描述，便于搜索引擎抓取。meta標(biāo)簽中name屬性語(yǔ)法格式是：
<meta name="參數(shù)" content="具體的描述">。
其中name屬性共有以下幾種參數(shù)。(A-C為常用屬性)
A. keywords(關(guān)鍵字)
說(shuō)明：用于告訴搜索引擎，你網(wǎng)頁(yè)的關(guān)鍵字。舉例：
<meta name="keywords" content="博客，前端">
B. description(網(wǎng)站內(nèi)容的描述)
說(shuō)明：用于告訴搜索引擎，你網(wǎng)站的主要內(nèi)容。舉例：
<meta name="description" content="熱愛(ài)前端與編程">
C. viewport(移動(dòng)端的窗口)
說(shuō)明：這個(gè)屬性常用于設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)。在用bootstrap,AmazeUI等框架時(shí)候都有用過(guò)viewport。
舉例（常用范例）：
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
- width - 可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
- height - viewport的高度
- initial-scale - 初始的縮放比例
- minimum-scale - 允許用戶縮放到的最小比例
- maximum-scale - 允許用戶縮放到的最大比例
- user-scalable - 用戶是否可以手動(dòng)縮放
1. 天貓
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
2. 淘寶
<title>淘寶網(wǎng)觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
3. 京東
<title> 京東 - 手機(jī)版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機(jī)購(gòu)物,WAP商城,日用百貨,3C家電,汽車(chē)用品">
<meta name="description"
content="京東手機(jī)版提供了包括數(shù)碼、家電、手機(jī)、電腦配件、網(wǎng)絡(luò)產(chǎn)品、
日用百貨等數(shù)萬(wàn)種商品，手機(jī)快捷購(gòu)物，就上京東手機(jī)版。">
4. 網(wǎng)易
<title>手機(jī)網(wǎng)易網(wǎng)</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
4. 百度
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
6. 手機(jī)端特有的有哪些？
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持 1:1，并且文檔最大的寬度比例是 1.0，且不允許用戶縮放屏幕。
第二個(gè) meta 標(biāo)簽是 iphone 設(shè)備中的 safari 私有 meta 標(biāo)簽，它表示：允許全屏模式瀏覽。
第三個(gè) meta 標(biāo)簽也是 iphone 的 私有 標(biāo)簽，它指定的 iphone 中 safari 頂端的狀態(tài)條的樣式； 在 web app 應(yīng)用下?tīng)顟B(tài)條（屏幕頂部條）的顏色； 默認(rèn)值為default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）。 注意：若值為 “black-translucent” 將會(huì)占據(jù)頁(yè)面px位置，浮在頁(yè)面上方 （會(huì)覆蓋頁(yè)面 20px 高度–iphone 4 和 itouch 4 的 Retina 屏幕為 40px）。
第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼。
D. robots(定義搜索引擎爬蟲(chóng)的索引方式)
說(shuō)明：robots用來(lái)告訴爬蟲(chóng)哪些頁(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ù)通過(guò)此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)。
4.all : 搜索引擎將索引此網(wǎng)頁(yè)與繼續(xù)通過(guò)此網(wǎng)頁(yè)的鏈接索引，等價(jià)于index，follow。
5.index : 搜索引擎索引此網(wǎng)頁(yè)。
6.follow : 搜索引擎繼續(xù)通過(guò)此網(wǎng)頁(yè)的鏈接索引搜索其它的網(wǎng)頁(yè)。
E. author(作者)
說(shuō)明：用于標(biāo)注網(wǎng)頁(yè)作者舉例：
<meta name="author" content="632851952@qq.com">
F. generator(網(wǎng)頁(yè)制作軟件)
說(shuō)明：用于標(biāo)明網(wǎng)頁(yè)是什么軟件做的舉例: (不知道能不能這樣寫(xiě))：
<meta name="generator" content="vscode">
G. copyright(版權(quán))
說(shuō)明：用于標(biāo)注版權(quán)信息舉例：
<meta name="copyright" content="Lxxyx"> //代表該網(wǎng)站為L(zhǎng)xxyx個(gè)人版權(quán)所有。
H. revisit-after(搜索引擎爬蟲(chóng)重訪時(shí)間)
說(shuō)明：如果頁(yè)面不是經(jīng)常更新，為了減輕搜索引擎爬蟲(chóng)對(duì)服務(wù)器帶來(lái)的壓力，可以設(shè)置一個(gè)爬蟲(chóng)的重訪時(shí)間。如果重訪時(shí)間過(guò)短，爬蟲(chóng)將按它們定義的默認(rèn)時(shí)間來(lái)訪問(wèn)。舉例：
<meta name="revisit-after" content="7 days" >
I. renderer(雙核瀏覽器渲染方式)
說(shuō)明：renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁(yè)面。比如說(shuō)360瀏覽器。舉例：
<meta name="renderer" content="webkit|ie-comp|ie-stand"> //與font-family優(yōu)先規(guī)則一樣
<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屬性
http-equiv類(lèi)似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。
meta標(biāo)簽中http-equiv屬性語(yǔ)法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">
其中http-equiv屬性主要有以下幾種參數(shù)：
A. content-Type(設(shè)定網(wǎng)頁(yè)字符集)(推薦使用HTML5的方式)
說(shuō)明：用于設(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è)面)
說(shuō)明：用于告知瀏覽器以何種版本來(lái)渲染頁(yè)面,也可用于兼容性處理。（一般都設(shè)置為最新模式，在各大框架中這個(gè)設(shè)置也很常見(jiàn)。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁(yè)面
C. cache-control(指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制)
用法1.
說(shuō)明：指導(dǎo)瀏覽器如何緩存某個(gè)響應(yīng)以及緩存多長(zhǎng)時(shí)間。參考鏈接：Google Developers 參考鏈接：HTTP緩存
<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)行緩存。（比如說(shuō)CDN就不允許緩存private的響應(yīng)）
- maxage : 表示當(dāng)前請(qǐng)求開(kāi)始，該響應(yīng)在多久內(nèi)能被緩存和重用，而不去服務(wù)器重新請(qǐng)求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒。
用法2.(禁止百度自動(dòng)轉(zhuǎn)碼)
說(shuō)明：用于禁止當(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í)間)
說(shuō)明:用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，過(guò)期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自動(dòng)刷新并指向某頁(yè)面)
說(shuō)明：網(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è)定)
說(shuō)明：如果網(wǎng)頁(yè)過(guò)期。那么這個(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"> //具體范例
參考1 https://segmentfault.com/a/1190000004279791
參考2 https://segmentfault.com/a/1190000007162530
參考3 http://www.3lian.com/edu/2014/10-10/171025.html
