HTML Template 專案快速開始

2013/9/8更新
現在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 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 http-equiv="Pragma" content="no_cache">
		    <meta name="format-detection" content="telephone=no"/>
		-->
                <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 content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
	<!--
            <meta http-equiv="Pragma" content="no_cache">
            <meta name="format-detection" content="telephone=no"/>
	-->	
	<!--[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。
第3行:確保IE的瀏覽器模式、文件模式都是使用最新版本,因為IE8以上有莫名其妙的相容性檢視功能,會讓使用者雖然裝了IE10卻會以IE7,8,9版的文件模式來瀏覽,跑出奇異的bug(想像一下這樣的狀況發生在客戶上會多恐怖XD)。chrome=1則是如果有安裝Google Chrome 內嵌框架的話,可以確保使用者以這樣的模式瀏覽。
經過一些專案執行,發現有些時候即使加入這句話,仍會發生IE瀏覽器相容性的問題出現,解決狀況各有不同,像是有人建議這句話盡量往上置放,之前不要出現其他js或css的使用,這也確實解決了一些專案的問題,而其實應該要養成meta區域應該儘早宣告出來的習慣。
另外,也有遇過漸進式的宣告會讓這句話失敗,找不出明確原因,只好捨棄漸進式的方法。
第5行:不允許cache可以幫助測試,上線前可以拿掉。
第6行:format-detection可以把頁面上的手機號碼顯示為撥號的超鏈接,iphone預設是telephone=yes,如果不希望有這個效果則telephone=no。

第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主要的部份介紹完畢,可以依實際狀況去做增加或刪減,
像是ModernizrBootstrap等等,如果有需求在引用,有提供客制化的輸出版本的功能要記得使用,減輕K數以免造成網站效能跟流量的負擔。

Template整理到最後,發覺大部分都要處理IE而存在,真是萬惡的IE!

github

我是使用compass跟scss編寫css,所以github裡面有sass資料夾跟config.rb檔,這話題可以留到對scss更有心得的時候在分享,使用上沒用習慣用scss的話可以先刪除。

這篇介紹,希望對大家有幫助,有任何錯誤或更好的方法也歡迎留言。

5 則迴響於《HTML Template 專案快速開始

  1. 這用法在串facebook時與IE更新版本9.0.13時有不可解的問題發生,後來拿掉才正常,看來使用上要針對IE9測試多種版本比較保險~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>