HTML模块化：使⽤HTML5Boilerplate模板
HTML5 Boilerplate 是⼀个由 Paul Irish（Google Chrome 开发⼈员、jQuery 项⽬成员、Modernizr 作者、yayQuery 播客主持⼈）主导的“前端开发模版”。HTML5 Boilerplate 是⼀套具有⾮常多先进特性的框架，可以让开发者快速制作出⾯向未来的⽹站。
开始⼀个Web项⽬，HTML的书写总是重中之重，⼀个好的HTML能从根源上规避⼤量潜在问题，所以Web App应该全部应⽤⼀个标准化的⾼质量HTML模板，⽽不是将所有页⾯交由开发⼈员⾃由发挥。
这⾥推荐使⽤作为App的默认模板以及⽂件路径规范，⽆论是⽹站或者富UI的App，都可以采⽤这个模板作为起步。
可以使⽤
git clone git://github/h5bp/html5-boilerplate.git
或者直接下载HTML5 Boilerplate项⽬代码。HTML5 Boilerplate的⽂件结构如下：html frame
从上往下看：
css⽤于存放css⽂件，并内置了作为默认CSS重置⼿段（其实Normalize.css不能算是CSS reset）。
doc存放项⽬⽂档
img存放项⽬图⽚
js存放javascript⽂件，其中第三⽅类库推荐放在vendor下
.htaccess内置了很多对于静态⽂件在Apache下的优化策略，如果Web服务器不是Apache则可以参考。
404.html默认的404页⾯，
index.html项⽬模板
<相对于⾯向机器⼈的，更像是⼩幽默，这在⾥可以写关于项⽬/团队的介绍，或者放置⼀些彩蛋给那些喜欢对你的应⽤刨根问底的⽤户们。
<⽤于告诉搜索引擎蜘蛛爬⾏规则
favicon.ico apple-touch-icon.png等⼩图标。
如果是⼀个主要⾯向移动设备，则主要将jQuery换成了Zepto.js，以适应移动设备。
HTML5 Boilerplate的模板核⼼部分不过30⾏，但是每⼀⾏都可谓千锤百炼，可以⽤最⼩的消耗解决⼀些前端的顽固问题：
使⽤条件注释区分IE浏览器
1. <!DOCTYPE html>
2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
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. 可以避免，原⽂的解决⽅法是在前⾯加⼀个空⽩的条件注释，但是这⾥显然将原本⽆⽤空⽩的条件注释变得有意义了。
3. 仍然可以通过HTML验证。
4. 与Modernizr等特征检测类库使⽤相同的class，更具备通⽤性。
no-js标签是需要与Modernizr等类库配合使⽤的，如果你不想在项⽬中引⼊Modernizr，需要在Head部分加⼊⼀⾏使no-js标签变为js，代码来⾃：
1. <script>(function(H){HH.className=place(/\bno-js\b/,'js')})(document.documentElement)</script>
通过上⾯的条件注释，就可以在CSS中针对不同情况分别处理：
1. .lt-ie7 {} /* IE6等版本时 */
2. .no-js {} /* JavaScript没有启⽤时 */
meta标签的书写顺序
为了让浏览器识别正确的编码，meta charset标签应该先于title标签出现。
meta X-UA-Compatible标签可以指定IE8以上版本浏览器以最⾼级模式渲染⽂档，同时如果已经安装则直接使⽤Chrome Frame渲染。⽽指定渲染模式的：
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后，html标签的no-js将会被⾃动替换为js，同时Modernizr会向html标签添加代表版本检测结果的class。
对于低版本浏览器的向上兼容需要根据项⽬实际需求处理，Modernizr也⾮常周到的给出的。
脚本
⼀个完整的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.delete.unoptimized = true – 未优化的⽂件将被删除
后⾯是⽂件⽬录的定义，以及编译⼯具的定义。
结语
进⼊ HTML5 Boilerplate 项⽬的门槛⾮常低，有充⾜的空间⽤于试验。您可以将这个项⽬作为您的试验项⽬，探索它带来的好处，如果其中有任何缺失或您不需要的东西，尽管进⾏相应修改。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。