Overall overview of how to use H5 to create web pages

In order to help understand some of the new things in HTML 5 today, we will now get to the point and start using some new structural elements. The first thing we need to do to create an HTML 5 document is to use the new document type.

Depending on who you ask, HTML 5 is either the next big step toward creating a more semantic, or it's an incomplete set of tags and A hodgepodge of tags brought disaster to the web.

The problem on both sides of the argument is that very few sites are using HTML 5 in a natural environment, so theoretical solutions to the now-recognized problems remain largely untested.

Even so, it is not difficult to see the benefits and potential problems of the next generation of network markup tools.

Content

1. What is the difference in HTML 5?

2. Finally, a document type that anyone can remember

3. The most basic semantic structure

1.      

2.                                                                                   

##1.      

##2.      

##3.      < ;footer>

4. Put them together

5. Write styles for new elements

6. Compatible with old browsers

7. Now you can use HTML 5, but will you use it?

What is different about HTML 5?

First of all, what do we express through HTML 5? First off, what do we mean by HTML 5? In theory, we express everything - new semantic structure tags, such as

canvas or offline storage and other API

specifications, as well as new inline semantic tags. However, we limit the actual reason (PS: browser support issues) to structure tags only. Canvas, offline storage, local

video

or geolocation APIs are all great, but they are not yet supported uniformly by all browsers.

"But wait" you say, "most browsers don't support the new structural elements either!" It's true, but the vast majority of them will be happy to accept what you want Any tags created. Even IE6 can handle new tabs, although if you want to style it with CSS, you'll need a little JavaScript help. When you style new tags, one thing you need to remember is that unknown tags do not have default styles in most browsers. They are also considered row-level elements. Still, since most of HTML 5's new tags can be constructed, we'll let them have the behavior

of block-level elements. The solution is to make sure you include

display:block; in your CSS style.

In order to help understand some of the new things in HTML 5 today, we will now get to the point and start using some new structural elements.

Finally, a document type that anyone can rememberThe first thing we need to do to create an HTML 5 document is to use the new document type. Now, if you clearly remember the HTML 4 or XHTML 1.x document types, you are a bigger naughty guy than we are. Whenever we create a new page, we have to open an old file, cut and paste the document type definition.

It's a real pain, and why we love the

new HTML 5 document type

. are you ready? He appeared:

# It won’t be too hard to remember. Simple and easy to understand. not case sensitive. The idea is to stop HTML versioning and make backward compatibility easier. Whether it's successful in the long run is another matter, but at least it saves you the average time of typing.

The most basic semantic structure

We have defined our page as an HTML 5 document. So far, so good. Now, what exactly are these new labels we've been hearing about?

Before we delve into new tags, think about the structure of your average web page, which might look like this:

This is fine for presentation purposes, but what if we want to know something about what the page element contains?

In the above example, we added IDs to all our structures p. This is common among knowledgeable designers. The purpose is twofold, first, the ID provides an anchor that may be used to apply styles to particular paragraphs of the page, and second, the ID acts as a basic pseudo-semantic structure. A sophisticated parser will look at the tag's ID attribute and try to guess their meaning, but that's difficult when the ID names are different for each site.

This is the reason for the arrival of the new structure tag.

Recognizing that these IDs had become a convention, the creators of HTML 5 went a step further and made some of these elements their own tags. Here's a quick summary of the new tags taking effect in HTML 5:

The header tag is designed to serve as a container for introductory information about a chapter or an entire web page. The

tag can contain anything from your typical logo or tagline at the top of most pages, to taglines and opening lines that introduce a chapter. If you still use

in your page, you can use

to replace the

nav element is very obvious. is your navigation element. Of course there is some debate about what counts as navigation. There is a basic site navigation, but in some cases there may also be Page Navigation elements. The creators of HTML5, WHATWG, have recently modified the explanation of

to show how to use it twice on the same page.

If you are still using the

tag to contain your page navigation, you can use the concise

tag instead.

Section is probably the most obscure of the new tags. According to HTML 5 definition, a chapter is a collection of topics of content, usually after the header tag and before the footer tag. However, sections can be nested within each other if necessary.

In our example above, the p marked by "content" is a good choice to become a section. In addition, within that section, we can add sections according to the content.

Eradicate WHATWGComment, the article element can contain "a piece of content that forms a separate part of a document or site; for example, a magazine or news article, Or blog entry. "

Remember that a page can have multiple article tags; for example, a blog homepage may have the latest ten articles, each of which is contained in an article tag. Articles can also be divided into multiple paragraphs by using the section tag, however you need to be a little careful when planning your structure, otherwise you can easily end up with some ugly hodgepodge of tags.

Another rather vague tag, the aside element is used for content that is "irrelevant to the content of the main body stream that makes up the document." That means an additional comment, an inline footnote, a citation, annotations, or more typical sidebar content like the one you see on the right side of this article.

According to the WHATWG comments, it seems that

can be used in all of these situations, although the quotes in your sidebar are very different from the tag cloud.

No one said HTML 5 is perfect!

The use of Footer should also be obvious, except maybe you don’t know that you can have multiple footers. In other words, in addition to the main subscripts typically found at the bottom of most pages, paragraphs can also contain subscripts.

Putting them together

Let’s rewrite our original example using new tags:

Very clear and easy to understand ,Is not it? Some notes: We can include our

My Article

title in the header tag. I didn’t do this because the h1 element already conveys the meaning of the title, but if you also have the publication date, byline, or other data at the top of your article, adding a header container tag to the tag set is a good option.

Also note that we can add a second footer element under the article element to include page navigation, related articles or other content.

Writing styles for new tabs

In most browsers, all you need to do is apply a style sheet on a new tab as you would normally do, simply defining your styles. But please make sure to add the display:block; rule to every element, no matter what, from now on. Over time, as browsers begin to standardize and support new elements, that won't be necessary.

For example, let's apply some styles to our header:

Remember, you can still add class and ID attributes to these tags. So, if you want to style a navigation individually, you can easily add a class or style to the tag, like this:

Then you can apply a Style:

Compatible with old browsers

But wait, what about IE? These styles don't work under IE6 at all. If you still need to support legacy browsers like IE6, here's a solution. IE6 parses and displays these tags fine, but you can't set any CSS on them. The solution is to use a little JavaScript.

We just need to let IE set styles for the HTML 5 tags we created using the createElement method. Add this in the head tag of your HTML 5 file. Alternatively, you can save it in a specific file and include it that way.

I know what you're thinking: "Brother, you didn't define a MIME type for that script tag at all."

You don't need to specify it in the HTML 5. Do these things. In HTML 5, all scripts are assumed to be of type="text/javascript", so there's no need to clutter your script tags with attributes (unless your script isn't JavaScript).

This solves the problem with IE, but we're not out of the woods. It turns out there is a bug in the Gecko rendering engine that causes some versions of Firefox 2 and Camino to get stuck on these tabs.

There are two ways to deal with this bug, neither of which is ideal. For more details, please see this article by HTML5doctor. This article also comes with a handy script that enables all HTML 5 elements.

Keep in mind that although Firefox 2 usage has quickly dropped below 10% of all website traffic, simply ignoring this bug may still depend on your site's visitors.

Now you can use HTML 5, but will you use it?

The short answer is: we do.

The more complicated thing is: it depends on the site. If you're accused of remaking the CNN homepage, well, you might resist a little until browser support gets better. But if you want to revamp your blog, we have your back. Here are some WordPress plugins that can help you if you are using such a popular publishing system. Here is a HTML 5 theme created by Jeff Starr.

Also, try the site-focused HTML 5 Gallery and check out the source code to see what they do.

Still, if IE's shortcomings stop you, consider this: Even Google is using the HTML 5 document type on their main search page. Even if you don't use all the new structural tags, you can at least take advantage of concise script declarations and some non-structural semantic tags that we'll cover next time.

【Related recommendations】

1. HTML5 free video tutorial

2. Detailed explanation of how to add voice function to H5 input box

3. What should I do if the input box is blocked when creating a virtual keyboard in H5?

4. Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5

5. Detailed explanation of browser compatibility issues with H5 new tags

The above is the detailed content of Overall overview of how to use H5 to create web pages. For more information, please follow other related articles on the PHP Chinese website!