HTML5 semantic tag Application

Recently readingHTML5 cheatsThe definition and understanding of html5:HTML5 is actually a set of independent standards. Some standards have been supported, while others have not been supported for several years (or even never), that is, HTML5 can run in some versions of Some browsers. As a new generation of web development standard, HTML5 is believed to have many developers coveted its various revolutionary new features, such:Semantic tags and elements, New Form Controls, complex and simplified rich media support, magic local data storage technology, powerful Drawing Technology (canvas), and offline and geographic positioning. This article only discusses how to use various clear semantic tags of html5.

 

Before HTML5 comes, a standard XHTML header code should be like this:

Such a complicated big push code is believed to be written by few people, and there is no need to remember it. (The younger brother is not talented. It is opened directly before html5.DW.Sublime text2Automatically generated, O (∩ _ ∩) O ~)

A standard HTML5 header is like this:

         Document

I don't need to talk about which one is simpler. I can easily remember the clumsy ones. HTML5 is really a good thing. However, it is obvious that the browser compatibility is always costly.The problem is mainly caused by Microsoft , There may be someNon-mainstream browsersAnd someIE kernel-based browser.Considering a variety of factors, we still choose HTML5, because it saves more than 100 bytes (for websites with PV of more than one million, it can save a lot of traffic) the header can be perfectly compatible. As you may know, when the DOCTYPE is not defined on the page or the DOCTYPE is invalid due to some characters, various strange phenomena such as incorrect box model will be triggered, js captures weird data, and as long as the browser is defined, the page can be parsed in standard mode without specifying a type of DTD.

 

Semantic encoding is a skill that every front-end developer must possess. However, with the development of web technology and the emergence of new technologies and ideas, the Semantic tags of the original XHTML are a little inadequate. HTML5 provides us with a series of new labels and attributes, so that we do not need to face the nested N-layer and annoying div when maintaining and modifying pages, using these new elements allows anyone to access webpages without permission, which is more conducive to search engines. The following is an example:

I am the title of the article. click the button and click the button. I am the body of the article. I am the document guide.

Using HTML5, you can write as follows:

I am the title of the article. click the button and click the button. I am the body of the article. I am the document guide.

In addition, semantic tags include:Aside, figure, figcaption, hgroup, and navI will not list them here. If you are interested in shoes, you can click here to explain the html labels.

 

Many people found a problem when using HTML5 tags to build a new page, that is, these labels that are very good to use do not take effect in IE8 or earlier browsers, adding styles is also futile, all neatly belongingInline Line ElementSome people think that HTML5 is just a fantasy (include me) in web applications before IE8 is eliminated ). However, the facts tell us that success sometimes requires the help of external forces ~

To make HTML5 compatible, we need a small JS function to help:

<script type="javascript"></script>

The role of the above Code isCreate a series of labelsTo make IE8 and earlier browsers recognize.

Then we will initialize these labels with a css. Because IE8 and the following browsers do not provide default styles for these new labels, they are all parsed as intra-row elements, therefore, we need to add the following code in the css initialization file to make it becomeBlock-level elements:

{:;}{:;}

In this way, we can use HTML5 in actual development. However, in actual projects, we usually encapsulate the initialization code into a js file, such as resetHTML5_forIE.js, and then use it in the header section.IE condition AnnotationCall IE:

 

Since my younger brother just came into contact with HTML5, many things have been taken over by me. It seems like I keep my account in the air ^ _ ^. I hope you can correct me if you are not clear or inaccurate. Oh, it's time to eat again... (⊙ o ⊙), ps: