相信你已經多少見過html的meta標簽，但是對它的認識可能還不夠全面，那么我簡單為大家整理了下meta標簽全部的屬性值以及說明。 ## 屬性 meta為標簽head中的子標簽，包括content（必選，存儲值）、name（鍵名）、http-equiv（鍵名）、scheme(content格式)四個屬性。 其中content屬性為標記的具體值，必填值；name為把值關聯到某個名稱，http-equiv是把值關聯到http頭部；scheme是規定了content 的文本格式。 ## http-equiv 1. Content-Type 文檔類型,對應值為 text-html;charset=utf-8 ; eg:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2. Cache-Control 緩存控制，常見的取值有private、no-cache、max-age、must-revalidate等，默認為private, 1） 打開新窗口 值為private、no-cache、must-revalidate，那么打開新窗口訪問時都會重新訪問服務器。 而如果指定了max-age值，那么在此值內的時間里就不會重新訪問服務器，例如： Cache-control: max-age=5(表示當訪問此網頁后的5秒內再次訪問不會去服務器) 2） 在地址欄回車 值為private或must-revalidate則只有第一次訪問時會訪問服務器，以后就不再訪問。 值為no-cache，那么每次都會訪問。 值為max-age，則在過期之前不會重復訪問。 3） 按后退按扭 值為private、must-revalidate、max-age，則不會重訪問， 值為no-cache，則每次都重復訪問 4） 按刷新按扭 無論為何值，都會重復訪問 Cache-control值為“no-cache”時，訪問此頁面不會在Internet臨時文件夾留下頁面備份。 eg:`<meta http-equiv="Cache-Control" content="no-cache"/>` 3. refresh 刷新頁面,取值 `5;URL=http://www.baidu.com`,前面為跳轉的時間（單位s），頁面可以為絕對地址也可以為相對頁面地址，頁面地址不寫默認為刷新當前頁面。 `eg:<meta http-equiv="refresh" content="5;URL=http://www.baidu.com"/>` 4. X-UA-Compatible 設置ie瀏覽器的文檔的渲染模式，IE=edge,chrome=1.說明 ：這個參數用于解決瀏覽器的兼容性一致外觀問題，可以使ie不同版本的瀏覽器有一致的外觀，如果是edge則是以最新的模式渲染，如果有谷歌按照谷歌渲染。也可以強制按照ie7 8的標準渲染，如IE=7;IE=9 eg：`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">` 5. 其他（不常用的不再說明） expires:網頁的有效期，超過這個時間，網頁作廢，很少用,Sunday 26 October 2008 01:00 GMT； eg:`<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" />` content-language:網頁的編碼,語言類型,zh,en等，語言類型地址：[點擊查看](http://www.dreamdu.com/xhtml/names_of_languages/) eg: `<meta http-equiv="content-language" content="zh-CN" />` Pragma 控制禁止從緩存中訪問頁面 `<meta http-equiv="Pragma" content="no-cache"> ` ## name * 用于定義一些關鍵屬性，用處很多。 1. keyword 關鍵字 ，用戶描述網站的主題 eg: `<meta name="keywords" content="your tags" />` 2. description 網站描述，每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽 eg: `<meta name="description" content="150 words" />` 3. robots 搜索方式，常見值 all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索，但頁面上的鏈接可以被查詢； nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。 eg :`<meta name="robots" content="index,follow" />` 4. viewport 針對移動設備，控制視圖的寬高，width為頁面內容的寬度，initial-scale代表初始方法倍數，maximum-scale代表最大放大倍數，minimum-scale=0.5代表最小放大倍數，height：高度（數值 / device-height）（范圍從223 到10,000），user-scalable：用戶是否可以手動縮 (no,yes)，而為了更好的使用這個scale參數，需要獲取當前的縮放倍率，用設備的寬度縮放640設計稿的比率 eg：`<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>` 5. format-detection 忽略識別一些特殊內容，如郵箱，電話等，寫在一起可能會失效 eg:`<meta content="telephone=no" name="format-detection" />` 6. apple-mobile-web-app-capable 蘋果默認的菜單欄，工具欄 eg:`<meta name=”apple-mobile-web-app-capable” content=”yes” />` 7. 其他 ~~~ <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!-- 微軟的老式瀏覽器 --> <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"> ~~~