Home > Developer > JavaScript
HTML5 Boilerplate, html5boilerplate
Recently I saw the HTML5 Boilerplate template, and learned about it. As various CSS libraries and JS frameworks emerge one after another, it is amazing to see such a good HTML template. Write a blog and we recommend it to you.I. What is HTML5 Boilerplate? What problems have been solved?For the first time I heard of this person, I must have this question! I read it online and found that many people think this is the same as Bootstrap. This is a big mistake. In fact, HTML5 Boilerplate is just a simple HTML template. What? HTML template? Why? I have to mention all the problems that front-end development will encounter. How do you do it every time you have to create a new page? The doctype, html, head, body, and meta tags are annoying. You can also copy from a previous project, or copy a Bootstrap recommendation template. But when doing these things, have you ever thought about whether your writing is the best? Or is there a uniform recommendation from the industry? The answer is yes. HTML5 Boilerplate solves such a problem. It provides a perfect HTML template. It seems that all pages should comply with this rule. If we are so excited, we have to check whether it is the right thing. After downloading from the official website, the most core is an index.html file, which is not big. Let's take a look at its source code.
<!DOCTYPE html><!--[if lt IE 7]> This is the full HTML5 Boilerplate. You may find that some of them are the same as your previous writing method, and some are the same as those you have never seen before, or you have never thought about why. Next, we will first "dissect" the HTML file. Ii. Brief Analysis of index.htmlFirst, the document type uses the HTML5 Document declaration, which is obviously simpler and clearer than the long string of HTML4. And compatible with all browsers. This is because IE will enter the standard mode during design. Therefore, subsequent document statements are written in this way, saving your mind. Then<!--[if lt IE 7]> This code is classic. First, let's first look at these condition judgments, which respectively mean lower than IE7, equal to IE7, equal to IE8, and higher than IE8. Then the condition comment inside, there is a corresponding class name, for example in lt IE 7, html tags will have lt-ie9 lt-ie8 lt-ie7 these three classes, which means less than ie7, 8, and 9 respectively. What is the purpose? In fact, the biggest left and right is when writing css hack, because this write, you can do not need css hack, for example, if it is ie6, then the html Tag will have the lt-ie7 class, you can directly overwrite the previous settings with the CSS priority. Then the special part should be in the last sentence. The last sentence means that all html headers larger than ie8 and non-ie browsers use the <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->For users earlier than IE7, an upgrade prompt is provided. Of course, you can delete this section or change it to a Chinese prompt. Then, this script is used.<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, introduce jquery through CDN. Google CDN is used here. If you copy this paragraph, then, hey, the website must have a cup of cake. So here we will switch to jqueryCDN in China, such as qiniu. Then, determine whether the jQuery object exists. Because CDN may be suspended. If the jQuery object does not exist, we can use jquery on our own server. Then we introduced plugins. js and main. js. Main. js is empty. Details about plugins. js are provided later. The last piece of code is to introduce google statistics. Here, we can change it to Baidu statistics or other statistics based on our own needs. I will not go into details. Now, HTML, the most critical template of HTML5 Boilerplate, is over. To create a new page in the future, follow this copy. However, HTML5 Boilerplate provides more than this. The following describes the role of a single file. Iii. static filesOpen the project code and you can see that there are a lot of files, some of which are instructions files, such as under the doc/path. I will not talk about them, and some are worth talking about, for example, some files Under css/js. Let's pick up some interesting ideas. First, you may have heard of main and normalizenormalize In the css Directory, which is a browser reset. Every piece of css in it has been carefully selected by thousands of people, basically, this Reset is accepted. The specific rules in this section are not detailed. You can view the document of this project on Baidu or directly view the comments. Main is to add normalize to the project. It can be seen that some basic class names are provided for your convenience, such as segment replacement and floating clearance. Js provides the following plugins. js code:// 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', 'groupCollapsed', '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; } }}());It is relatively simple. The main problem solved is that IE reports an error during console debugging. I think everyone has encountered this problem. The debugging code is forgotten to be deleted, and the online IE reports an error, resulting in the failure of js execution. This can be avoided. There is also modernizr, which is a powerful browser function to check js. For specific usage, you can go to the official website to see the tutorial. Then, some files are provided, such as apache's configuration of htaccess and-page flash cross-domain file crossdomain.xml?crawling filter file robots.txt, which can be used as needed. Now, HTML5 Boilerplate is all done. It is a very simple project, but it is very practical and beautiful. Can be used as a standard for development. Reprinted this site, please indicate the author and the source of the wonderful flowers-http://www.cnblogs.com/season-huang/, do not for any commercial purposes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
