Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the boilerplate of html5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the boilerplate of html5"?

One: what is HTML5 Boilerplate? What problem has been solved?

For the first time heard of this person, there must be this question! Looking at it on the Internet, I found that many people think this is the same thing as Bootstrap. This is really a big mistake.

In fact, HTML5 Boilerplate is just a simple HTML template.

What? HTML template? What's the use?

Here we have to mention the problems that all front-end developers will encounter, how do you do it every time you have to create a new page? That doctype, html, head, body, meta tags, write how upset. Or copy from previous projects, or copy the templates recommended by Bootstrap, and so on. But when doing these things, have you ever wondered whether your writing method is the best? Or is there a more uniform recommendation for this in the industry? So, the answer is yes.

HTML5 Boilerplate solves such a problem, it provides a very complete HTML template, so perfect that all pages seem to follow this rule.

It's so amazing, so we still have to take a look at it. Download from the official website, the core is an index.html file, not big, let's take a look at its source code

Hello world! This is HTML5 Boilerplate.

This can be said to be all of HTML5 Boilerplate. If you take a look at it, you will surely find that some of them are written in the same way as before, and some of them are written in ways that you have never seen before, or that is to say, you also write in this way, but you have never thought about why. Next, first "dissect" under this HTML file.

Second: analysis of index.html

First of all, the document type uses the HTML5 document declaration, which is obviously simpler and straightforward than the long string of HTML4. Moreover, it is compatible with all browsers. Because IE in the design time, for this way of writing will also enter the standard mode. Therefore, the future document statements will be written in this way, don't worry.

And then, there's a lot of it.

This code is a classic.

First of all, let's look at these conditions, which means lower than IE7, equal to IE7, equal to IE8, and higher than IE8.

Then in the conditional comments, there are corresponding class names. For example, in lt IE 7, there will be three classes lt-ie9 lt-ie8 lt-ie7 on the html tag, which means lower than ie7, 8, and 9, respectively. What's the use? In fact, the biggest thing is when writing CSS HACK, because if you write it this way, you can not use CSS HACK. For example, if it is ie6, then there will be a lt-ie7 class on the html tag, and you can directly overwrite the previous setting with CSS priority.

Then the special place should be in the last sentence, which means that all browsers larger than ie8 and non-ie use this html header. If you look closely, you will find that several incomplete comment tags have been added to it. What's the use? for ie browsers larger than ie8, these tags are completely ignored. For non-ie browsers Because [if gt IE 8] is not recognized, and then along with the comments that follow, you will find that the whole part is annotated. In this way, the most perfect browser recognition is achieved.

Then there is a no-js class. This will mainly be used with the later modernizr.js. Because modernizr will replace no-js with js when js is enabled in the browser. In a nutshell, this class can be used to determine whether the browser has js enabled.

And then,

First of all, set up the document encoding and remember to put this first (especially not after title) to avoid garbled code later.

The next step is to set up IE to render with the latest version

Then there is the description, which is convenient for SEO. Viewport specifies that the mobile side does not zoom the web page.

These meta tags are basically a must for a web page, so you can check your website to see if there is anything missing.

After that, two css of normalize and main are introduced. Modernizr, this js. With regard to these three documents, they will be explained in detail later.

Enter the main part.

First of all, I saw this paragraph.

For users who use a version lower than IE7, an upgrade prompt is given. Of course, we can choose to delete this paragraph or change it to a Chinese prompt.

And then, there is this script.

First, jquery is introduced through CDN. Google's CDN is used here. If this paragraph is copied, then, hey, the website must be terrible. So here we replace it with a domestic jqueryCDN, such as Qiniu.

Then, it is determined whether the jQuery object exists. Because CDN might be dead. If the jQuery object does not exist, then we can use the jquery of our own server.

Then plugins.js and main.js are introduced. Main.js is empty, as detailed later in plugins.js.

The last piece of code is the introduction of google statistics. Here, change to Baidu statistics or something else according to your own needs. I won't go into details.

At this point, the most critical template of HTML5 Boilerplate, HTML, is over. If you want to create a new page in the future, follow this copy.

However, HTML5 Boilerplate provides more than that, so let's talk about the role of a single file.

Three: static files

Open the project code, you can see that there are a lot of files, some are description files, such as doc/ path, do not talk about, some are worth talking about, such as some files under css/ js/. Pick some interesting ones to talk about.

First of all, there are main and normalize in the css directory

Normalize, as you may have heard, is a browser reset, in which every css has been carefully selected by tens of millions of people. Basically, this reset is recognized.

Each of the specific rules will not be detailed, Baidu can view the documentation of this project, or directly look at the comments are also ok.

Main is the supplement of the project to normalize. You can see that it provides some basic class names for everyone, such as image replacement, clearing floats and so on.

At this point, I believe you have a deeper understanding of "what is the boilerplate of html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.