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 项目的门槛非常低，有充足的空间用于试验。您可以将这个项目作为您的试验项目，探索它带来的好处，如果其中有任何缺失或您不需要的东西，尽管进行相应修改。
