W3School say meta
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上蝎困，但是對于機(jī)器是可讀的录语。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞）禾乘，或其他 web 服務(wù)澎埠。 —— W3School
mdn say meta
HTML <meta> 元素表示那些不能由其它HTML相關(guān)元素(<base>, <link>, <script>, <style> or <title>.)之一表示的任何元數(shù)據(jù)信息。
通俗的講
meta常用于定義頁面的說明始藕，關(guān)鍵字蒲稳，最后修改日期，和其它的元數(shù)據(jù)伍派。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁面）江耀，搜索引擎和其它網(wǎng)絡(luò)服務(wù)。
屬性說明
1. name
name屬性主要用于描述網(wǎng)頁诉植，比如網(wǎng)頁的關(guān)鍵詞祥国，敘述等。與之對應(yīng)的屬性值為content，content中的內(nèi)容是對name填入類型的具體描述舌稀，便于搜索引擎抓取啊犬。meta標(biāo)簽中name屬性語法格式是：
<meta name="參數(shù)" content="具體的描述">。
其中name屬性共有以下幾種參數(shù)壁查。(A-C為常用屬性)
A. keywords(關(guān)鍵字)
說明：用于告訴搜索引擎觉至，你網(wǎng)頁的關(guān)鍵字。舉例：
<meta name="keywords" content="博客睡腿，前端">
B. description(網(wǎng)站內(nèi)容的描述)
說明：用于告訴搜索引擎语御，你網(wǎng)站的主要內(nèi)容。舉例：
<meta name="description" content="熱愛前端與編程">
C. viewport(移動端的窗口)
說明：這個(gè)屬性常用于設(shè)計(jì)移動端網(wǎng)頁席怪。在用bootstrap,AmazeUI等框架時(shí)候都有用過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 - 用戶是否可以手動縮放
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ī)購物,WAP商城,日用百貨,3C家電,汽車用品">
<meta name="description"
content="京東手機(jī)版提供了包括數(shù)碼挂捻、家電孽锥、手機(jī)、電腦配件细层、網(wǎng)絡(luò)產(chǎn)品、
日用百貨等數(shù)萬種商品唬涧，手機(jī)快捷購物疫赎，就上京東手機(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ài)條（屏幕頂部條）的顏色； 默認(rèn)值為default（白色）雅采，可以定為 black（黑色）和 black-translucent（灰色半透明）爵憎。 注意：若值為 “black-translucent” 將會占據(jù)頁面px位置，浮在頁面上方 （會覆蓋頁面 20px 高度–iphone 4 和 itouch 4 的 Retina 屏幕為 40px）婚瓜。
第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼宝鼓。
D. robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引巴刻。content的參數(shù)有all,none,index,noindex,follow,nofollow愚铡。默認(rèn)是all。
舉例：
<meta name="robots" content="none">
具體參數(shù)如下：
1.none : 搜索引擎將忽略此網(wǎng)頁胡陪，等價(jià)于noindex沥寥，nofollow碍舍。
2.noindex : 搜索引擎不索引此網(wǎng)頁。
3.nofollow: 搜索引擎不繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁营曼。
4.all : 搜索引擎將索引此網(wǎng)頁與繼續(xù)通過此網(wǎng)頁的鏈接索引乒验，等價(jià)于index，follow蒂阱。
5.index : 搜索引擎索引此網(wǎng)頁锻全。
6.follow : 搜索引擎繼續(xù)通過此網(wǎng)頁的鏈接索引搜索其它的網(wǎng)頁。
E. author(作者)
說明：用于標(biāo)注網(wǎng)頁作者舉例：
<meta name="author" content="632851952@qq.com">
F. generator(網(wǎng)頁制作軟件)
說明：用于標(biāo)明網(wǎng)頁是什么軟件做的舉例: (不知道能不能這樣寫)：
<meta name="generator" content="vscode">
G. copyright(版權(quán))
說明：用于標(biāo)注版權(quán)信息舉例：
<meta name="copyright" content="Lxxyx"> //代表該網(wǎng)站為Lxxyx個(gè)人版權(quán)所有录煤。
H. revisit-after(搜索引擎爬蟲重訪時(shí)間)
說明：如果頁面不是經(jīng)常更新鳄厌，為了減輕搜索引擎爬蟲對服務(wù)器帶來的壓力，可以設(shè)置一個(gè)爬蟲的重訪時(shí)間妈踊。如果重訪時(shí)間過短了嚎，爬蟲將按它們定義的默認(rèn)時(shí)間來訪問。舉例：
<meta name="revisit-after" content="7 days" >
I. renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準(zhǔn)備的廊营，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面歪泳。比如說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類似于HTTP的頭部協(xié)議露筒，它回應(yīng)給瀏覽器一些有用的信息呐伞，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。
meta標(biāo)簽中http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="具體的描述">
其中http-equiv屬性主要有以下幾種參數(shù)：
A. content-Type(設(shè)定網(wǎng)頁字符集)(推薦使用HTML5的方式)
說明：用于設(shè)定網(wǎng)頁字符集慎式，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML伶氢，不推薦
<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁字符集的方式，推薦使用UTF-8
B. X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁面)
說明：用于告知瀏覽器以何種版本來渲染頁面,也可用于兼容性處理瘪吏。（一般都設(shè)置為最新模式癣防，在各大框架中這個(gè)設(shè)置也很常見。）舉例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁面
C. cache-control(指定請求和響應(yīng)遵循的緩存機(jī)制)
用法1.
說明：指導(dǎo)瀏覽器如何緩存某個(gè)響應(yīng)以及緩存多長時(shí)間掌眠。參考鏈接：Google Developers 參考鏈接：HTTP緩存
<meta http-equiv="cache-control" content="no-cache">
共有以下幾種用法：
- no-cache: 先發(fā)送請求蕾盯，與服務(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)前請求開始，該響應(yīng)在多久內(nèi)能被緩存和重用蚂夕，而不去服務(wù)器重新請求迅诬。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒。
用法2.(禁止百度自動轉(zhuǎn)碼)
說明：用于禁止當(dāng)前頁面在移動端瀏覽時(shí)婿牍，被百度自動轉(zhuǎn)碼侈贷。雖然百度的本意是好的，但是轉(zhuǎn)碼效果很多時(shí)候卻不盡人意等脂。所以可以在head中加入例子中的那句話俏蛮，就可以避免百度自動轉(zhuǎn)碼了。舉例：
<meta http-equiv="Cache-Control" content="no-siteapp" />
D. expires(網(wǎng)頁到期時(shí)間)
說明:用于設(shè)定網(wǎng)頁的到期時(shí)間上遥，過期后網(wǎng)頁必須到服務(wù)器上重新傳輸搏屑。舉例：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自動刷新并指向某頁面)
說明：網(wǎng)頁將在設(shè)定的時(shí)間內(nèi)，自動刷新并調(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)頁過期。那么這個(gè)網(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"> //具體范例
參考1 https://segmentfault.com/a/1190000004279791
參考2 https://segmentfault.com/a/1190000007162530
參考3 http://www.3lian.com/edu/2014/10-10/171025.html
