先來看下常用的標簽列表，後文會一一介紹：
<!DOCTYPE html> <!– 使用 HTML5 doctype，不區分大小寫 –>
<html lang=”zh-cmn-Hans”> <!– 更加標准的 lang 屬性寫法 http://zhi.hu/XyIa –>
<head>
<meta charset=’utf-8′> <!– 聲明文檔使用的字符編碼 –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ /> <!– 優先使用 IE 最新版本和 Chrome –>
<meta name=”description” content=”不超過150個字符” /> <!– 頁面描述 –>
<meta name=”keywords” content=””/> <!– 頁面關鍵詞 –>
<meta name=”author” content=”name, [email protected]” /> <!– 網頁作者 –>
<meta name=”robots” content=”index,follow” /> <!– 搜索引擎抓取 –>
<!– 爲移動設備添加 viewport –>
<meta name =”viewport” content =”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!– `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz –>
<!– iOS 設備 begin –>
<meta name=”apple-mobile-web-app-title” content=”標題”> <!– 添加到主屏後的標題（iOS 6 新增） –>
<meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– 是否啓用 WebApp 全屏模式 –>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” /> <!– 設置狀態欄的背景顔色，只有在 `”apple-mobile-web-app-capable” content=”yes”` 時生效 –>
<meta name=”format-detection” content=”telephone=no” /> <!– 禁止數字識自動別爲電話號碼 –>
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> <!– 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） –>
<!– iOS 圖標 begin –>
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-57×57-precomposed.png” /> <!– iPhone 和 iTouch，默認 57×57 像素，必須有 –>
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png” /> <!– Retina iPhone 和 Retina iTouch，114×114 像素，可以沒有，但推薦有 –>
<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”/apple-touch-icon-144×144-precomposed.png” /> <!– Retina iPad，144×144 像素，可以沒有，但推薦有 –>
<!– iOS 圖標 end –>
<!– iOS 啓動畫面 begin –>
<link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”/splash-screen-768×1004.png” /> <!– iPad 豎屏 768 x 1004（標准分辨率） –>
<link rel=”apple-touch-startup-image” sizes=”1536×2008″ href=”/splash-screen-1536×2008.png” /> <!– iPad 豎屏 1536×2008（Retina） –>
<link rel=”apple-touch-startup-image” sizes=”1024×748″ href=”/Default-Portrait-1024×748.png” /> <!– iPad 橫屏 1024×748（標准分辨率） –>
<link rel=”apple-touch-startup-image” sizes=”2048×1496″ href=”/splash-screen-2048×1496.png” /> <!– iPad 橫屏 2048×1496（Retina） –>
<link rel=”apple-touch-startup-image” href=”/splash-screen-320×480.png” /> <!– iPhone/iPod Touch 豎屏 320×480 (標准分辨率) –>
<link rel=”apple-touch-startup-image” sizes=”640×960″ href=”/splash-screen-640×960.png” /> <!– iPhone/iPod Touch 豎屏 640×960 (Retina) –>
<link rel=”apple-touch-startup-image” sizes=”640×1136″ href=”/splash-screen-640×1136.png” /> <!– iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina) –>
<!– iOS 啓動畫面 end –>
<!– iOS 設備 end –>
<meta name=”msapplication-TileColor” content=”#000″/> <!– Windows 8 磁貼顔色 –>
<meta name=”msapplication-TileImage” content=”icon.png”/> <!– Windows 8 磁貼圖標 –>
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”/rss.xml” /> <!– 添加 RSS 訂閱 –>
<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico” /> <!– 添加 favicon icon –>
<title>標題</title>
</head>
基本標簽
使用 HTML5 doctype，不區分大小寫。
<!DOCTYPE html> <!– 使用 HTML5 doctype，不區分大小寫 –>
聲明文檔使用的字符編碼
<meta charset=’utf-8′> <!– 聲明文檔使用的字符編碼 –>
更加標准的 lang 屬性寫法 http://zhi.hu/XyIa
- 簡體中文
- <html lang=”zh-cmn-Hans”> <!– 更加標准的 lang 屬性寫法 http://zhi.hu/XyIa –>
- 繁體中文
- <html lang=”zh-cmn-Hant”> <!– 更加標准的 lang 屬性寫法 http://zhi.hu/XyIa –>
很少情況才需要加地區代碼，通常是爲了強調不同地區漢語使用差異，例如：
<p lang=”zh-cmn-Hans”>
<strong lang=”zh-cmn-Hans-CN”>菠蘿</strong>和<strong lang=”zh-cmn-Hant-TW”>鳳梨</strong>其實是同一種水果。只是大陸和台灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之爲<strong lang=”zh-cmn-Hans-SG”>黃梨</strong>。
</p>
優先使用 IE 最新版本和 Chrome
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ /> <!– 優先使用 IE 最新版本和 Chrome –>
SEO 優化
頁面描述
每個網頁都應有一個不超過 150 個字符且能准確反映網頁內容的描述標簽。文檔
<meta name=”description” content=”不超過150個字符” /> <!– 頁面描述 –>
頁面關鍵詞
<meta name=”keywords” content=””/> <!– 頁面關鍵詞 –>
定義頁面標題
<title>標題</title>
定義網頁作者
<meta name=”author” content=”name, [email protected]” /> <!– 網頁作者 –>
定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔
<meta name=”robots” content=”index,follow” /> <!– 搜索引擎抓取 –>
可選標簽
爲移動設備添加 viewport
<meta name =”viewport” content =”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!– `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz –>
content 參數：
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：<meta name=”viewport” content=”width=device-width, initial-scale=1, minimal-ui”>
iOS 設備
添加到主屏後的標題（iOS 6 新增）
<meta name=”apple-mobile-web-app-title” content=”標題”> <!– 添加到主屏後的標題（iOS 6 新增） –>
是否啓用 WebApp 全屏模式
<meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– 是否啓用 WebApp 全屏模式 –>
設置狀態欄的背景顔色
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” /> <!– 設置狀態欄的背景顔色，只有在 `”apple-mobile-web-app-capable” content=”yes”` 時生效 –>
content 參數：
- default 默認值。
- black 狀態欄背景是黑色。
- black-translucent 狀態欄背景是黑色半透明。
如果設置爲 default 或 black ,網頁內容從狀態欄底部開始。
如果設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。
禁止數字識自動別爲電話號碼
<meta name=”format-detection” content=”telephone=no” /> <!– 禁止數字識自動別爲電話號碼 –>
iOS 圖標
rel 參數：
apple-touch-icon 圖片自動處理成圓角和高光等效果。
apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。
iPhone 和 iTouch，默認 57×57 像素，必須有
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-57×57-precomposed.png” /> <!– iPhone 和 iTouch，默認 57×57 像素，必須有 –>
iPad，72×72 像素，可以沒有，但推薦有
<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”/apple-touch-icon-72×72-precomposed.png” /> <!– iPad，72×72 像素，可以沒有，但推薦有 –>
Retina iPhone 和 Retina iTouch，114×114 像素，可以沒有，但推薦有
<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”/apple-touch-icon-114×114-precomposed.png” /> <!– Retina iPhone 和 Retina iTouch，114×114 像素，可以沒有，但推薦有 –>
Retina iPad，144×144 像素，可以沒有，但推薦有
<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”/apple-touch-icon-144×144-precomposed.png” /> <!– Retina iPad，144×144 像素，可以沒有，但推薦有 –>
iOS 啓動畫面
官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html
參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
iPad 的啓動畫面是不包括狀態欄區域的。
iPad 豎屏 768 x 1004（標准分辨率）
<link rel=”apple-touch-startup-image” sizes=”768×1004″ href=”/splash-screen-768×1004.png” /> <!– iPad 豎屏 768 x 1004（標准分辨率） –>
iPad 豎屏 1536×2008（Retina）
<link rel=”apple-touch-startup-image” sizes=”1536×2008″ href=”/splash-screen-1536×2008.png” /> <!– iPad 豎屏 1536×2008（Retina） –>
iPad 橫屏 1024×748（標准分辨率）
<link rel=”apple-touch-startup-image” sizes=”1024×748″ href=”/Default-Portrait-1024×748.png” /> <!– iPad 橫屏 1024×748（標准分辨率） –>
iPad 橫屏 2048×1496（Retina）
<link rel=”apple-touch-startup-image” sizes=”2048×1496″ href=”/splash-screen-2048×1496.png” /> <!– iPad 橫屏 2048×1496（Retina） –>
iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的。
iPhone/iPod Touch 豎屏 320×480 (標准分辨率)
<link rel=”apple-touch-startup-image” href=”/splash-screen-320×480.png” /> <!– iPhone/iPod Touch 豎屏 320×480 (標准分辨率) –>
iPhone/iPod Touch 豎屏 640×960 (Retina)
<link rel=”apple-touch-startup-image” sizes=”640×960″ href=”/splash-screen-640×960.png” /> <!– iPhone/iPod Touch 豎屏 640×960 (Retina) –>
iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina)
<link rel=”apple-touch-startup-image” sizes=”640×1136″ href=”/splash-screen-640×1136.png” /> <!– iPhone 5/iPod Touch 5 豎屏 640×1136 (Retina) –>
添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> <!– 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） –>
Android
Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽，用來控制選項卡顔色。
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
<meta name=”theme-color” content=”#db5945″>
Windows 8
Windows 8 磁貼顔色
<meta name=”msapplication-TileColor” content=”#000″/> <!– Windows 8 磁貼顔色 –>
Windows 8 磁貼圖標
<meta name=”msapplication-TileImage” content=”icon.png”/> <!– Windows 8 磁貼圖標 –>
其他
添加 RSS 訂閱
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”/rss.xml” /> <!– 添加 RSS 訂閱 –>
添加 favicon icon
<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico” /> <!– 添加 favicon icon –>
禁止 Chrome 浏覽器中自動提示翻譯