以下介紹下常用的head頭部結構，以及對各個標籤、元素的意義以及使用場景一一介紹（本篇以一絲大神的文章為基礎，進行擴展總結）。
padding.me的head頭結構
https://plus.google.com/ u/1/105241873904238310190/?rel=author"> http://padding.me/humans.txt" />
http://feeds.feedburner.com/paddingme" />
DOCTYPE
DOCTYPE(Document Type)，該聲明位於文件中最前面的位置，處於html標籤之前，此標籤告知瀏覽器文件使用哪種HTML或XHTML規範。
DTD(Document Type Definition)聲明以開始，不區分大小寫，前面沒有任何內容，如果有其他內容(空格除外)會使瀏覽器在IE下開啟怪異模式(quirks mode)渲染網頁。公共DTD，名稱格式為“註冊//組織//類型 標籤//語言”,“註冊”指示組織是否由國際標準化組織(ISO)註冊， 表示是，-表示不是。 「組織」即組織名稱，如：W3C；「類型」一般是DTD，「標籤」是指定公開文字描述，即對所引用的公開文本的唯一描述性名稱，後面可附帶版本號。最後「語言」是DTD語言的ISO 639語言標識符，如：EN表示英文，ZH表示中文。 XHTML 1.0可宣告三種DTD類型。分別表示嚴格版本，過渡版本，以及基於框架的HTML文件。
•
HTML 4.01 strict
ttp://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/ strict.dtd">
•
HTML 4.01 Transitional
/www.w3.org/TR/html4/loose.dtd">
•
HTML 4.01 Frameset
ttp://www.w3.org/TR/html4/frameset.dtd">">
•
而最新HTML5 推出更簡潔的書寫，它向前向後相容，推薦使用。
•對文件進行有效性驗證。
它告訴使用者代理程式和校驗器這個文件是依照什麼DTD寫的。這個動作是被動的，每次頁面載入時，瀏覽器並不會下載DTD並檢查合法性，只有當手動校驗頁面時才啟用。
•決定瀏覽器的呈現模式
對於實際操作，通知瀏覽器讀取文件時用哪一種解析演算法。如果沒有寫，則瀏覽器則會根據自身的規則對程式碼進行解析，可能會嚴重影響html排版佈局。瀏覽器有三種方式解析HTML文件。
◦怪異模式
◦部分怪異（近乎標準）模式
關於IE瀏覽器的文件模式，瀏覽器模式，嚴格模式，怪異模式，DOCTYPE標籤，可詳細閱讀模式？標準！ ，以及盒子模型。
聲明文檔使用的字符編碼，
這兩個是等效的，具體可移步閱讀：http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content- type
，所以建議使用較短的，易於記憶。lang屬性
具體相關請移步http://zhi.hu/XyIa 優先使用 IE 最新版本和 Chrome
簡體中文
繁體中文
很少情況才需要加上地區代碼，通常是為了強調不同地區漢語使用差異，例如：
程式碼如下:複製代碼
菠蘿和鳳梨其實是同一種水果。只是大陸和台灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱為黃梨。
複製程式碼程式碼如下:
360 使用Google Chrome Frame
360瀏覽器就會在讀取到這個標籤後，立即切換對應的極速核。
另外為了保險起見再加入
這樣寫可以達到的效果是如果安裝了Google Chrome Frame，則使用GCF來渲染頁面，如果沒有安裝GCF，則使用最高版本的IE核心進行渲染。
相關連結：瀏覽器核心控制Meta標籤說明文件
百度禁止轉碼
透過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在head內添加
相關連結：SiteApp轉碼聲明
SEO最佳化部分
•
頁標題
•
網頁搜尋引擎索引方式是一組使用英文逗號“,”分割的值，通常有以下幾種取值：none，noindex，nofollow，all，index和follow。
通常會寫 •user-scalable 是否允許使用者縮放(yes/no)
相關連結：非響應式設計的viewport
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 初始縮放比例
•
ios 設備複製程式碼程式碼如下:
加入主畫面後的標題（iOS 6 新增）
是否啟用 WebApp 全螢幕模式
設定狀態列的背景顏色
只有在 "apple-mobile-web-app-capable" content="yes" 時生效
content 參數：
•default 預設值。
•black 狀態列背景是黑色。
•black-translucent 狀態列背景是黑色半透明。
如果設定為 default 或 black ,網頁內容從狀態列底部開始。
如果設定為 black-translucent ,網頁內容充滿整個螢幕，頂部會被狀態列遮擋。
禁止數位識自動別為電話號碼
iOS 圖示
rel 參數：
apple-touch-icon 圖片自動處理成圓角和高光等效果。
apple-touch-icon-precomposed 禁止系統自動加入效果，直接顯示設計原圖。
iPhone 和iTouch，預設57x57 像素，必須有
iPad，72x72 像素，可以沒有，但推薦有
Retina iPhone 和Retina iTouch，114x114 像素，可以沒有，但推薦有
Retina iPad，144x144 像素，可以沒有，但推薦有
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（標準解析度）
iPad 垂直螢幕 1536x2008（Retina）
iPad 橫屏 1024x748（標準解析度）
iPad 橫屏 2048x1496（Retina）
iPhone 和 iPod touch 的啟動畫面是包含狀態列區域的。
iPhone/iPod Touch 垂直螢幕320x480 (標準解析度)
iPhone/iPod Touch 垂直螢幕640x960 (Retina)
iPhone 5/iPod Touch 5 垂直螢幕640x1136 (Retina)
新增智慧型App 廣告條Smart App Banner（iOS 6 Safari）
Windows 8
Windows 8 磁貼顏色
Windows 8 磁貼圖示
rss訂閱
favicon icon
比較詳細的favicon介紹可參考https://github.com/audreyr/favicon-cheat-sheet
行動端的meta
來自toobug的分享。
更多的meta 標籤參考
•COMPLETE LIST OF HTML META TAGS
•18 Meta Tags Every Webpage Should Have in 2013
參考文章：
參考文章：
.com/yisibl/blog/issues/1
•https://gist.github.com/paddingme/6182708733917ae36331
•http://amazeui.org/css/
