HTML5 Boilerplate浅析

忘是亡心i 2022-05-17 02:04 138阅读 0赞

# HTML5 Boilerplate浅析 #

## 简介 ##

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

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

## 安装 ##

### 拉取代码 ###

1.  通过命令行：
    
    `git clone https://github.com/h5bp/html5-boilerplate.git`
2.  通过webstorm

![这里写图片描述][70]

![这里写图片描述][70 1]

### 修改JS编译器语法 ###

![这里写图片描述][70 2]

![这里写图片描述][70 3]

## 目录文件介绍 ##

![这里写图片描述][70 4]

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

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

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

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

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

### [持续集成服务 Travis CI][Travis CI] ###

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

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

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

### [统一代码风格工具——editorConfig][editorConfig] ###

![这里写图片描述][70 5]

### JS语法检查——ESLint ###

![这里写图片描述][70 6]

## dist目录文件介绍 ##

![这里写图片描述][70 7]

### [Normalize.css][] ###

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

normalize.css创造的目的：

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

### [Modernizr：专为HTML5和CSS3开发的功能检测类库][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][https_modernizr.com_download]中选择项目中需要的特性进行下载：

![这里写图片描述][70 8]

![这里写图片描述][70 9]

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 --*/
    }

![这里写图片描述][20160717173058438]

基于 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的方式：

现在用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徽标。

![这里写图片描述][70 10]

### favicon.ico ###

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

![这里写图片描述][70 11]

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

### index.html ###

![这里写图片描述][70 12]

![这里写图片描述][70 13]

[70]: /images/20220517/fb8e4246d47f40aba9b269da85fb6266.png
[70 1]: /images/20220517/b96f932c84fb4eb19802a1d15a023bc9.png
[70 2]: /images/20220517/f377a2dd5c6f47c1a06a61997a56fb8d.png
[70 3]: /images/20220517/59a7fa99abd147009ab4bc09be264d93.png
[70 4]: /images/20220517/b295e0d413204e0a91cd331f085ecc1c.png
[Travis CI]: http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html
[editorConfig]: https://www.cnblogs.com/xiaohuochai/p/7160067.html
[70 5]: /images/20220517/d9e217b513854636bb3f1bc607a5769f.png
[70 6]: /images/20220517/5cc80df617ae46b38695f171fd75fc39.png
[70 7]: /images/20220517/5d27aececfa1411ea806330997bc419a.png
[Normalize.css]: https://www.jianshu.com/p/3d21d1932aa0
[Modernizr_HTML5_CSS3]: https://blog.csdn.net/hcz804933522/article/details/51932950
[https_modernizr.com_download]: https://modernizr.com/download
[70 8]: /images/20220517/89e5c44587bb41788bab5d129b0fd88b.png
[70 9]: /images/20220517/0018b0a80e5a484c9f720ecc0e504cd5.png
[20160717173058438]: /images/20220517/abb2cfa0b70242eba93e7943547645e0.png
[HTML5 Cross Browser Polyfills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
[70 10]: /images/20220517/0cd14c322c0b4ccb92a592d866430dea.png
[70 11]: /images/20220517/ec966f333d1a4fda865de7053a1c4c27.png
[70 12]: /images/20220517/a80a76d99747444e83c4630005472268.png
[70 13]: /images/20220517/c9d8904216244fca929f007783d7416d.png