Shulou(Shulou.com)05/31 Report--

The content of this article mainly focuses on how to build a HTML 5 Web page. The content of the article is clear and well-organized. It is very suitable for beginners to learn and is worth reading. Interested friends can follow the editor to read together. I hope you can get something through this article!

HTML 5 is a hot term in the field of Web development nowadays, yes, many people are optimistic about it, and many well-known companies in the industry have officially begun to use HTML 5 to rebuild their websites, such as YouTube began to use HTML 5 video, Google has abandoned its own Gears, began to fully embrace HTML 5 to achieve offline solutions, major browser manufacturers have also begun to support HTML 5 Even Microsoft, which has been criticized, says it wants to add support for HTML 5 in IE 9.

How is HTML 5 different?

First of all, we have to understand that HTML 5 is a new semantic structure tag, including canvas, offline storage specification and some new inline semantic tags, but due to objective reasons (mainly because of browser support), we have to limit the scope of discussion of tags, such as canvas, offline storage, native video or geolocation API, etc., not all browsers support it.

Since the new HTML 5 tags are mostly structural and behave somewhat like block elements, to help you understand HTML 5 better, I'll use some new structural elements in the following content.

Doctype (document type) that everyone should remember

The first thing to create a HTML 5 Web page is to use the new doctype. You must remember the doctype for HTML 4 or XHTML 1.x. When we want to copy and paste from the old document into the new document, we have to modify the doctype. Remember, here is the doctype for HTML 5:

one

It's still easy to remember, is case-insensitive, is much simpler than the widely used version, and maintains backward compatibility.

Semantic structure

Before diving into tags, let's take a quick look at the general structure of an Web page.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

... stuff...

My Site

Home

About

Contact

My Article

...

...

In the above example, I added ID to all DIV tags, which I believe most Web designers are familiar with, for two purposes: first, ID provides a hook through which you can apply styles to specific parts of the page, and second, ID as a primitive, pseudo-semantic structure, the intelligent parser will look up the ID attribute on the tag and try to guess its meaning. But this is a very difficult thing, because the ID of each website may be different.

So the idea of adding new tags came up, and the creators of HTML 5 designed some new elements. Let's take a look at some of the key structural tags added to HTML 5.

◆

This tag is intended to describe the introductory information of a section or a complete Web page. The tag can include all the tags that are usually placed at the head of the page, and if you use it in the page, it will be replaced.

◆

Forget the meaning of this element, your navigation elements are put here, such as the main site navigation, but in some cases there may be page navigation elements. WHATWG, the creator of HTML 5, recently revised the explanation to show how to use it twice on the same page.

To put it simply, if you use tags on the page to accommodate navigation elements, you can use them to replace them.

◆

This is probably the most obscure tag. According to the HTML 5 specification, a section is a themed content group, usually preceded by a header tag, followed by a footer tag, and section can also be used nested if necessary.

In our example above, DIV labeled "content" is a good candidate for section, and in this section, we may have more section depending on the content.

◆

According to WHATWG's comments, the article element packages the section into a document or a separate part of the site, such as a magazine or newspaper article, or a blog article.

Remember, there can be multiple article elements in a page, for example, a blog home page may have more than 10 article elements, and article can also enter the section element, so you need to be careful when nesting, you may make mistakes if you are not careful.

◆

Another obscure tag is aside, which represents content that has nothing to do with the main text stream of the document, that is, the equivalent of a parenthetical comment, footnote, reference, comment, or something like a sidebar, which, according to WHATWG's comments, can be used in all these cases.

◆

The meaning of Footer is also very clear. It can be used in section or at the bottom of a page.

Put it all together

Now let's all rewrite the previous sample page with the new tag.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

... stuff...

My Site

Home

About

Contact

My Article

...

...

Is it cleaner and easier to understand? We can package the My Article into a header tag. Also note that we can add another footer element under the article element to hold content such as paging navigation, related articles, or other content.

The style of the new tag

In most browsers, you only need to use styles for elements as usual, but be sure to add display:block; rules to each element, and as time goes by, as browsers support new HTML 5 elements become more and more standard, you don't have to use them.

Here are some styles applied by our team header:

one

two

three

four

five

Header {

Display: block

Font-size: 36px

Font-weight: bold

}

Remember, you can still add class and ID attributes to these elements, so if you want to use a separate style for the navigation section, you can add a class or ID attribute to the following:

one

Then apply a style:

one

two

three

Nav.main-menu {

Font-size: 18px

}

Compatibility with older browsers

These styles can not be used in IE 6, if you insist on maintaining compatibility with the old browser, there is also a remedy, IE 6 can parse these tags, but can not apply the style, the solution is to use JavaScript, use the createElement method to let IE support the style of HTML 5 tags, you can include this code in the header of the HTML 5 file, or you can save it to a separate file and then reference it.

one

two

three

four

five

six

seven

eight

Document.createElement ('header')

Document.createElement ('nav')

Document.createElement ('section')

Document.createElement ('article')

Document.createElement ('aside')

Document.createElement ('footer')

You might ask, why not specify the MIME type for this script? There is no need to specify in HTML 5. In HTML 5, all scripts are assumed to be type= "text/javascript", so there is no need to bother.

Although the IE problem has been solved, as far as I know, there is still a bug in the Gecko rendering engine in Firefox 2, and there are two solutions, but neither of them is ideal, considering that the number of users of Firefox 2 is very small, you can completely ignore this bug.

You can use HTML 5 now, but should you use it?

The answer is simple: yes!

But this also has to be adjusted according to the nature of the site, for example, if you want to reconstruct the CNN home page, it may not be realistic, it is best to wait for the browser support is better, but if you are renovating your blog system, then you can give it a try, if you are using WordPress, there are already some plug-ins that can help you, here is a HTML 5 WordPress theme.

You can also take a look at the HTML 5 Gallery (http://html5gallery.com/), because it is all built in HTML 5, and you can take a look at its source code to deepen your understanding of HTML 5 markup. You can also continue to follow 51CTO.com 's HTML 5 feature, and we will continue to update technical applications and information reports on HTML 5.

If you're still a little hesitant, check out Google's home page, which is already HTML 5. To be safe, you can use JavaScript to declare these new tags to use. The markup of HTML 5 is much more than that. I hope this article will allay your doubts and use HTML 5 boldly. Only when more people use it can this specification really work.

Thank you for your reading. I believe you have some understanding of "how to build a HTML 5 Web page". Go and practice it. If you want to know more about it, you can follow the website! The editor will continue to bring you better articles!

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.