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

HTML模块化：使用HTML5 Boilerplate模板的更多相关文章

  1. HTML5 Boilerplate

    time: 2016-10-20 20:00 HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Moderni ...

  2. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  3. 30套免费的响应式 HTML5 & CSS3 模板下载

    HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对 ...

  4. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

  5. 20款免费响应式的 HTML5 网站模板下载

    今天这篇文章给大家带来的是20款免费响应式的 HTML5 网站模板,大家可以借助这些优秀的网站模板创建自己的优秀网站.响应式(Responsive Design)设计的目标是要让产品界面能够响应用户的 ...

  6. 20款高质量的 HTML5 网站模板【免费下载】

    下面的列表集合了20款高质量的免费 HTML5 网站模板,这些专业的模板能够让你的网站吸引很多的访客.这些免费的 HTML5 模板虽然不是响应式的,不过都很实用.赶紧来看看. 您可能感兴趣的相关文章 ...

  7. 25+免费的Bootstrap HTML5网站模板

    在前端框架中,Bootstrap可以说是非常有名的高级网站设计框架.网上也有很多使用Bootstrap程序创建的免费模板.这些模板设计成响应式模式,因此你可以使用它们来为所有的设备平台和浏览器创建网站 ...

  8. 2015年15+最佳的响应式HTML5网站模板

    015年最好的免费响应式HTML5模板通常用于创建新潮的网站. HTML5是HTML用于创建现代化网站的最新版本.随着这一现代标记语言的出现,网上冲浪的趋势变得越来越智能化越来越酷.几乎每个web开发 ...

  9. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

随机推荐

  1. 1058FBI<二叉树，递归，后序遍历>

    问题描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&q ...

  2. java中的装饰设计模式，浅谈与继承之间的区别

    最初接触装饰设计模式,一直搞不懂这么做的意义是什么,看了网上很多的资料,对于与继承的区别并没有很清楚的分析,直到看到这篇博客:http://www.cnblogs.com/rookieFly-tdii ...

  3. js中的全局函数

    以前没搞懂JS的全局函数,全局函数和window对象的函数不一样.全局函数不属于任何一个内置对象. JS包含以下7个全局函数,用于一些常用的功能:escape(),eval(),isNan(),isF ...

  4. java socket 多线程网络传输多个文件

    http://blog.csdn.net/njchenyi/article/details/9072845 java socket 多线程网络传输多个文件 2013-06-10 21:26 3596人 ...

  5. Protocol buffers--python 实践（一） 简介以及安装与使用

    由于最近对grpc产生了浓厚的兴趣,但是那是一整套东西,看了一下用到的东西不少,所以抽丝剥茧先写写这几天调研的protocol buffer -python的收获. 简介: 以下引用自官方首页文档: ...

  6. SVG页面loading动态图

    https://github.com/SamHerbert/SVG-Loaders demo http://samherbert.net/svg-loaders/

  7. C程序编译执行过程

    C程序编译执行过程   认识C编译执行过程,是C学习的开端. 简单说C语言从编码编译到执行要经历一下过程:   C源代码 编译---->形成目标代码,目标代码是在目标机器上运行的代码. 连接-- ...

  8. (简单) POJ 1961 Period，扩展KMP。

    Description For each prefix of a given string S with N characters (each character has an ASCII code ...

  9. android测试之——mokeyrunner上（二）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  10. 推荐一款非常好用的java反编译工具（转）

    源: 推荐一款非常好用的java反编译工具