HTML5 Boilerplate 是一個由 Paul Irish（Google Chrome 開發人員、jQuery 項目成員、Modernizr 作者、yayQuery 播客主持人）主導的“前端開發模版”。HTML5 Boilerplate 是一套具有非常多先進特性的框架，可以讓開發者快速制作出面向未來的網站。
開始一個Web項目，HTML的書寫總是重中之重，一個好的HTML能從根源上規避大量潛在問題，所以Web App應該全部應用一個標准化的高質量HTML模板，而不是將所有頁面交由開發人員自由發揮。
這里推薦使用HTML5 Boilerplate項目作為App的默認模板以及文件路徑規范，無論是網站或者富UI的App，都可以采用這個模板作為起步。
可以使用
git clone git://github.com/h5bp/html5-boilerplate.git
或者直接下載HTML5 Boilerplate項目代碼。HTML5 Boilerplate的文件結構如下：
從上往下看：
css用於存放css文件，並內置了Normalize.css作為默認CSS重置手段（其實Normalize.css不能算是CSS reset）。doc存放項目文檔img存放項目圖片js存放javascript文件，其中第三方類庫推薦放在vendor下.htaccess內置了很多對於靜態文件在Apache下的優化策略，如果Web服務器不是Apache則可以參考其他Web服務器配置優化。404.html默認的404頁面，index.html項目模板humans.txt相對於面向機器人的robots.txt，humans.txt更像是小幽默，這在里可以寫關於項目/團隊的介紹，或者放置一些彩蛋給那些喜歡對你的應用刨根問底的用戶們。robots.txt用於告訴搜索引擎蜘蛛爬行規則crossdomain.xml用於配置Flash的跨域策略favicon.icoapple-touch-icon.png等小圖標。
如果是一個主要面向移動設備，則主要將jQuery換成了Zepto.js，以適應移動設備。
HTML5 Boilerplate的模板核心部分不過30行，但是每一行都可謂千錘百煉，可以用最小的消耗解決一些前端的頑固問題：
使用條件注釋區分IE瀏覽器
- <!DOCTYPE html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
之所以要這樣寫：
- 可以使用class作為全局條件區分低版本的IE瀏覽器並進行調整，這顯然要優於使用CSS Hack。
- 可以避免IE6條件注釋引起的高版本IE文件阻塞問題，原文的解決方法是在前面加一個空白的條件注釋，但是這里顯然將原本無用空白的條件注釋變得有意義了。
- 仍然可以通過HTML驗證。
- 與Modernizr等特征檢測類庫使用相同的class，更具備通用性。
no-js標簽是需要與Modernizr等類庫配合使用的，如果你不想在項目中引入Modernizr，需要在Head部分加入一行使no-js標簽變為js，代碼來自Avoiding the FOUC：
- <script>(function(H){HH.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
通過上面的條件注釋，就可以在CSS中針對不同情況分別處理：
- .lt-ie7 {} /* IE6等版本時 */
- .no-js {} /* JavaScript沒有啟用時 */
meta標簽的書寫順序
為了讓瀏覽器識別正確的編碼，meta charset標簽應該先於title標簽出現。
meta X-UA-Compatible標簽可以指定IE8以上版本瀏覽器以最高級模式渲染文檔，同時如果已經安裝Google Chrome Frame則直接使用Chrome Frame渲染。而指定渲染模式的meta X-UA-Compatible標簽同樣需要優先出現 ：
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title></title>
設置移動設備顯示窗口寬度
- <meta name="viewport" content="width=device-width">
這是移動設備專屬的標簽，具體設置需要根據項目實際情況調整。
使用Modernizr做瀏覽器差異檢測
Modernizr常做前端的應該都不陌生。引入Modernizr后，html標簽的no-js將會被自動替換為js，同時Modernizr會向html標簽添加代表版本檢測結果的class。
對於低版本瀏覽器的向上兼容需要根據項目實際需求處理，Modernizr也非常周到的給出的絕大多數HTML5功能的兼容方法。
腳本
一個完整的Boilerplate里還包含一個build目錄，里面config目錄里有針對ant的配置文 件，default.properties自然是默認屬性定義，用戶可以修改project.properties來定義自己的屬性；tools目錄下有 各種編譯工具。
編譯時，libs下的文件不會再改變，但mylibs中文件以及另兩個都會一起壓縮到一個js文件中，style.css也會被壓縮，同時 images目錄下會針對jpg和png優化。js中consloe.log函數將被去除，html文件也可以壓縮，默認使用htmlbuildkit， 還可以用htmlclean或htmlcompress來壓縮。
再看看default.properties里定義哪些選項
- build.concat.scripts = true – 腳本文件將被壓縮為一個文件
- build.delete.unoptimized = true – 未優化的文件將被刪除
- file.exclude = nonexistentfile – 發布時排除的文件后綴
后面是文件目錄的定義，以及編譯工具的定義。
結語
進入 HTML5 Boilerplate 項目的門檻非常低，有充足的空間用於試驗。您可以將這個項目作為您的試驗項目，探索它帶來的好處，如果其中有任何缺失或您不需要的東西，盡管進行相應修改。