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. 原创：LoadTest系列之Local.testtings之Web Test

    在录制脚本后,需要对脚本进行回放,而在Loal.testting的Web Test设置中,可以设置脚本运行的次数,以及是否考虑think time等,如下图所示: 1. 双击Solution Item ...

  2. sql server 行转列 Pivot UnPivot

    SQL Server中行列转换 Pivot UnPivot 本文转自:张志涛 原文地址: http://www.cnblogs.com/zhangzt/archive/2010/07/29/17878 ...

  3. javascript客户端时间线

    1.创建document对象,解析解析web页面,此时document.readyState=“loading” 2.下载脚本并执行,同时解析文档. 3.文档解析完成,document.readySt ...

  4. 自动化运维工具Ansible详细部署

    本文来源:http://sofar.blog.51cto.com/353572/1579894/ 前言 一个由 Python 编写的强大的配置管理解决方案.尽管市面上已经有很多可供选择的配置管理解决方 ...

  5. webfont 字体

    http://www.phpdl.com/demo/webfont/index.html 淘宝web font字体,开源. 自定义字体,网站可以用服务端字体. 一般来说,只能用客户端字体.格式不同,为 ...

  6. 深度学习 for java http://deeplearning4j.org/

    http://deeplearning4j.org/ http://deeplearning4j.org/zh-neuralnet-overview

  7. [转]hibernate三种状态详解

    本文来自 http://blog.sina.com.cn/u/2924525911 hibernate 三种状态详解 (2013-04-15 21:24:23) 转载▼   分类: hibernate ...

  8. 我对hibernate的对象的3种状态的理解

    老师的说法 Hibernate中对象的状态    在Hibernate使用中,对象的状态有以下三种    a.临时对象 : 在程序中使用new方式创建的对象    b.持久对象 : 在程序中与sess ...

  9. 注解用法详解——@SuppressWarnings

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  10. Python+Selenium定位不到元素常见原因及解决办法（报：NoSuchElementException）

         在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况(报selenium.common.exceptions.NoSuchElementException ...