HTML 模块化：使用 HTML5 Boilerplate 模板
开始一个 Web 项目，HTML 的书写总是重中之重，一个好的 HTML 能从根源上规避大量潜
在问题，所以 Web App 应该全部应用一个标准化的高质量 HTML 模板，而不是将所有页面交
由开发人员自由发挥。
这里推荐使用 HTML5 Boilerplate 项目作为 App 的默认模板以及文件路径规范，无论是
网站或者富 UI 的 App，都可以采用这个模板作为起步。
可以使用
git clone git://
或者直接下载 HTML5 Boilerplate 项目代码。HTML5 Boilerplate 的文件结构如下：
从上往下看：
css 用于存放 css 文件，并内置了 作为默认 CSS 重置手段（其实
不能算是 CSS reset）。
doc 存放项目文档
img 存放项目图片
js 存放 javascript 文件，其中第三方类库推荐放在 vendor 下
.htaccess 内置了很多对于静态文件在 Apache 下的优化策略，如果 Web 服务器不
是 Apache 则可以参考其他 Web 服务器配置优化。
默认的 404 页面，
项目模板
相对于面向机器人的 ， 更像是小幽默，这在里
可以写关于项目/团队的介绍，或者放置一些彩蛋给那些喜欢对你的应用刨根问底的用
户们。
用于告诉搜索引擎蜘蛛爬行规则
用于配置 Flash 的跨域策略
等小图标。
如果是一个主要面向移动设备，则主要将 jQuery 换成了 ，以适应移动设备。
HTML5 Boilerplate 的模板核心部分不过 30 行，但是每一行都可谓千锤百炼，可以用
最小的消耗解决一些前端的顽固问题：
使用条件注释区分 IE 浏览器
1. <!DOCTYPE html>
2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![en
dif]-->
3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4. <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
之所以要这样写：
1. 可以使用 class 作为全局条件区分低版本的 IE 浏览器并进行调整，这显然要优于使
用 CSS Hack。
2. 可以避免 IE6 条件注释引起的高版本 IE 文件阻塞问题，原文的解决方法是在前面加
一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了。
3. 仍然可以通过 HTML 验证。
4. 与 Modernizr 等特征检测类库使用相同的 class，更具备通用性。
no-js 标签是需要与 Modernizr 等类库配合使用的，如果你不想在项目中引入
Modernizr，需要在 Head 部分加入一行使 no-js 标签变为 js，代码来自 Avoiding the FOUC：
1. <script>(function(H){=(/\bno-js\b/,'js')
})()</script>
通过上面的条件注释，就可以在 CSS 中针对不同情况分别处理：
1. .lt-ie7 {} /* IE6等版本时 */
2. .no-js {} /* JavaScript没有启用时 */
meta 标签的书写顺序
为了让浏览器识别正确的编码，meta charset 标签应该先于 title 标签出现。
meta X-UA-Compatible 标签可以指定 IE8 以上版本浏览器以最高级模式渲染文档，同
时如果已经安装 Google Chrome Frame 则直接使用 Chrome Frame 渲染。而指定渲染模式的
meta X-UA-Compatible 标签同样需要优先出现 ：
1. <meta charset="utf-8">
2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3. <title></title>
设置移动设备显示窗口宽度
1. <meta name="viewport" content="width=device-width">
这是移动设备专属的标签，具体设置需要根据项目实际情况调整。
使用 Modernizr 做浏览器差异检测
Modernizr 常做前端的应该都不陌生。引入 Modernizr 后，html 标签的 no-js 将会被自
动替换为 js，同时 Modernizr 会向 html 标签添加代表版本检测结果的 class。
对于低版本浏览器的向上兼容需要根据项目实际需求处理，Modernizr 也非常周到的给
出的绝大多数 HTML5 功能的兼容方法。
脚本
一个完整的 Boilerplate 里还包含一个 build 目录，里面 config 目录里有针对 ant 的
配置文件， 自然是默认属性定义，用户可以修改
来定义自己的属性；tools 目录下有各种编译工具。
编译时，libs 下的文件不会再改变，但 mylibs 中文件以及另两个都会一起压缩到一个
js 文件中， 也会被压缩，同时 images 目录下会针对 jpg 和 png 优化。js 中
函数将被去除，html 文件也可以压缩，默认使用 htmlbuildkit， 还可以用
htmlclean 或 htmlcompress 来压缩。
再看看 里定义哪些选项
= true – 脚本文件将被压缩为一个文件
= true – 未优化的文件将被删除
= nonexistentfile – 发布时排除的文件后缀
后面是文件目录的定义，以及编译工具的定义。
结语
进入 HTML5 Boilerplate 项目的门槛非常低，有充足的空间用于试验。您可以将这个
项目作为您的试验项目，探索它带来的好处，如果其中有任何缺失或您不需要的东西，尽管
进行相应修改。
HTML模块化：使用HTML5 Boilerplate模板
脚本
结语
