HTML5 Boilerplate浅析

简介

HTML5 Boilerplate——最流行的web开发前端模版，帮你构建快速, 健壮, 并且适应力强的web app或网站。其特点如下：

一个干净、移动终端友好的HTML模版
优化过的Google统计代码
包含了 Normalize.css v1 版本 — 一个先进的、支持HTML5的CSS reset — 和基础样式、辅助功能、多媒体查询、打印样式
自带了两个优秀的Javascript工具库的最新版本： jQuery (默认链接到 Google的CDN, 如果CDN失效，本地文件作为后备) 和Modernizr 浏览器特性监测工具库
高性能：提供了一组 Apache 配置参数，帮你提高网站的性能

安装

拉取代码

通过命令行：

git clone https://github.com/h5bp/html5-boilerplate.git
通过webstorm

这里写图片描述

修改JS编译器语法

这里写图片描述

目录文件介绍

这里写图片描述

package-lock.json: 锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。在npm install时自动生成。

.gitignore: 忽略你不想提交到Git上的文件

扫描二维码关注公众号，回复： 3359941 查看本文章

.gitattribute: 指定非文本文件的对比合并方式

humans.txt: 包含参加该网页设计和建立的人们的信息。在<head> 内部添加<link type="text/plain" rel="author" href="http://domain/humans.txt" />

robots.txt: 搜索引擎抓取协议

持续集成服务 Travis CI

持续集成：Continuous Integration，简称CI，意思是，在一个项目中，任何人对代码库的任何改动，都会触发CI服务器自动对项目进行构建，自动运行测试，甚至自动部署到测试环境。这样做的好处就是，随时发现问题，随时修复。因为修复问题的成本随着时间的推移而增长，越早发现，修复成本越低。

Travis CI是在线托管的CI服务，它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。最重要的是，它对开源项目是免费的。

Travis 要求项目的根目录下面，必须有一个.travis.yml文件。这是配置文件，指定了 Travis 的行为。该文件必须保存在 Github 仓库里面，一旦代码仓库有新的 Commit，Travis 就会去找这个文件，执行里面的命令。

JS语法检查——ESLint

这里写图片描述

dist目录文件介绍

这里写图片描述

Normalize.css

Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。

normalize.css创造的目的：

保护有用的浏览器默认样式而不是完全去掉它们
为大部分HTML元素提供一般化的样式
修复浏览器自身的bug并保证各浏览器的一致性
用一些小技巧优化CSS可用性
用注释和详细的文档来解释代码

Modernizr：专为HTML5和CSS3开发的功能检测类库

modernizr.js是为检测浏览器的css3和HTML5的属性而生，从而通过CSS来解决兼容性问题。

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba()等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的<input>标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

安装

1. 安装modernizr命令行工具：

npm install -g modernizr（全局安装）

2. 从官网https://modernizr.com/download中选择项目中需要的特性进行下载：

这里写图片描述

3. 进入modernizr-config.json的下载目录，使用如下命令获取modernizr.js：

modernizr -c modernizr-config.json

4. 在html中引入modernizr.js：

<script src="=modernizr.js"></script>

使用

引入了modernizr.js类库后，标签的class属性就会被相应的赋值，以显示浏览器是否支持某类CSS属性。

比如在IE6下面，不支持boderradius特性，那么在标签中就会出现 no-borderradius 类，你就可以做一些fallback的工作：

.no-borradius div{
    /*-- do some hacks here --*/
}

这里写图片描述

基于 YepNope.js ，Modernizr.load()根据一些条件判断来动态选择加载CSS和JavaScript，这无疑对避免不必要的资源加载有极大的帮助。

你可以在HTML5 Cross Browser Polyfills找到几乎所有新特性的fallback解决方案。

Modernizr.load(
test: Modernizr.webgl,
yep : 'three.js',
nope: 'jebgl.js'
);

当浏览器支持WebGL的时候，就引入 three.js 这个类库做一些3D效果。浏览器不支持WebGL的时候可以使用 jebgl.js 做一些fallback操作。

以前加载jquery的方式：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>

现在用Modernizr.load()可以这么写：

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);

分布式配置文件——htaccess

.htaccess文件(分布式配置文件）,全称是Hypertext Access(超文本入口)，提供了针对目录改变配置的方法。

htaccess文件是Apache服务器中的一个配置文件，它负责相关目录下的网页配置。通过htaccess文件，可以帮我们实现：网页301重定向、自定义404错误页面、改变文件扩展名、允许/阻止特定的用户或者目录的访问、禁止目录列表、配置默认文档等功能。

browserconfig.xml

默认情况下，磁贴上的图像是您网站的favicon或默认的IE11徽标。

这里写图片描述

favicon.ico

favicon，全称FavoritesIcon，其可以让浏览器的收藏夹书签和标签页中除显示相应的标题外，还以图标的方式区别不同的网站。

这里写图片描述

favicon.ico这个请求是浏览器自动发送的请求，我们过滤不了的。当我们访问网页的时候，浏览器默认会发送favicon.ico这个请求来查找网页的图标文件，这就是为什么我们设置网页图标的时候，只要把favicon.ico这个文件放到目录里去就行了的原因。

index.html

这里写图片描述