概要：在查看網頁源碼的時候，經常發現有<meta>標簽存在，於是查了一下它的作用，發現有很多功能。下面就簡單的闡述一些常見的功能。
一【什么是<meta>標簽】
meta，即meta-information，可以提供有關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>永遠位於head元素內部，不包含任何內容，並且元數據總是以名稱/值的形式被成對傳遞的。
二 【屬性】
- 必須的屬性
| 屬性 | 值 | 描述 |
| content | some_text | 定義與 http-equiv 或 name 屬性相關的元信息 |
- 可選的屬性
| 屬性 | 值 | 描述 |
| http-equiv | content-type |
把 content 屬性關聯到 HTTP 頭部。 |
| name | author |
把 content 屬性關聯到一個名稱。 |
| scheme | some_text | 定義用於翻譯 content 屬性值的格式。 |
三【常用功能】
1.SEO相關
● 頁面關鍵詞 ：每個網頁應具有描述該網頁內容的一組唯一的關鍵字。
使用人們可能會搜索，並准確描述網頁上所提供信息的描述性和代表性關鍵字及短語。標記內容太短，則搜索引擎可能不會認為這些內容相關。另外標記不應超過 874 個字符。例如：
<meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區">
● 頁面描述 ：每個網頁都應有一個不超過 150 個字符且能准確反映網頁內容的描述標簽。
<meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力並專注於為開發者打造一個純凈的技術交流社區，推動並幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">
● 搜索引擎搜索方式 ：robots（機器人向導），用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。content的參數有all、none、index、noindex、follow、nofollow。默認是all。例如：
<meta name="robots" content="index,follow">
<!-- all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索； nofollow：頁面上的鏈接不可以被查詢；
-->
● 頁面重定向與刷新 ：content內的數字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。例如：
<meta http-equiv="refresh" content="5;url=http://www.cnblogs.com/">
上例代碼表示5秒之后跳轉到博客園首頁。
● 頁面作者 ：以自由格式定義的網頁作者的名稱。例如：
<meta name="author" content="author name">
● 頁面版權 ：copyright (版權)，描述頁面的版權。例如：
<meta name="copyright" content="本頁版權歸XX所有。All Rights Reserved">
● 編輯器 ：generator是編輯器的說明。例如：
<meta name="generator" content="PCDATA|FrontPage|">
content的值是你所使用的編輯器。
● referrer：html文檔控制http請求中的referer。可用的值：
| 值 | 描述 |
| never | 刪除http請求head中的referer |
| always | 不改變http請求dead中的referer的值。注意，這種情況下，如果當前頁面使用了https協議，而要加載的資源使用http協議，加載資源的請求head中也會攜帶referer。 |
| origin | 從當前頁面中發起的http請求只攜帶origin部分。 |
| default | 如果當前頁面使用的是https協議，而正要加載的資源使用的是普通的http協議，則將http請求head中的referer置為空。 |
例如，百度首頁源碼中的：
<meta content="always" name="referrer">
2.移動設備
● viewport ：能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。大部分4.7-5寸設備的viewport寬設為360px；5.5寸設備設為400px；iphone6設為375px；ipone6 plus設為414px。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊 -->
可用的值：
| 屬性 | 可取的值 | 描述 |
| width | 一個可能的正整數值或者設備的呈現表面的寬度 | 定義了視口的寬度，以px為單位 |
| height | 一個可能的正整數值或者設備的呈現表面的高度 | 定義了視口的高度，以px為單位 |
| initial-scale | 在0.0和10.0之間的正數 | 描述設備寬度（縱向模式下設備的寬度，橫向模式下設備的高度）與視口大小的比率 |
| maximum-scale | 在0.0和10.0之間的正數 | 限定縮放的最大值;它必須大於或等於最小尺度 |
| minimum-scale | 在0.0和10.0之間的正數 | 限定縮放的最小值;它必須是小於或等於最大尺度 |
| user-scalable | 布爾值（yes或no） | 如果設置為no，則用戶不能夠在所述網頁進行放大。默認值是yes。 |
注意，很多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶需要手動移動頁面或者縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則用戶將不能放大/縮小網頁來看到全部的內容。
● WebApp全屏模式 ：偽裝app，離線應用。
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 啟用 WebApp 全屏模式 -->
● 隱藏狀態欄/設置狀態欄顏色 ：只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
● 添加到主屏后的標題 ：
<meta name="apple-mobile-web-app-title" content="標題">
● 忽略數字自動識別為電話號碼 ：
<meta name="format-detection" content="telephone=no">
● 忽略識別郵箱 ：
<meta name="format-detection" content="email=no">
● 添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner(如下圖)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
● 移動端的<meta>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應移動端end -->
3.網頁相關
● 聲明編碼（HTML5）：描述當前頁面使用的編碼，例如：
<meta charset='utf-8' />
● 優先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關於X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
● 瀏覽器內核控制：國內瀏覽器很多都是雙內核（webkit和Trident），webkit內核高速瀏覽，IE內核兼容網頁和舊版網站。而添加meta標簽的網站可以控制瀏覽器選擇何種內核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
國內雙核瀏覽器默認內核模式如下：
1. 搜狗高速瀏覽器、QQ瀏覽器：IE內核（兼容模式）
2. 360極速瀏覽器、遨游瀏覽器：Webkit內核（極速模式）
● 禁止百度轉碼 ：通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，加上廣告，為此可在 head 內添加：
<meta http-equiv="Cache-Control" content="no-siteapp" />
● 禁止瀏覽器從本地計算機的緩存中訪問頁面內容：這樣設定，訪問者將無法脫機瀏覽。
<meta http-equiv="Pragma" content="no-cache">
● Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->
● 站點適配：主要用於PC-手機頁的對應關系。
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!-- [wml|xhtml|html5]根據手機頁的協議語言，選擇其中一種； url="url" 后者代表當前PC頁所對應的手機頁URL，兩者必須是一一對應關系。 -->
● expires (期限) ：指定網頁在緩存中的過期時間，一旦網頁過期，必須到服務器上重新調閱
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必須使用GMT的時間格式，或直接設為0(數字表示多少時間后過期)。
● pragma (cach模式) ：禁止瀏覽器從本地機的緩存中調閱頁面內容。
<meta http-equiv="pragma" content="no-cach">
● set-cookie ：定義一個cookie
<meta http-equiv="set-Cookie" content="cookievalue=xxx; expires=wednesday,21-Oct-98 16:14:21 GMT; path=/">
注意：必須使用GMT的時間格式。
● default-style ：指定 content 屬性的值必須匹配同一文檔中的一個 link 元素上的 title 屬性的值，或者必須匹配同一文檔中的一個 style 元素上的 title 屬性的值。
<meta http-equiv="default-style" content="the document's preferred stylesheet">
四【參考文檔】
1.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
2.http://fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c
3.https://segmentfault.com/a/1190000002407912
4.http://www.cnblogs.com/esshs/articles/157588.html