什么是 html5能做什么 Boilerplate

来源：蜘蛛抓取(WebSpider) 时间：2014-12-19 03:40 标签： html5是什么
HTML5 Boilerplate - Professional HTML/CSS/JS Template | Web Resources | WebAppers
best free open source web resources
HTML5 Boilerplate – Professional HTML/CSS/JS Template
Related Resources
Related Resources
Supported By
681Plugins小站会根据您的关注，为您发现更多，
看到喜欢的小站就马上关注吧！
下一站，你会遇见谁的梦想？
搜集前台开发过程中各种好玩的东西~~~
专业前端框架 HTML5 ★ BOILERPLATE
站长在关注您所在的位置： &
HTML模块化：使用HTML5 Boilerplate模板
HTML模块化：使用HTML5 Boilerplate模板
HTML5 Boilerplate 是一个由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的“前端开发模版”。HTML5 Boilerplate 是一套具有非常多先进特性的框架，可以让开发者快速制作出面向未来的网站。
开始一个Web项目，HTML的书写总是重中之重，一个好的HTML能从根源上规避大量潜在问题，所以Web App应该全部应用一个标准化的高质量HTML模板，而不是将所有页面交由开发人员自由发挥。
这里推荐使用作为App的默认模板以及文件路径规范，无论是网站或者富UI的App，都可以采用这个模板作为起步。
git clone git:///h5bp/html5-boilerplate.git
或者直接下载HTML5 Boilerplate项目代码。HTML5 Boilerplate的文件结构如下：
从上往下看：
css 用于存放css文件，并内置了作为默认CSS重置手段（其实Normalize.css不能算是CSS reset）。
doc 存放项目文档
img 存放项目图片
js 存放javascript文件，其中第三方类库推荐放在vendor下
.htaccess 内置了很多对于静态文件在Apache下的优化策略，如果Web服务器不是Apache则可以参考。
404.html 默认的404页面，
index.html 项目模板
humans.txt 相对于面向机器人的robots.txt，humans.txt更像是小幽默，这在里可以写关于项目/团队的介绍，或者放置一些彩蛋给那些喜欢对你的应用刨根问底的用户们。
robots.txt 用于告诉搜索引擎蜘蛛爬行规则
crossdomain.xml 用于配置
favicon.ico apple-touch-icon.png等小图标。
如果是一个主要面向移动设备，则主要将jQuery换成了Zepto.js，以适应移动设备。
HTML5 Boilerplate的模板核心部分不过30行，但是每一行都可谓千锤百炼，可以用最小的消耗解决一些前端的顽固问题：
使用条件注释区分IE浏览器
&!DOCTYPE&html&&&&&&class=&no-js&&&
之所以要这样写：
可以使用class作为全局条件区分低版本的IE浏览器并进行调整，这显然要优于使用CSS Hack。
可以避免，原文的解决方法是在前面加一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了。
仍然可以通过HTML验证。
与Modernizr等特征检测类库使用相同的class，更具备通用性。
no-js标签是需要与Modernizr等类库配合使用的，如果你不想在项目中引入Modernizr，需要在Head部分加入一行使no-js标签变为js，代码来自：
(function(H){HH.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)&
通过上面的条件注释，就可以在CSS中针对不同情况分别处理：
.lt-ie7&{}&&.no-js&{}&&
meta标签的书写顺序
为了让浏览器识别正确的编码，meta charset标签应该先于title标签出现。
meta X-UA-Compatible标签可以指定IE8以上版本浏览器以最高级模式渲染文档，同时如果已经安装则直接使用Chrome Frame渲染。而指定渲染模式的 ：
&charset=&utf-8&&&http-equiv=&X-UA-Compatible&&content=&IE=edge,chrome=1&&&
设置移动设备显示窗口宽度
&name=&viewport&&content=&width=device-width&&
这是移动设备专属的标签，具体设置需要根据项目实际情况调整。
使用Modernizr做浏览器差异检测
常做前端的应该都不陌生。引入Modernizr后，html标签的no-js将会被自动替换为js，同时Modernizr会向html标签添加代表版本检测结果的class。
对于低版本浏览器的向上兼容需要根据项目实际需求处理，Modernizr也非常周到的给出的。
一个完整的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 项目的门槛非常低，有充足的空间用于试验。您可以将这个项目作为您的试验项目，探索它带来的好处，如果其中有任何缺失或您不需要的东西，尽管进行相应修改。
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
当下移动互联网的发展势头迅猛，各式各样的App也在横空出世，最
既然强大的Android Studio来了，有什么理由不去用呢？
微软和诺基亚终于达成协议，微软将收购诺基亚设备与服
随着秋的到来，各路才子佳人渐渐开始回到学校上课。不
百度推出轻应用引起业界火热议论，收购91和推出轻应用
本书的第1版获得过“2006年度全行业优秀畅销品种奖”。全书共15章，分别介绍了网管员职责和应具备的工作习惯、共享上网与访问控
Windows Phone专家
Android开发专家
51CTO旗下网站什么是 HTML5 Boilerplate ?
按票数排序
HTML5 Boilerplate 是一个由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的“前端开发模版”。HTML5 Boilerplate 是一套具有非常多先进特性的框架，其特性简单介绍如下：由 Paul Irish 首创的在 HTML 页面的 body 上使用 IE 条件注释判断浏览器版本，从而大大简化了针对 IE Hack 的成本（在后来的版本中升级为在 &html& 标签中加入条件注释）HTML5 集成，默认使用了很多 HTML5 的特性，并且使其兼容旧版本浏览器大量针对服务器的默认配置，无需修改即可配置一个安全、标准的 web 服务器完整的 JS 调试机制 —— 即使在 IE 下大量使用 CSS3 技术，并且集成了几乎所有来自框架中和技术大牛们口头相传的 CSS 技巧为所有浏览环境做了优化，包括移动版本和打印版本默认内置 Modernizr，可以检测浏览器对新特性的支持能力，方便针对旧版本浏览器优化
也可以简单理解为web前端的最佳实践的HTML+CSS+jquery模板集合.
HTML5 Boilerplate 是一个针对HTML5的框架， 如果你需要快速开发基于HTML5的网站，使用它是一个不错选择。 当然这里还有别的HTML5/CSS框架，你可以针对你具体需要使用 ，例如，wordpress上面的开发，参考这个文章：58cv网址导航

我要回帖

更多关于 html5是什么 的文章

 

随机推荐