最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下。在各种CSS库、JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽。写篇博客,推荐给大家使用。
一:HTML5 Boilerplate是什么?解决了什么问题?
对于第一次听说这个人,肯定都有这个疑问把!在网上看了看,发现很多人都认为这个是和Bootstrap一样的东西,这真是大错特错了。
实际上,HTML5 Boilerplate只是一个单纯的HTML模版。
什么?HTML模版?干嘛用?
这里不得不提所有前端开发都会遇到的问题,每次要重新弄一个页面的时候,你们都是怎么做的呢?那个doctype、html、head、body、meta标签,写的多心烦。或者从以前的项目中复制,或者抄一抄Bootstrap推荐的模版等等。但是在做这些事情的时候,有没有想过,自己的写法是否是最好的呢?或者说业界对这个有没有一个比较统一的推荐?那么,答案是有的。
HTML5 Boilerplate就是解决了这么一个问题,它提供了一个十分完善的HTML模版,完善到所有的页面似乎都应该遵守这个规则。
说的这么神乎其神,那么我们还是要一看究竟才行。从官网下载 然后,最核心的的是一个index.html文件,不大,我们来看看它的源码
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and app