移動前端不得不瞭解的html5 head 頭標籤
移動端的工作已經越來越成為前端工作的重要內容，除了平常的專案開發，HTML 頭部標籤功能，特別是meta標籤顯得非常重要。
DOCTYPE
DOCTYPE(Document Type)，該宣告位於文件中最前面的位置，處於 html 標籤之前，此標籤告知瀏覽器文件使用哪種
HTML 或者 XHTML 規範。
使用 HTML5 doctype，不區分大小寫。
- <!DOCTYPE html><!-- 使用 HTML5 doctype，不區分大小寫 -->
charset
宣告文件使用的字元編碼，
- <metacharset
html5 之前網頁中會這樣寫：
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
lang屬性
簡體中文
- <htmllang="zh-cmn-Hans"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
繁體中文
- <htmllang="zh-cmn-Hant"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
很少情況才需要加地區程式碼，通常是為了強調不同地區漢語使用差異，例如：
- <plang="zh-cmn-Hans">
- <stronglang="zh-cmn-Hans-CN">菠蘿</strong>和<stronglang="zh-cmn-Hant-TW">鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為<stronglang="zh-cmn-Hans-SG">黃梨</strong>。
- </p>
為什麼 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢，請移步閱讀: 頁頭部的宣告應該是用
lang=”zh” 還是 lang=”zh-cn”
優先使用 IE 最新版本和 Chrome
- <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
360 使用Google Chrome Frame
- <metaname="renderer"content="webkit">
360 瀏覽器就會在讀取到這個標籤後，立即切換對應的極速核。 另外為了保險起見再加入
- <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">
這樣寫可以達到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，如果沒有安裝 GCF，則使用最高版本的 IE 核心進行渲染。
百度禁止轉碼
通過百度手機開啟網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在 head 內新增
- <metahttp-equiv="Cache-Control"content="no-siteapp"/>
SEO 優化部分
-
頁面標題
<title>標籤(head 頭部必須)- <title>your title</title>
-
頁面關鍵詞 keywords
- <metaname="keywords"content="your keywords">
-
頁面描述內容 description
- <metaname="description"content="your description">
-
定義網頁作者 author
- <metaname="author"content="author,email address">
-
定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。
- <metaname="robots"content="index,follow">
為移動裝置新增 viewport
viewport 可以讓佈局在移動瀏覽器上顯示的更好。
通常會寫
- <metaname="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 中已經刪除），可以在頁面載入時最小化上下狀態列。這是一個布林值，可以直接這樣寫：
- <metaname="viewport"content="width=device-width, initial-scale=1, minimal-ui">
而如果你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
- <metaname="viewport"content="width=device-width,user-scalable=yes">
適配 iPhone 6 和 iPhone 6plus 則需要寫：
- <metaname="viewport"content="width=375">
- <metaname="viewport"content="width=414">
大部分 4.7~5 寸的安卓裝置的 viewport 寬設為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機器（比如說三星 Note）的 viewport 寬為 400，iPhone 6 plus 上是 414px。
ios 裝置
新增到主屏後的標題（iOS 6 新增）
- <metaname="apple-mobile-web-app-title"content="標題"><!-- 新增到主屏後的標題（iOS 6 新增） -->
是否啟用 WebApp 全屏模式
- <metaname="apple-mobile-web-app-capable"content="yes"/><!-- 是否啟用 WebApp 全屏模式 -->
設定狀態列的背景顏色
- <metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/><!-- 設定狀態列的背景顏色，只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->
只有在 “apple-mobile-web-app-capable” content=”yes” 時生效
content 引數：
- default 預設值。
- black 狀態列背景是黑色。
- black-translucent 狀態列背景是黑色半透明。 如果設定為 default 或 black ,網頁內