解说HTML5 Boilerplate - 让页面有个好的开始
一、HTML5 Boilerplate是什么？解决了什么问题？
对于初次听说 HTML5 Boilerplate 的人来说，心中肯定会有这样的疑问。在网上搜索时，很多人会误以为它和 Bootstrap 是同一类东西，这其实是一个很大的误解。
实际上，HTML5 Boilerplate 只是一个单纯的 HTML 模板。或许有人会问：“HTML 模板？它有什么用呢？”这里不得不提及所有前端开发人员都会遇到的问题。每次创建新页面时，你是怎么做的呢？编写 doctype、html、head、body、meta 标签是一件令人心烦的事情。有些人会从以前的项目中复制代码，或者借鉴 Bootstrap 推荐的模板。但在做这些操作时，我们是否思考过自己的写法是否是最佳实践？业界是否有一个较为统一的推荐写法呢？答案是肯定的。
HTML5 Boilerplate 就解决了这样的问题，它提供了一个非常完善的 HTML 模板，完善到所有页面似乎都应该遵循这个规则。
接下来，我们从官网下载 HTML5 Boilerplate，其核心文件是一个 index.html 文件，文件不大，下面来看看它的源码：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-**X-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-**X-X');ga('send','pageview');
</script>
</body>
</html>
这基本上就是 HTML5 Boilerplate 的全部内容了。大致浏览一下，你会发现有些代码和自己以前的写法相同，有些则是未曾见过的写法，或者自己虽然也是这样写的，但从未思考过背后的原因。下面，我们来“解剖”一下这个 HTML 文件。
二、浅析 index.html
2.1 文档类型声明
文档类型使用了 HTML5 文档声明，与 HTML4 那冗长的声明相比，HTML5 的声明明显更加简单明了，并且兼容所有浏览器。由于 IE 在设计时，对于这种写法会进入标准模式，所以以后的文档声明都可以采用这种方式，省心省力。
2.2 条件注释
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
这段代码非常经典。条件判断分别表示低于 IE7、等于 IE7、等于 IE8、高于 IE8。在条件注释中，会为 html 标签添加相应的类名。例如，在 lt IE 7 中，html 标签会有 lt-ie9、lt-ie8、lt-ie7 这三个类，分别表示低于 IE7、8、9。这样做的最大作用是在编写 CSS HACK 时，可以避免使用传统的 CSS HACK 方法。如果是 IE6 浏览器，html 标签会有 lt-ie7 类，我们可以直接利用 CSS 优先级覆盖之前的设置。
最后一句 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 的意思是，所有大于 IE8 的 IE 浏览器和非 IE 浏览器都使用 <html class="no-js">。仔细观察会发现其中包含了几个残缺的注释标签。对于大于 IE8 的 IE 浏览器，这些标签会被完全忽略；对于非 IE 浏览器，由于不识别 [if gt IE 8]，这部分内容会被当作注释处理。这样就实现了完美的浏览器识别。
另外，no-js 类主要与后面的 modernizr.js 配合使用。当浏览器启用 JavaScript 时，modernizr 会将 no-js 替换为 js，因此这个类可以用来判断浏览器是否启用了 JavaScript。
2.3 元标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
首先，要将文档编码设置放在最前面（特别注意不要放在 title 标签后面），以避免后续代码出现乱码。接下来，设置 IE 使用最新版本进行渲染。meta 标签中的描述信息有助于 SEO，viewport 标签则指定移动端不对网页进行缩放。这些元标签是一个网页必不可少的部分，大家可以检查一下自己的网站是否遗漏了这些标签。
2.4 引入 CSS 和 JavaScript 文件
之后，引入了 normalize.css、main.css 和 modernizr.js。关于这三个文件，后面会详细说明。
2.5 主体部分
2.5.1 低版本 IE 提示
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
对于使用低于 IE7 版本浏览器的用户，会给出升级提示。我们可以选择删除这一段，或者将其替换为中文提示。
2.5.2 引入 JavaScript 文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
首先，通过 CDN 引入 jQuery，这里使用的是谷歌的 CDN。如果直接复制这段代码，可能会出现问题，建议将其替换为国内的 jQuery CDN，如七牛的 CDN。接着，判断 jQuery 对象是否存在，因为 CDN 有可能出现故障。如果 jQuery 对象不存在，就使用自己服务器上的 jQuery 文件。然后，引入了 plugins.js 和 main.js，其中 main.js 是空文件，plugins.js 后面会详细说明。
2.5.3 引入统计代码
最后一段代码是引入 Google 统计，大家可以根据自己的需求将其替换为百度统计或其他统计工具，这里不再详细说明。
至此，HTML5 Boilerplate 最关键的模板 HTML 就讲解完了。以后创建新页面时，可参考这个模板进行复制。不过，HTML5 Boilerplate 提供的功能不止这些，下面将介绍单个文件的作用。
三、静态文件
打开项目代码，会看到有很多文件。一些是说明文件，如 doc/ 路径下的文件，这里不再赘述；而 css/ 和 js/ 目录下的部分文件值得深入探讨，下面挑选几个有趣的文件进行介绍。
3.1 CSS 文件
3.1.1 normalize.css
normalize.css 是一个浏览器重置文件，其中的每一条 CSS 规则都是经过无数人精心挑选的，基本上已经成为业界公认的标准。具体的每条规则可以通过百度查看该项目的文档，也可以直接查看文件中的注释。
3.1.2 main.css
main.css 是对 normalize.css 的补充，它提供了一些基础类名，方便开发者使用，例如图片置换、清除浮动等。
3.2 JavaScript 文件
3.2.1 plugins.js
代码如下：
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
这段代码比较简单，主要解决了在不支持 console 对象的浏览器中使用 console 调试时出现报错的问题。很多开发者在调试代码后忘记删除 console 语句，导致线上环境的 IE 浏览器出现报错，进而影响 JavaScript 的执行。添加这段代码可以避免此类问题。
3.3 其他文件
HTML5 Boilerplate 还提供了一些其他文件，如 Apache 的配置文件 .htaccess、404 页面、Flash 跨域需要的文件 crossdomain.xml、爬虫过滤文件 robots.txt 等，大家可以根据自己的需求使用。
至此，HTML5 Boilerplate 就全部介绍完了。这是一个简单而实用的项目，可以作为前端开发的标配。