常用元素整理與詳解

元素詳解與常用整理

定義與用法：
<meta>元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

說明：
在 HTML 中，<meta> 標籤沒有結束標籤。
在 XHTML 中，<meta> 標籤必須被正確地關閉。
<meta> 標籤永遠位於 head 元素內部。
元數據總是以名稱/值的形式被成對傳遞的。

屬性：
content，必須，值（some_text），定義與 http-equiv 或 name 屬性相關的元信息。content 屬性提供了名稱/值對中的值。該值可以是任何有效的字符串。content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

http-equiv，可選，值（content-type、expires、refresh、set-cookie），把 content 屬性關聯到 HTTP 頭部。http-equiv 屬性爲名稱/值對提供了名稱。並指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。使用帶有 http-equiv 屬性的 <meta> 標籤時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。

name，可選，值（author、description、keywords、generator、revised、others），把 content 屬性關聯到一個名稱。name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML標籤都沒有指定任何預先定義的meta名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。

scheme，可選，值（some_text），定義用於翻譯 content 屬性值的格式。scheme屬性用於指定要用來翻譯屬性值的方案。此方案應該在由head標籤的profile屬性指定的概況文件中進行了定義。

常用meta整理：

申明網頁編碼
<meta charset='utf-8' />

網頁緩存
一小時緩存，不允許使用過期數據
<meta http-equiv="Cache-Control" content="max-age=3600,must-revalidata">
禁止緩存，禁止瀏覽器從本地計算機的緩存中訪問頁面內容：這樣設定，訪問者將無法脫機瀏覽（http1.0，http1.1）
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">


定義應用程序名
<meta name="application-name" content="程序名">

隱藏safari界面
 ios專門定義來實現全屏顯示，通過window.nacigator.standalone來偵測的
 <meta name="apple-mobile-web-app-capable" content="yes">

 改變狀態欄
 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

 轉碼申明：用百度打開網頁可能會對其進行轉碼（比如貼廣告），避免轉碼可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO優化
頁面關鍵詞，每個網頁應具有描述該網頁內容的一組唯一的關鍵字
<meta name="keywords" content="your tags" />

頁面描述，每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標籤。
<meta name="description" content="150 words" />

搜索引擎索引方式，robotterms是一組使用逗號(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確保正確使用nofollow和noindex屬性值。
<meta name="robots" content="index,follow" />
<!--
    all：文件將被檢索，且頁面上的鏈接可以被查詢；
    none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
    index：文件將被檢索；
    follow：頁面上的鏈接可以被查詢；
    noindex：文件將不被檢索；
    nofollow：頁面上的鏈接不可以被查詢。
 -->

 頁面重定向和刷新：content內的數字代表時間（秒），既多少時間後刷新。如果加url,則會重定向到指定網頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。
 <meta http-equiv="refresh" content="0;url=" />

 其他
 定義網頁作者信息等
<meta name="author" content="author name" /> <!-- 定義網頁作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />


視點viewport：能優化移動瀏覽器的顯示。如果不是響應式網站，不要使用initial-scale或者禁用縮放。
<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊  -->

WebApp全屏模式：僞裝app，離線應用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 啓用 WebApp 全屏模式 -->

添加到主屏後的標題
<meta name="apple-mobile-web-app-title" content="標題">

忽略數字自動識別爲電話號碼
<meta content="telephone=no" name="format-detection" />

忽略識別郵箱
<meta content="email=no" name="format-detection" />

添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<!-- 針對手持設備優化，主要是針對一些老的不識別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">

優先使用 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">

 window8磁貼顏色與圖標
 <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標 -->

頁面被載入和調出時的一些特效，blendTrans是動態濾鏡的一種，產生漸隱效果。另一種動態濾鏡RevealTrans也可以用於頁面進入與退出效果:
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration　　表示濾鏡特效的持續時間(單位：秒)
Transition　濾鏡類型。表示使用哪種特效，取值爲0-23。