一：HTML5 Boilerplate是什么？解决了什么问题？
对于第一次听说这个人，肯定都有这个疑问把！在网上看了看，发现很多人都认为这个是和Bootstrap一样的东西，这真是大错特错了。
实际上，HTML5 Boilerplate只是一个单纯的HTML模版。
什么？HTML模版？干嘛用？
这里不得不提所有前端开发都会遇到的问题，每次要重新弄一个页面的时候，你们都是怎么做的呢？那个doctype、html、head、body、meta标签，写的多心烦。或者从以前的项目中复制，或者抄一抄Bootstrap推荐的模版等等。但是在做这些事情的时候，有没有想过，自己的写法是否是最好的呢？或者说业界对这个有没有一个比较统一的推荐？那么，答案是有的。
HTML5 Boilerplate就是解决了这么一个问题，它提供了一个十分完善的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-XXXXX-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-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
这可以说就是HTML5 Boilerplate的全部了。大概看一下，肯定会发现有些是和自己以前的写法一样的，有些又是没见过的写法，或者说自己也是这么写的但是从来没想过为什么。下面，就先“解剖”下这个HTML文件把。
二：浅析index.html
首先，文档类型使用了HTML5文档声明，比起HTML4的那一大长串，这个明显简单明了。而且，兼容全部浏览器。因为IE在设计的时候，对于这种写法也会进入标准模式。所以，以后的文档声明都这样写，省心。
然后，是这么一大段
<!--[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。
然后条件注释里面，就有相应的类名，比如在 lt IE 7中，html标签上便会有 lt-ie9 lt-ie8 lt-ie7这3个类，意思分别是低于ie7、8、9 。有什么用呢？其实最大的左右就是在写CSS HACK的时候，因为这样写，就可以不用CSS HACK了，比如如果是ie6，那么html标签上就会有 lt-ie7这个类，直接用CSS优先级覆盖之前的设置即可。
然后特殊的地方应该就在最后一句了，最后一句的意思是所有大于ie8和非ie浏览器都使用<html class="no-js">这个html头。仔细看会发现里面加了几个残缺的注释标签。有什么用呢，对于大于ie8的ie浏览器，这几个标签完全忽略。对于非ie浏览器。由于不识别[if gt IE 8]，然后和后面的注释一起，会发现整个这部分都被注释了。这样，就实现了最完美的浏览器识别了。
然后还有一个no-js类。这个主要是会和后面的modernizr.js一起使用。因为modernizr会在浏览器启用的js的时候，把no-js换成js。简单来说这个类可以用来判断浏览器是否启用了js。
接着，就是
<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使用最新版本来渲染
然后是描述，便于SEO。viewport指定移动端不对网页进行缩放。
这些个元标签基本都是一个网页必须要有的，所以大家可以检查下自己的网站是否漏了什么。
之后，引入了normalize、main两个css。modernizr这个js。关于这3个文件，后面再详细说明。
进入主体部分。
首先，看到这么一段
<!--[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版本的用户，给出升级提示，当然，我们可以选择删除这一段或者换成一个中文提示
然后呢，便是这一段脚本
<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。如果这段照抄，那么，，嘿嘿，网站肯定杯具了。所以这里换成国内的jqueryCDN把，比如七牛的。
然后，判断jQuery对象是否存在。因为CDN有可能挂了。如果jQuery对象不存在，那么我们就可以用自己服务器的jquery把。
然后引入了plugins.js还有main.js。main.js是空的，plugins.js后面详细说明。
最后一段代码就是引入google统计了。这里，根据自己的需要换成百度统计或者是别的把。就不详细说了。
至此，HTML5 Boilerplate的最关键的模版HTML算是讲完了。以后要新弄一个页面，就照着这个copy把。
不过，HTML5 Boilerplate提供的还不止这些，下面讲讲单个文件的作用把。
三：静态文件
打开项目代码，可以看到有挺多的文件的，有些是说明文件，比如doc/路径下的，就不讲了，有些是值得讲讲的，比如css/ js/下的部分文件。挑几个有趣的说说把。
首先 css目录下有main和normalize
normalize也许大家都听过，就是一个浏览器重置，里面的每一条css都是进过千千万万的人精挑细选的，基本上这个重置属于公认的了。
里面的具体每条规则就不细讲了，可以百度查看这个项目的文档，或者直接看注释也ok。
main就是改项目对normalize的补充，可以看到提供了一些基础类名方便大家，比如图片置换，清除浮动等等。
js提供了个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调试的时候IE报错。这个问题我想大家都遇见过，调试代码忘记删除，线上IE报错，导致js无法继续执行。加了这个，就可以避免掉这问题了。
还有就是modernizr了，这是个强大的浏览器功能检查js，具体使用可以在官网上看看教程，这里就不说了。
然后，还提供了一些个文件，比如apache的配置htaccess、 404页面、flash跨域需要的文件crossdomain.xml、爬虫过滤文件robots.txt等，大家按需使用。
至此，HTML5 Boilerplate算是全部理完了，很简单的一个项目，但是很实用，也很漂亮。可以作为开发标配。
相关推荐
让页面能够在各种设备上正确显示。HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。
为腾讯微信优化的 HTML5 动效模板，帮助你快速构建全屏滚动型 HTML5 页面，示例
HTML模块化：使用HTML5Boilerplate模板开始一个Web项目，HTML的书写总是重中之重，一个好的HTML能从根源上规避大量潜在问题，所以WebApp应该全部应用一个标准化的高质量HTML模板，而不是将所有页面交由开发人员自由...
样板是一个有思想的文件夹结构，可帮助您启动html项目。 它包括必要的构建工具和配置，并且易于扩展。 要求 ：所有的魔力 包含什么 ：默认情况下会导入Bootstrap的normalize，grid系统和实用程序类。 ：通过babel...
还可以通过，自动，，， （用于ES6）以及在HTML页面中css和js来实现。 怎么跑？ 使用以下命令将此仓库克隆到boilerplate夹中（这样就不会得到这个长目录名） git clone ...
HTML5 Boilerplate 网站是一个简单的静态网站。 开发代码在目录下。 构建过程依赖于 （一个任务运行器）。 Grunt 配置可以在文件中找到。 设置 安装 。 ： npm install -g grunt-cli 。 运行npm install 。 ...
html和css文件更改时自动刷新页面 可选：删除最终html文件中的注释和不必要的换行符 项目结构 /app - каталог готового проекта(Генерируется автоматически при...
PP HTML5-GULP样板介绍该样板可以提高静态html页面的产品质量，并同时减少构建它的时间。特征凉亭依赖性CSS缩小SCSS JS缩小HTML缩小图像优化精灵生成开发模式，无任何限制没有浏览器插件的Livereload **超越首屏优化...
竖琴版 HTML5 Boilerplate v5.0.0 大部分原始样板的index.html已转换为_layout.jade以包装您的 Harp 站点。 在<head>元素内， <title>标记已被修改为计算_data.json的两个值_data.json ，全局siteTitle...
如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产...
Middleman 3.0.x项目模板：HTML5 Boilerplate HAML，Normalize，Susy，Sprockets包括 HTML5 Boilerplate HAML是适用于HAML 项目模板，具有响应网格，可以使用 ，由 ，Coffeescript，Sprockets等。 强烈建议使用和 ...
在另一个端口上监视并打开服务器 npm start -- --port 3010 一代 从模板生成页面或局部 npm run generate 从模板生成页面 npm run generate:page 从模板生成局部 npm run generate:partial 生产 使用最小CSS / HTML...
让您的html页面与全局应用程序进程进行通信 在您的应用程序上处理拖放 在您的应用程序图标上处理文件拖放 具有全局错误功能，可以打开新窗口并显示错误 在安装完所有必需的电子工具后，您将需要从命令行界面开始执行...
您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。 可以在上访问。 可以在pages/api/hello.js编辑此端点。 pages/api目录映射到/api/* 。 此目录中的文件被视为而不是React页面。 了解...
这是一个使用webpack构建多页面样版，避免了使用router。usageJust add the options to entries.js config as follows ( base on ) :只需要向 entries.js 文件添加配置即可，如下所示（配置文件是基于 的拓展）：{ /...
HTML5 Boilerplate网站是一个简单的静态网站： 开发代码位于目录中。 构建过程依赖于 。 该gulp任务可以在找到文件。设置安装和 。 运行npm install 。发展您应该几乎可以完全在目录中工作。 在开发run npm run ...
如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 yarn run build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 最小化内部...
要求 您必须在本地安装bower和grunt ： npm install -g bower npm install -g grunt-cli 安装 然后在您的目录中安装依赖项，...这会将您的浏览器打开到 index.html 页面，并在您更改某些内容时实时重新加载整个页面。
更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 添加GraphQL文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时...