你真的瞭解head標籤下的meta?

你真的瞭解meta標籤的詳細用途嗎？
今天啊我們來好好縷一縷meta這個標籤
接下來我們從四個方面來介紹meta標籤
分別是：
meta是什麼
meta的組成
meta能做什麼
meta的屬性與值

meta標籤分兩大部分： http標題信息（http-equiv）和頁面描述信息（name）

meta能做什麼

• 控制頁面緩衝
• 自動刷新並指向新的頁面
• SEO搜索引擎優化
• 定義頁面使用語言
• 實現網頁轉換時的動態效果
• 網頁定級評價

charset （首先我們來看下charset（HTML5新增））

* 規定 HTML 文檔的字符編碼 *

<meta charset="utf-8">

注意：

* charset屬性是HTML5中的新屬性，且替換了： *
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

meta的屬性與值

首先我們來總覽下都有哪些屬性及對應的值

1. name
2. content
3. http-equiv

name

* 網頁描述的關鍵字、摘要、作者和定義robots(搜索引擎機器人)行爲、爲搜索引擎提供信息 *

主要參數有：

• format-detection
• robots
• revisit-after
• viewport
• apple-mobile-web-app-capable

format-detection

* 用來檢測HTML中的一些格式的 *

<meta name="format-detection" content="telephone=no,email=no,adress=no">

telephone=no 禁止了把數字轉化爲撥號鏈接
email=no 禁止作爲郵箱地址 告訴設備不識別郵箱
adress=no 禁止跳轉至地圖

robots

有時候會有一些站點內容，不希望被ROBOTS抓取而公開。爲了解決這個問題，ROBOTS開發界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標籤。

<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">  默認是all

• all: 文件將被檢索，且頁面上的鏈接可以被查詢
• none: 文件將不被檢索，且頁面上的鏈接不可以被查詢
• index: 文件將被檢索
• follow: 頁面上的鏈接可以被查詢
• noindex: 文件將不被檢索，但頁面上的鏈接可以被查詢
• nofollow: 文件將不被檢索，頁面上的鏈接可以被查詢

revisit-after

通知搜索引擎多少天訪問一次

<meta name='revisit-after' content='7 days'>

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

width: 控制viewport的大小，可以指定一個值，或者特殊的值，如device-width爲設備的寬度
height: 和width相對應，指定高度
initial-scale： 初始縮放比例，頁面第一次加載時候縮放比例
maximum-scale: 允許用戶縮放到的最大比例
minimum-scale: 允許用戶縮放到的最小比例
user-scalable: 用戶是否可以手動縮放

apple-mobile-web-app-capable

* 刪除/顯示 默認的蘋果工具欄和菜單欄 *

<meta name="apple-mobile-web-app-capable" content="yes"> 

注意：

content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

content

content 屬性提供了名稱/值對中的值。該值可以是任何有效的字符串。
content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

http-equiv

http-equiv相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，
以幫助正確地顯示網頁內容

主要的參數有：

• X-UA-Compatible
• expires
• pragma
• refresh
• set-cookie
• window-target
• content-type
• pics-label
• content-language
• cache-control
• content-script-type

X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面

<meta http-equiv="X-UA-Compatible" content="IE=edge"

以上代碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。

expires

* 可以用於設定網頁到期時間，一旦網頁過期必須到服務器上重新傳輸 *

<meta http-equiv="expires" content="Wed, 20 Jun 2016 22:33:00 GMT">

注意：

* 必須使用GMT的時間格式 *

pragma

* 禁止瀏覽器從本地計算機的緩存中訪問頁面內容用法 *

<meta http-equiv="pragma" content="no-cache">

注意：

* 訪問者將無法脫機瀏覽 *

refresh

* 自動刷新並指向新頁面 *

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com/">

注意：

* 其中2是指停留2秒後自動刷新到URL網址 *

set-cookie

* 如果網頁過期，則存盤的cookie將被刪除 *

<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Wednesday,20-Jun-2017 24:00:00 GMT; path=/">

注意：

* 必須使用GMT的時間格式 *

window-target

* 強制頁面在當前窗口以獨立頁面顯示 *

<meta http-equiv="window-target" content="_top">

注意：

** 這個屬性是用來防止別人在框架裏調用自己的頁面
content選項：
_blacnk 在新窗口顯示
_top 當前整個窗口顯示
_self 當前容器顯示，比如框架嵌套
_parent 父容器顯示，比如框架嵌套
**

content-type

* 設定頁面使用的字符集 *

<meta http-equiv="content-type" content="">

注意：

* 需要放在head標籤最前面 *

pics-label

* 網頁等級評定說明：在IE的internet選項中有一項內容設置，可以防止瀏覽一些受限制的網站，而網站的限制級別就是通過meta屬性來設置的。 *

<meta http-equiv="pics-label" content="">

content-language

* 顯示語言的設定 *

<meta http-equiv="content-language" content="zh-cn">

cache-control

* HTTP 1.1 引入了 Cache-Control 響應頭參數以給站長們更多控制網站內容的權力，同時彌補了 Expires的侷限. *

<meta http-equiv="cache-control" content="no-cache">

cache-control的參數包括:

• max-age=[單位：秒 seconds] — 設置緩存最大的有效時間
• s-maxage=[單位：秒 seconds] — 類似於 max-age, 但是它只用於公享緩存 (e.g., proxy)
• public — 響應會被緩存，並且在多用戶間共享。正常情況, 如果要求 HTTP 認證,響應會自動設置爲 private
• private — 響應只能夠作爲私有的緩存(e.g., 在一個瀏覽器中)，不能在用戶間共享
• no-cache — 響應不會被緩存,而是實時向服務器端請求資源。這一點很有用，這對保證HTTP 認證能夠嚴格地禁止緩存以保證安全性很有用（這是指頁面與public結合使用的情況下）.既沒有犧牲緩存的效率，又能保證安全
• no-store — 在任何條件下，響應都不會被緩存，並且不會被寫入到客戶端的磁盤裏，這也是基於安全考慮的某些敏感的響應纔會使用這個
• must-revalidate — 響應在特定條件下會被重用，以滿足接下來的請求，但是它必須到服務器端去驗證它是不是仍然是最新的
• proxy-revalidate — 類似於 must-revalidate,但不適用於代理緩存

content-script-type

* W3C網頁規範，指明頁面中腳本的類型 *

<meta http-equiv="content-script-type" content="text/javascript">

其他

<meta http-equiv="page-enter" content="revealTrans(duration=1.0,transtion=12)">

在IE5.5及以上版本的瀏覽器中，增加了頁面過渡效果，經過檢查和實驗，IE中是可以的，谷歌瀏覽器是不支持的

<meta http-equiv="page-exit" content="revealTrans(duration=1.0,transtion=12)">

設定離開頁面時的特殊效果

• Duration 值爲網頁動態過渡的時間，單位爲秒

• Transition 是過渡方式，它的值爲0到23，分別對應24種過渡方式

  1. 盒狀收縮
  2. 盒狀放射
  3. 圓形收縮
  4. 圓形放射
  5. 由下往上
  6. 由上往下
  7. 從左至右
  8. 從右至左
  9. 垂直百葉窗
  10. 水平百葉窗
  11. 水平格狀百葉窗
  12. 垂直格狀百葉窗
  13. 隨意溶解
  14. 從左右兩端向中間展開
  15. 從中間向左右兩端展開
  16. 從上下兩端向中間展開
  17. 從中間向上下兩端展開
  18. 從右上角向左下角展開
  19. 從右下角向左上角展開
  20. 從左上角向右下角展開
  21. 從左下角向右上角展開
  22. 水平線狀展開
  23. 垂直線狀展開
  24. 隨機產生一種過渡方式