meta標籤總結

最後更新：2016-11-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：開啟 stat lte 目錄 app 應用 ipad 本地手機

keywords,description(經常用到的兩個)

頁面的關鍵字和描述，是寫給搜尋引擎看的，關鍵字可以有多個用 ‘,’號隔開

Content-Type 告訴瀏覽器當前訪問的資源類型

refresh 重新導向（以下樣本5秒後會跳轉到：http://blog.csdn.net）

full-screen 全螢幕顯示網頁(部分移動端瀏覽器的專有屬性)

browsermode 瀏覽器模式-強制堅屏顯示(部分移動端瀏覽器的專有屬性),

format-detection 資料格式驗證渲染：

telephone：而iPhone會自動把你這個文字加連結樣式、並且點擊這個數字還會自動撥號！預設開啟
email：瀏覽器會識別郵箱並加樣式，點擊可以調用系統預設郵件應用給該地址發郵件，預設開啟
adress：adress=yes就開啟了點擊地址直接跳轉至地圖的功能，預設開啟

x5-orientation QQ瀏覽器強制豎屏

<meta name="x5-orientation" content="portrait"/>

x5-fullscreen QQ瀏覽器強制全屏

<meta name="x5-fullscreen" content="true"/>

x5-page-mode QQ瀏覽器應用模式

<meta name="x5-page-mode" content="app"/>

X-UA-Compatible

IE的相容模式:以IE的哪個版本去渲染頁面（IE=8：以IE8的模式去渲染頁面，IE=Edge:以最新版本的IE去渲染頁面，當然這個最新指的是你系統裝的最高版本的IE）

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

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

enderer

這貌似是360瀏覽器專用，相容360的利器啊，，360預設是用IE7去渲染頁面的，不管你的系統裝了多高版本的IE,這種行為真是業界毒瘤啊。

<meta name="renderer" content="webkit">//預設webkit核心

<meta name="renderer" content="ie-comp">//預設IE相容模式

<meta name="renderer" content="ie-stand">//預設IE標準模式

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設定)

說明：瀏覽器訪問某個頁面時會將它存在緩衝中，下次再次訪問時就可從緩衝中讀取，以提高速度。
當你希望訪問者每次都重新整理你廣告的表徵圖，或每次都重新整理你的計數器，就要禁用緩衝了。
通常HTML檔案沒有必要禁用緩衝，對於ASP等頁面，就可以使用禁用緩衝，因為每次看到的頁面都是在伺服器動態產生的，
緩衝就失去意義。如果網頁到期，那麼存檔的cookie將被刪除。
用法：<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
21-Oct-98 16:14:21 GMT; path=/">

Window-target (顯示視窗的設定)

說明：強制頁面在當前視窗以獨立頁面顯示。
用法：<meta http-equiv="Widow-target" Content="_top">
注意：這個屬性是用來防止別人在架構裡調用你的頁面。Content選項：_blank、_top、_self、_parent

Pics-label (網頁RSAC等級評定)

說明：在IE的Internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制級
別就是通過該參數來設定的。
用法：<meta http-equiv="Pics-label" Contect=“(PICS－1.1′http://www.rsac.org/ratingsv01.html’
I gen comment ‘RSACi North America Sever’ by ‘[email protected]’
for ‘http://www.microsoft.com’ on ‘1997.06.30T14:21－0500′ r(n0 s0 v0 l0))">
注意：不要將層級設定的太高。RSAC的評估系統提供了一種用來評價Web網站內容的標準。
使用者可以設定Microsoft Internet Explorer（IE3.0以上）來排除包含有色情和暴力內容的網站。
上面這個例子中的HTML取自Microsoft的首頁。代碼中的（n 0 s 0 v 0 l 0）表示該網站不包含不健康內容。
層級的評定是由RSAC，即美國娛樂委員會的評級機構評定的，如果你想進一步瞭解RSAC評估系統的等級內容，或者你需要評價自己的網站，可以訪問RSAC的網站：http://www.rsac.org/。

Content-Script-Type (指令碼相關)

說明：這是近來W3C的規範，指明頁面中指令碼的類型。
用法：<meta http-equiv="Content-Script-Type" Content="text/javascript" />

RSS 網站地圖-Sitemap

複製代碼儲存到一個sitemap.xml(或者ror.xml)檔案中，然後上傳到你應用的根目錄下。
並且把下面代碼增加到你網站首頁的 <head> 標籤中，主要是為了方便搜尋引擎來讀取。

<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />

如果你的網站地圖檔名是ror.xml,記得要把上面代碼中的href改成href="ror.xml"
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />

收藏的表徵圖

Content-Type和Content-Language (顯示字元集的設定)

說明：設定頁面使用的字元集，用以說明首頁製作所使用的文字已經語言，
瀏覽器會根據此來調用相應的字元集顯示page內容。
用法：<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312″ />
<meta http-equiv="Content-Language" Content="zh-CN" />
注意：
該meta標籤定義了HTML頁面所使用的字元集為GB2132，就是國標漢字碼。
如果將其中的“charset=GB2312"替換成“BIG5"，則該頁面所用的字元集就是繁體中文Big5碼。
當你瀏覽一些國外的網站時，IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支援。
這個功能就是通過讀取HTML頁面meta標籤的Content-Type屬性而得知需要使用哪種字元集顯示該頁面的。
如果系統裡沒有裝相應的字元集，則IE就提示下載。
其他的語言也對應不同的charset，比如日文的字元集是“iso-2022-jp "，韓文的是“ks_c_5601"。

Content-Type的Content還可以是：text/xml等文件類型；
Charset選項：
ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii,
x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr,
iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字元集；
Content-Language的Content還可以是：EN、FR等語言代碼。

webapp裡主要的mate用途

這meta的作用就是刪除預設的蘋果工具列和功能表列。content有兩個值”yes”和”no”,當我們需要顯示工具列和功能表列時，這個行meta就不用加了，預設就是顯示。

預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程式風格顯示，並使狀態列透明。

apple-touch-icon

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在使用者把網頁存為書籤時，在手機HOME介面建立應用程式樣式的表徵圖。

ps:

告訴瀏覽器以什麼版本的IE的相容模式來顯示網頁 <meta http-equiv="X-UA-Compatible" content="IE=5" > <meta http-equiv="X-UA-Compatible" content="IE=7" > <meta http-equiv="X-UA-Compatible" content="IE=8" > <meta http-equiv="X-UA-Compatible" content="IE=edge" > 其中最後一行是永遠以最新的IE版本模式來顯示網頁的。另外加上Emulate模式 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > Emulate模式後則更重視<!DOCTYPE> （細心的人會注意到，用IE9去訪問帶有x-ua-compatible的頁面時是不會出現相容視圖按鈕的）

meta標籤總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

meta標籤總結

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support