HTML5 boilerplate notes (2) (EXT)

Recently saw the HTML5 boilerplate template, the system of learning and understand a bit. In a variety of CSS libraries, JS framework in the emerging of today, can see such a good HTML template, feel very cool. Write a blog, recommended for everyone to use. A: What is HTML5 boilerplate? What problems have been solved? For the first time heard this person, must have this question to put! Looked on the net, found that many people think this is the same thing as Bootstrap, this is really wrong. In fact, HTML5 boilerplate is just a simple HTML template. What the? HTML templates? What do you use? You have to mention all the problems of front-end development, how do you do it every time you have to re-get a page? That doctype, HTML, head, body, meta tags, write how upset. or copy from a previous project, or copying a copy of the bootstrap recommended template and so on. But in doing these things, have you ever thought that your own writing is the best? Or does the industry have a more unified recommendation for this? Well, the answer is yes. HTML5 boilerplate is the solution to this problem, it provides a very good HTML template, perfect to all the pages should adhere to this rule. Say so marvellous, then we still have to look at the line. Download from official website Then, the most core is a index.html file, not big, we look at its source code

<! DOCTYPE html><!--[if Lt IE 7]> This can be said to be all the HTML5 boilerplate. Probably look, will certainly find some is the same as their previous writing, and some have not seen the wording, or said they are so written but never thought why. Below, first "anatomy" under this HTML file to put.Second: Analysis of index.htmlFirst, the document type uses the HTML5 document declaration, which is clearly straightforward compared to the long string of HTML4. Plus, all browsers are compatible. Because IE in the design, for this kind of writing will also enter the standard mode. So, after the document declaration is so written, worry. Then, it's such a big paragraph
<!--[if Lt IE 7]>      
This piece of code is classic. First, we look at these conditions to judge, the meaning is lower than IE7, equal to IE7, equals IE8, higher than IE8. Then the conditional comment inside, there is the corresponding class name, for example, in Lt IE 7, the HTML tag will have LT-IE9 LT-IE8 lt-ie7 These 3 classes, the meaning is lower than IE7, 8, 9. What's the use of it? In fact, the biggest is in writing CSS hack, because this write, you can not use CSS hack, such as if it is IE6, then the HTML tag will have lt-ie7 this class, directly with the CSS priority overrides before the settings. Then the special place should be in the last sentence, the last sentence means that all larger than IE8 and non-IE browsers are using 
<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 ">
First of all, set up the document encoding, remember this before the first (pay special attention to not put the title behind), so that the code is not garbled later. The next step is to set IE to use the latest version to render and then describe it for easy seo. VIEWPORT specifies that the mobile side does not scale the page. These meta tags are basically a page must have, so you can check whether your site is missing anything. After that, normalize, main two CSS are introduced. Modernizr this JS. The 3 documents are described in more detail later. Enter the main section. First of all, see this paragraph
<!--[if Lt IE 7]>      <p class= "Browsehappy" >you is using an <strong>outdated</strong> browser . <a href= "http://browsehappy.com/" >upgrade your browser</a> to improve your experience.</p> <! [endif]-->
For users with less than IE7 version, give the upgrade prompt, of course, we can choose to delete this paragraph or replace it with a Chinese hint then, that is the script
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script><script> Window.jquery | | document.write (' <script src= ' js/vendor/jquery-1.10.2.min.js ' ><\/script> ') </script><script Src= "Js/plugins.js" ></script><script src= "Js/main.js" ></script>
First, jquery is introduced through a CDN. Google's CDN is used here. If this copy, then,, hehe, the site must have a cup. So this is replaced by the domestic JQUERYCDN, such as seven cattle. Then, determine if the jquery object exists. Because the CDN is likely to hang up. If the jquery object does not exist, then we can use the jquery of our own server. And then introduced the Plugins.js and Main.js. Main.js is empty, plugins.js is explained in detail later. The last piece of code is the introduction of Google stats. Here, according to their own needs to replace Baidu statistics or other. I won't say it in detail. At this point, HTML5 boilerplate's most critical template HTML is finished. In the future to get a new page, just follow this copy. However, HTML5 boilerplate provide more than these, the following talk about the role of a single file.three: Static filesOpen the project code, you can see there are a lot of files, some of the documents, such as the doc/path, do not say, some are worth talking about, such as css/js/under the partial file. Pick a few interesting things to talk about. First CSS directory has main and normalizenormalize perhaps everyone has heard, is a browser reset, inside each CSS is into the thousands of human spermatogonial selected, basically this reset belongs to the recognized. Inside the specific each rule is not detailed, you can Baidu to view the document of this project, or directly to see the comments are OK. Main is to change the project to the normalize supplement, you can see the provision of some basic class name for everyone, compared to the chip replacement, clear floating and so on. JS provides a plugins.js code as follows
Avoid ' console ' errors in browsers that lack a console. (function () {    var method;    var noop = function () {};    var methods = [        ' assert ', ' clear ', ' count ', ' Debug ', ' dir ', ' dirxml ', ' Error ',        ' exception ', ' group ', ' Groupcollap Sed ', ' groupend ', ' info ', ' log ',        ' marktimeline ', ' profile ', ' profileend ', ' table ', ' time ', ' timeend ',        ' TimeStamp ', ' trace ', ' warn '    ];    var length = methods.length;    var console = (Window.console = Window.console | | {});    while (length--) {        method = Methods[length];        Only stub undefined methods.        if (!console[method]) {            Console[method] = NoOp;}}    } ());
Relatively simple, it does not explain. The main problem is to use the console debugging when IE error. This question I think we all met, debugging code forgot to delete, online IE error, resulting in JS can not continue to execute. By adding this, you can avoid the problem. There is Modernizr, this is a powerful browser function check JS, specific use can be on the official website to see the tutorial, here do not say.   Then, also provide some files, such as Apache configuration htaccess, 404 pages, Flash cross-domain required files crossdomain.xml, crawler filter Files robots.txt, etc., we use as needed. At this point, HTML5 boilerplate is all finished, very simple a project, but very practical, but also very beautiful. can be developed as standard. Original address: http://www.cnblogs.com/season-huang/p/4187219.html
HTML5 boilerplate notes (2) (EXT)