現在HTML模板不少，比較有名的有HTML5 ★ BOILERPLATE，更有模板生成器Initializr，而這篇文章要分享自己整理的HTML Template，將一些必備的東西整理好，方便新專案能夠快速的開始，就不用在要用到時東找西找了。
先來看看html:
<!DOCTYPE html>
<!--[if IE 6]><html class="ie6 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
<!--[if IE 8]><html class="ie8 lte9 lte8" lang="zh-tw"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="zh-tw"><![endif]-->
<!--[if IE 7]><html class="ie7 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]><!--><html lang="zh-tw"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta content-language="zh-TW">
<!--
<meta http-equiv="Pragma" content="no_cache">
<meta name="format-detection" content="telephone=no"/>
-->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<!--[if lt IE 7 ]><meta content='0; url=ie6.html' http-equiv='refresh' /><![endif]-->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable:no" name="viewport">
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/hack.css" rel="stylesheet" />
<link href="css/responsive.css" rel="stylesheet" />
<script src="js/ga_public.js"></script>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.js"></script>
<script src="js/libs/IE9.js" ></script>
<script src="js/libs/PIE.js" ></script>
<![endif]-->
<title>This is Template</title>
</head>
<body>
<!-- content -->
<h1>This is Templete</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
乍看之下有點雜，仔細看其實都是一些非常基礎的html，讓我們從頭開始瞧瞧看他們的作用:
<!DOCTYPE html> ...
HTML5告知瀏覽器文檔所使用的HTML規範的方式，可能會有疑慮說舊IE會有問題嗎?觀察FaceBook跟google等等的網頁結構，也是如此宣告，有方式讓舊IE也可以正常運作，所以就可以大膽地給它用去，省去以前落落長的方式。
<!--[if IE 6]><html class="ie6 lte9 lte8 lte7" lang="zh-tw"><![endif]--> <!--[if IE 8]><html class="ie8 lte9 lte8" lang="zh-tw"><![endif]--> <!--[if IE 9]><html class="ie9 lte9" lang="zh-tw"><![endif]--> <!--[if IE 7]><html class="ie7 lte9 lte8 lte7" lang="zh-tw"><![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]><!--><html lang="zh-tw"><!--<![endif]-->
漸進增強版的HTML,會根據IE的版本去替html標籤增加不同的class名稱，讓css hack方式有些不同。通常我們習慣把hack都寫在一起，例如:
.test{
width:100px;
width:103px\9;
*width:105px;
_width:110px;
}
可以換成
.test{
width:100px;
}
.ie8 .test{
width:103px;
}
.ie7 .test{
width:105px;
}
.ie6 .test{
width:110px;
}
瀏覽器的Hack寫法很多，漸進增強版的HTML主要是針對IE，雖然會增加css的量，但可以把hack集中或許是不錯的管理方式。
<meta charset="utf-8" />
<meta content-language="zh-TW">
<!--
<meta http-equiv="Pragma" content="no_cache">
<meta name="format-detection" content="telephone=no"/>
-->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<!--[if lt IE 7 ]><meta content='0; url=ie6.html' http-equiv='refresh' /><![endif]-->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable:no" name="viewport">
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
接下來就是在head裡面meta的部分，meta是用來提供有關頁面訊息的說明，經常容易忽略它的存在性及重要性，裡面有一些需要了解的重點。
第1行:HTML5的簡化方式。
第2行:告訴搜尋引擎你網站採用的語言，有助SEO。
第4行:不允許cache可以幫助測試，上線前可以拿掉。
第5行:format-detection可以把頁面上的手機號碼顯示為撥號的超鏈接，iphone預設是telephone=yes，如果不希望有這個效果則telephone=no。
第7行:確保IE的瀏覽器模式、文件模式都是使用最新版本，因為IE8以上有莫名其妙的相容性檢視功能，會讓使用者雖然裝了IE10卻會以IE7,8,9版的文件模式來瀏覽，跑出奇異的bug(想像一下這樣的狀況發生在客戶上會多恐怖ＸＤ)。chrome=1則是如果有安裝Google Chrome 內嵌框架的話，可以確保使用者以這樣的模式瀏覽。
第8行:如果網站不去支援IE6，跳轉到指定頁面，告知使用者下載更新瀏覽器(必加！)。
第9行:行動裝置設定，viewport 參考文章，如果寫在css檔案裡，則變成:
@viewport{
width：device-width;
initial-scale：1.0;
maximum-scale：1.0;
user-scalable：no;
}
第10~13行:頁面相關訊息，寫的完整也有助SEO，分享在facebook也會有清楚的圖文。
最後就是載入一些樣式表跟js檔案了:
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/hack.css" rel="stylesheet" />
<link href="css/responsive.css" rel="stylesheet" />
<script src="js/ga_public.js"></script>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.js"></script>
<script src="js/libs/IE9.js" ></script>
<script src="js/libs/PIE.js" ></script>
<![endif]-->
第1行:css重置歸零，這邊我採用normalize.css，也可以採用HTML5 Reset。
第2~4行:依專案內容的css樣式檔，hack.css管理css hack，responsive.css 則是來處理行動裝置版的樣式。
第5行:Google Analytics的code，獨立在外面，方便修改。
第6~10:針對舊IE處理兼容性的處理，在前一篇文章處理CSS瀏覽器兼容性的js有介紹。
整個Temoplate主要的部份介紹完畢，可以依實際狀況去做增加或刪減，
像是Ｍodernizr跟Bootstrap等等，如果有需求在引用，有提供客制化的輸出版本的功能要記得使用，減輕Ｋ數以免造成網站效能跟流量的負擔。
Template整理到最後，發覺大部分都要處理IE而存在，真是萬惡的IE!
我是使用compass跟scss編寫css，所以github裡面有sass資料夾跟config.rb檔，這話題可以留到對scss更有心得的時候在分享，使用上沒用習慣用scss的話可以先刪除。
這篇介紹，希望對大家有幫助，有任何錯誤或更好的方法也歡迎留言。
好酷啊整理出來還有github，分享給創意部
對了你跟小綠上次分享會有文件可以看嗎，參考一下你們分享什麼~
這用法在串facebook時與IE更新版本9.0.13時有不可解的問題發生，後來拿掉才正常，看來使用上要針對IE9測試多種版本比較保險~
content=’IE=edge,chrome=1′
果然是萬惡的IE啊!!