HTML5 Boilerplate

• time: 2016-10-20 20:00

HTML5 Boilerplate(H5BP)是一个由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的“前端开发模版”,也可以简单理解为web前端的最佳实践的HTML+CSS+jquery模板集合，帮你构建 快速, 健壮, 并且适应力强的web app或网站。

一、H5BP 特性简介

• 首创在 HTML 页面的 body 上使用 IE 条件注释判断浏览器版本，从而大大简化了针对 IE Hack 的成本（在后来的版本中升级为在 标签中加入条件注释）
• HTML5 集成，默认使用了很多 HTML5 的特性，并且使其兼容旧版本浏览器
• 大量针对服务器的默认配置，无需修改即可配置一个安全、标准的 web 服务器
• 完整的 JS 调试机制 —— 即使在 IE 下
• 大量使用 CSS3 技术，并且集成了几乎所有来自框架中和技术大牛们口头相传的 CSS 技巧
• 压缩包内包含了 一个干净、移动终端友好的HTML模版；优化过的Google统计代码；触摸屏设备上使用的图标；还有丰富的文档、技巧、窍门
• 包含了 Normalize.css— 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、media queries、打印样式
• 自带了两个优秀的Javascript工具库的最新版本： jQuery (默认链接到 Google的CDN, 如果CDN失效，本地文件作为后备) 和Modernizr 浏览器特性监测工具库，可以检测浏览器对新特性的支持能力，方便针对旧版本浏览
• 为所有浏览环境做了优化，包括移动版本和打印版本

二、如何使用H5BP

1. 下载H5BP
   

   下载地址：HTML5 Boilerplate(H5BP)

2. 删除不必要的样板文件

   删除下列只与H5BP有关的文件：
   
   - CHANGELOG.md
   
   - CONTRIBUTING.md
   
   - doc文件夹及其内容
   
   - 删除css文件夹内不需要的样式文件

3. 理解样板中的.htaccess文件
   
   建议先看一遍H5BP的文档（https://html5boilerplate.com/），此文件本身也有详细的注释，可以打开编辑器从头到尾看一遍，这个文件夹的内容不全都有用，主要取决于你的主机设置和站点需求，不过这个文件的一个主要用途是保证站点性能最优。
4. 可选择更新的样板文件
   

   样板中的下列文件提供了项目的标准信息，根据需要可以更新它们：
   
   - humans.txt:这个文件记载了贡献者，H5BP、Bootstrap等
   
   - LICENSE.md:在H5BP许可前面，可加上你基于该许可构建的网站的许可信息，在H5BP许可之后，加上Bootstrap以及其他站点中用到的重要的库的许可信息。
   
   - README.md:加上自己的项目说明信息并更新这个文件。

5. 更新站点桌面图标和触摸设备图标
   
   不要忘了用自己项目的图标替换H5BP默认的图标文件，包括以下图标:
   
   - apple-touch-icon.png:为确保所有移动设备都有最佳效果，这个图标应该是144px*144px方形图标
   
   - favicon.ico:32px方形图标
6. 加入Bootstrap
   文件

   现在我们考虑把H5BP和bootstrap结合使用，我们需要从bootstrap提供的一大推文件中选出需要的部分：

   - 字体：
   把fonts文件夹复制到H5BP文件夹的根目录，这个文件夹包含bootstrap重要的Glyphicon字体。
   为保险起见，在这个fonts文件夹建一个.hatccsee文件，防止因为越来越多的CDN为你的网站缓存静态资源，如果没有这个文件某些浏览器会拒绝识别你的WEB字体，在创建的.hatccss文件中添加如下代码：
   
   

   - JavaScript
   
   在js目录下创建一个bootstrap文件夹，然后把bootstrap的js脚本文件拷到这个文件夹下，便于优化网站性能，即可按需选用插件、排除其他文件并缩减文件大小。
   
   H5BP采用的方法是将所有的插件代码都复制到plugins.js模板文件，这是结束开发之后的最佳做法，因为这样可以减少http请求，加快站点的加载速度。所有现在我们需要找到Bootstrap文件夹下的bootstrap.min.js文件，打开->全选代码->复制->粘贴到plugins.js模板文件中->保存并退出。

   - css文件
   

   1. 第一种方法：可以直接把bootstrap的样式大文件拷贝到css文件夹内;
   2. 第二种方法：把bootstrap中重要的less文件夹全部复制过来：把bootstrap/less文件夹复制到H5BP文件夹的根目录下，然后使用less自定义编译css文件到css文件夹中。
7. 大盘点

   此时的项目文件结构如下：