HTML模块化:使用HTML5 Boilerplate模板

时间:2023-03-08 17:46:45

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的文件结构如下:

HTML模块化:使用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.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. 可以避免IE6条件注释引起的高版本IE文件阻塞问题,原文的解决方法是在前面加一个空白的条件注释,但是这里显然将原本无用空白的条件注释变得有意义了。
  3. 仍然可以通过HTML验证。
  4. 与Modernizr等特征检测类库使用相同的class,更具备通用性。

no-js标签是需要与Modernizr等类库配合使用的,如果你不想在项目中引入Modernizr,需要在Head部分加入一行使no-js标签变为js,代码来自Avoiding the FOUC

  1. <script>(function(H){HH.className=H.className.replace(/\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以上版本浏览器以*模式渲染文档,同时如果已经安装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的配置文 件,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 项目的门槛非常低,有充足的空间用于试验。您可以将这个项目作为您的试验项目,探索它带来的好处,如果其中有任何缺失或您不需要的东西,尽管进行相应修改。