移動開發常用head，meta標籤

02-03

HTML5、移動開發meta標籤

聲明字元編碼 <meta charset="utf-8">
關於html標籤中的lang屬性：
簡體中文 <html lang="zh-cmn-Hans">
繁體中文 <html lang="zh-cmn-Hant">
使用最新版的IE和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360 使用webkit內核渲染

<meta name="renderer" content="webkit">
禁止百度對網頁轉碼(百度的Siteapp頁面轉碼)
<meta http-equiv="Cache-Control" content="no-siteapp" />
禁止IOS將數字識別為電話
<meta name = "format-detection" content = "telephone=no">

學習前端中，對meta標籤的了解僅僅只是這一句。

<meta charset="UTF-8">n

但是打開任意的網站，其head標籤內都有一列的meta標籤。比如我博客的。

但是自己卻很不熟悉，於是把meta標籤加入了寒假學習計劃的最前方。

簡介

在查閱w3school中，第一句話中的「元數據」就讓我開始了Google之旅。然後很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，Google和百度都沒有相關的詞條。但元數據在Google就有詳細解釋。所以這兒採用英文版W3school的解釋。）

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

不難看出，其中的關鍵是metadata，中文名叫元數據，是用於描述數據的數據。它不會顯示在頁面上，但是機器卻可以識別。這麼一來meta標籤的作用方式就很好理解了。

用處

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標籤用處的介紹，簡潔明了。翻譯過來就是：meta常用於定義頁面的說明，關鍵字，最後修改日期，和其它的元數據。這些元數據將服務於瀏覽器（如何布局或重載頁面），搜索引擎和其它網路服務。

組成

meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性。

1. name屬性

name屬性主要用於描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便於搜索引擎抓取。meta標籤中name屬性語法格式是：

<meta name="參數" content="具體的描述">。n

其中name屬性共有以下幾種參數。(A-C為常用屬性)

A. keywords(關鍵字)

說明：用於告訴搜索引擎，你網頁的關鍵字。舉例：

<meta name="keywords" content="Lxxyx,博客，文科生，前端">n

B. description(網站內容的描述)

說明：用於告訴搜索引擎，你網站的主要內容。舉例：

<meta name="description" content="文科生，熱愛前端與編程。目前大二，這是我的前端博客">n

C. viewport(移動端的窗口)

說明：這個概念較為複雜，具體的會在下篇博文中講述。這個屬性常用於設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用範例）：

<meta name="viewport" content="width_=device-width, initial-scale=1">n

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

<meta name="robots" content="none">n

具體參數如下：

1.none : 搜索引擎將忽略此網頁，等價於noindex，nofollow。

2.noindex : 搜索引擎不索引此網頁。

3.nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。

4.all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價於index，follow。

5.index : 搜索引擎索引此網頁。

6.follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。

E. author(作者)

說明：用於標註網頁作者舉例：

<meta name="author" content="Lxxyx,841380530@qq.com">n

F. generator(網頁製作軟體)

說明：用於標明網頁是什麼軟體做的舉例: (不知道能不能這樣寫)：

<meta name="generator" content="Sublime Text3">n

G. copyright(版權)

說明：用於標註版權信息舉例：

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：如果頁面不是經常更新，為了減輕搜索引擎爬蟲對伺服器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：

<meta name="revisit-after" content="7 days" >n

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是為雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：

<meta name="renderer" content="webkit"> //默認webkit內核n<meta name="renderer" content="ie-comp"> //默認IE兼容模式n<meta name="renderer" content="ie-stand"> //默認IE標準模式n

2. http-equiv屬性

介紹之前，先說個小插曲。看文檔和博客關於http-equiv的介紹時，有這麼一句。

http-equiv顧名思義，相當於http的文件頭作用。

一開始看到這句話的時候，我是迷糊的。因為我看各類技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent"，意思是相等，相當於。然後我腦子裡出現了大大的迷惑：「HTTP相等？」

後來還準備去Segmentfault提問來著。結果在寫問題的時候，突然反應出equivalent還有相當於的意思。意思就是相當於http的作用。至於文件頭是哪兒出來的，估計是從其作用來分析的。我認為顧名思義並不能得出"相當於http的文件頭作用"這個論斷。

這個我所認為的http-equiv意思的簡介。

相當於HTTP的作用，比如說定義些HTTP參數啥的。

meta標籤中http-equiv屬性語法格式是：

<meta http-equiv="參數" content="具體的描述">n

其中http-equiv屬性主要有以下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用於設定網頁字符集，便於瀏覽器解析與渲染頁面舉例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦nn<meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8n

B. X-UA-Compatible(瀏覽器採取何種版本渲染當前頁面)

說明：用於告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式，在各大框架中這個設置也很常見。）舉例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面n

C. cache-control(指定請求和響應遵循的緩存機制)用法1.

說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。這一段內容我在網上找了很久，但都沒有找到滿意的。最後終於在Google Developers中發現了我想要的答案。

舉例:

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

共有以下幾種用法：

no-cache: 先發送請求，與伺服器確認該資源是否被更改，如果未被更改，則使用緩存。
no-store: 不允許緩存，每次都要去伺服器上，下載完整的響應。（安全措施）
public : 緩存所有響應，但並非必須。因為max-age也可以做到相同效果
private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去伺服器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

參考鏈接：HTTP緩存

用法2.(禁止百度自動轉碼)

說明：用于禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，但是轉碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉碼了。舉例：

<meta http-equiv="Cache-Control" content="no-siteapp" />n

D. expires(網頁到期時間)

說明:用於設定網頁的到期時間，過期後網頁必須到伺服器上重新傳輸。舉例：

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />n

E. refresh(自動刷新並指向某頁面)

說明：網頁將在設定的時間內，自動刷新並調向設定的網址。舉例:

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒後跳轉向我的博客n

F. Set-Cookie(cookie設定)

說明：如果網頁過期。那麼這個網頁存在本地的cookies也會被自動刪除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式nn<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體範例n

最後

暫時總結的就這麼多了，meta標籤的自定義屬性實在太多了。所以只去找了常用的一些，還有像Window-target這樣已經基本被廢棄的屬性，我也沒有添加。

一開始以為一兩個小時就能學習完畢，結果沒想到竟然花了五六個小時，各處查資料，推敲文字。敲擊文字的時候，也感覺自己學習了非常多。比如基本的SEO，HTTP協議的再次理解等。

viewport

經常寫：

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

content參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)

iPhone 6 和 iPhone 6+ ：

<meta name="viewport" content="width_=375"> <meta name="viewport" content="width_=414">

iOS設備

添加到主屏後的標題
<meta name="apple-mobile-web-app-title" content="標題">
是否啟用webAPP進入全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
狀態欄的背景顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content參數

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。如果設置為 default 或 black ,網頁內容從狀態欄底部開始。如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />

iOS圖標

link標籤，rel 參數： apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。

iPhone 和 iPod touch，默認 57×57px
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
iPad，72×72px
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
Retina iPhone 114×114px
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
Retina iPad，144×144px
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
iOS 圖標大小在iPhone 6+上是180×180，iPhone 6 是120×120
適配iPhone 6+ <link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

iOS 啟動畫面

Apple的文檔鏈接

iPad啟動畫面不包括狀態欄區域

iPad豎屏 768x1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
iPad 豎屏 1536×2008（Retina）
iPad 橫屏 1024×748（標準解析度）
iPad 橫屏 2048×1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的

iPhone/iPod Touch 豎屏 320×480 (標準解析度)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
iPhone/iPod Touch 豎屏 640×960 (Retina)
iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina)
iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 。
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標籤，用來控制選項卡顏色。

<meta name="theme-color" content="#db5945">

Win 8

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

RSS

添加RSS訂閱

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

<!DOCTYPE html> n<html lang="zh-cmn-Hans"> n<head>n n <meta charset=utf-8>n n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>n n <meta name="description" content="不超過150個字元"/>n n <meta name="keywords" content=""/>n n <meta name="author" content="name, email@gmail.com"/>n n <meta name="robots" content="index,follow"/>n n <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">n nn n <meta name="apple-mobile-web-app-title" content="標題">n n <meta name="apple-mobile-web-app-capable" content="yes"/>n nn <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">n n <meta name="apple-mobile-web-app-status-bar-style" content="black"/>n n <meta name="format-detection" content="telphone=no, email=no"/>n n n <meta name="renderer" content="webkit">n n <meta http-equiv="X-UA-Compatible" content="IE=edge">n n <meta name="HandheldFriendly" content="true">n n <meta name="MobileOptimized" content="320">n n <meta name="screen-orientation" content="portrait">n n <meta name="x5-orientation" content="portrait">n n <meta name="full-screen" content="yes">n n <meta name="x5-fullscreen" content="true">n n <meta name="browsermode" content="application">n n <meta name="x5-page-mode" content="app">n n <meta name="msapplication-tap-highlight" content="no">n n <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>n n <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>n n <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>n n nn n <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>n n <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>n n <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>n n <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>n nn <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>n n <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>n n <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>n n nn n <meta name="msapplication-TileColor" content="#000"/>n n <meta name="msapplication-TileImage" content="icon.png"/>n nn <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>n n <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>n nn <title>標題</title>n</head>n