您的位置：首页 > Web前端 > HTML5

HTML模块化：使用HTML5 Boilerplate模板

2015-06-26 14:28 901 查看

HTML5 Boilerplate 是一个由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的“前端开发模版”。HTML5 Boilerplate 是一套具有非常多先进特性的框架，可以让开发者快速制作出面向未来的网站。

开始一个Web项目，HTML的书写总是重中之重，一个好的HTML能从根源上规避大量潜在问题，所以Web App应该全部应用一个标准化的高质量HTML模板，而不是将所有页面交由开发人员自由发挥。

这里推荐使用HTML5 Boilerplate项目作为App的默认模板以及文件路径规范，无论是网站或者富UI的App，都可以采用这个模板作为起步。

可以使用

git clone git://github.com/h5bp/html5-boilerplate.git

或者直接下载HTML5 Boilerplate项目代码。HTML5 Boilerplate的文件结构如下：

从上往下看：

css

用于存放css文件，并内置了Normalize.css作为默认CSS重置手段（其实Normalize.css不能算是CSS reset）。

doc

存放项目文档

img

存放项目图片

js

存放javascript文件，其中第三方类库推荐放在

vendor

下

.htaccess

内置了很多对于静态文件在Apache下的优化策略，如果Web服务器不是Apache则可以参考其他Web服务器配置优化。

404.html

默认的404页面，

index.html

项目模板

humans.txt

相对于面向机器人的

robots.txt

，humans.txt更像是小幽默，这在里可以写关于项目/团队的介绍，或者放置一些彩蛋给那些喜欢对你的应用刨根问底的用户们。

robots.txt

用于告诉搜索引擎蜘蛛爬行规则

crossdomain.xml

用于配置Flash的跨域策略

favicon.ico

apple-touch-icon.png

等小图标。

如果是一个主要面向移动设备，则主要将jQuery换成了Zepto.js，以适应移动设备。

HTML5 Boilerplate的模板核心部分不过30行，但是每一行都可谓千锤百炼，可以用最小的消耗解决一些前端的顽固问题：

使用条件注释区分IE浏览器

<!DOCTYPE html>







 <html class="no-js"> 

之所以要这样写：

可以使用class作为全局条件区分低版本的IE浏览器并进行调整，这显然要优于使用CSS Hack。

可以避免IE6条件注释引起的高版本IE文件阻塞问题，原文的解决方法是在前面加一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了。

仍然可以通过HTML验证。

与Modernizr等特征检测类库使用相同的class，更具备通用性。

no-js

标签是需要与Modernizr等类库配合使用的，如果你不想在项目中引入Modernizr，需要在Head部分加入一行使

no-js

标签变为

js

，代码来自Avoiding the FOUC：

<script>(function(H){HH.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

通过上面的条件注释，就可以在CSS中针对不同情况分别处理：

.lt-ie7 {} /* IE6等版本时 */

.no-js {} /* JavaScript没有启用时 */

meta标签的书写顺序

为了让浏览器识别正确的编码，meta charset标签应该先于title标签出现。

meta X-UA-Compatible标签可以指定IE8以上版本浏览器以最高级模式渲染文档，同时如果已经安装Google Chrome Frame则直接使用Chrome Frame渲染。而指定渲染模式的meta X-UA-Compatible标签同样需要优先出现：

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>

设置移动设备显示窗口宽度

<meta name="viewport" content="width=device-width">

这是移动设备专属的标签，具体设置需要根据项目实际情况调整。

使用Modernizr做浏览器差异检测

Modernizr常做前端的应该都不陌生。引入Modernizr后，html标签的

no-js

将会被自动替换为

js

，同时Modernizr会向html标签添加代表版本检测结果的class。

对于低版本浏览器的向上兼容需要根据项目实际需求处理，Modernizr也非常周到的给出的绝大多数HTML5功能的兼容方法。

脚本

一个完整的Boilerplate里还包含一个build目录，里面config目录里有针对ant的配置文件，default.properties自然是默认属性定义，用户可以修改project.properties来定义自己的属性；tools目录下有各种编译工具。

编译时，libs下的文件不会再改变，但mylibs中文件以及另两个都会一起压缩到一个js文件中，style.css也会被压缩，同时 images目录下会针对jpg和png优化。js中consloe.log函数将被去除，html文件也可以压缩，默认使用htmlbuildkit，还可以用htmlclean或htmlcompress来压缩。

再看看default.properties里定义哪些选项

build.concat.scripts = true – 脚本文件将被压缩为一个文件

build.delete.unoptimized = true – 未优化的文件将被删除

file.exclude = nonexistentfile – 发布时排除的文件后缀

后面是文件目录的定义，以及编译工具的定义。

结语

进入 HTML5 Boilerplate 项目的门槛非常低，有充足的空间用于试验。您可以将这个项目作为您的试验项目，探索它带来的好处，如果其中有任何缺失或您不需要的东西，尽管进行相应修改。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航