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

This article shows you what the skills about HTML5 are, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can gain something through the detailed introduction of this article.

The development of Web technology is so fast that if you don't keep pace with the times, you will be eliminated. Therefore, in order to deal with the upcoming HTML5, this article summarizes 22 basic skills of HTML5, hoping that it will be helpful for you to further learn HTML5.

1. New Doctype statement

XHTML's statement is too long, and I believe very few front-end developers will write this Doctype statement.

The code is as follows:

HTML5's Doctype statement is very short, and I'm sure you'll remember it right away. You don't have to waste your brain cells remembering the Doctype statement of the perverted XHTML.

HTML5's brief DOCTYPE statement is to put modern browsers such as Firefox and Chrome and browsers such as IE6/7/8 into (quasi) standard mode. You may be surprised that IE6/7 can also support HTML5 Doctype. In fact, IE will enter standard mode as long as doctype conforms to this format.

two。 Label

Take a look at the following simple code:

The code is as follows:

Image of Mars.

Unfortunately, the H7 tag here seems to have nothing to do with the img tag, and the semantics are not clear enough. HTML5 realized this and adopted the tag. When combined with the use of tags, you can combine H7 tags with img tags, making the code more semantic.

The code is as follows:

This is an image of something interesting.

3. Redefine

Not long ago, I used tags to create subheadings related to logo. But the tag has been redefined in HTML5 to make it more semantic, and the font size will be smaller, so it would be a good idea if the tag was used for copyright information at the bottom of the site.

4. The type attribute of Javascript and CSS tags has been removed

Usually you will add the type attribute to and:

The code is as follows:

In HTML5, the type attribute is no longer needed because it is a bit redundant and can be removed to make the code more concise.

The code is as follows:

5. Whether to use double quotation marks

This is a bit confusing, HTML5 is not XTHML, you can leave out the double quotation marks in the tag. I believe most comrades, including me, are used to putting double quotation marks because it makes the code look more standard. However, you can decide whether you want double quotation marks or not according to your personal preference.

The code is as follows:

Start the reactor.

6. Make web page content editable

7. Email input box

HMTL5 has added an e-mail property in the input box to check whether the input is in line with the e-mail writing format, which is becoming more and more powerful. Before HTML5, you can only rely on JS to check. Although the built-in form validation feature will soon become a reality, this property is not supported by many browsers and will only be treated as a normal text input box.

The code is as follows:

Email: submit form

So far, this property is not supported by modern browsers, so it is unreliable for the time being.

8. Placeholder

The placeholder in the text box (see the search box effect of this blog) helps to improve the user experience. Previously, we can only rely on JS to achieve the placeholder effect, adding the placeholder attribute placeholder in HTML5.

The code is as follows:

Similarly, the current mainstream modern browsers do not support this attribute very well. For the time being, it is only supported by Chrome and Safari, but not supported by Firefox and Opera.

9. Local Stora

HTML5's local storage feature allows modern browsers to "remember" what we typed, even if the browser is closed and refreshed. Although this feature is not supported by some browsers, it is supported by IE8, Safari 4, and Firefox 3.5. you can test it.

10. More semantic header and footer

The following code will no longer exist in HTML5

The code is as follows:

......

Usually we define a div for header and footer, and then add an id, but you can use the and tag directly in HTML5, so you can rewrite the above code as follows:

The code is as follows:

......

Be careful not to confuse these two tags with the headers and footers of the site, as they just represent their containers.

11. IE support for HTML5

IE browsers currently have poor support for HTML5, and it's a big stumbling block to the faster adoption of HTML5, but IE9's support for HTML5 is good.

IE parses all the tags added to HTML5 into inline elements, when they are actually block-level elements, so it is necessary to define a style for them:

The code is as follows:

Header, footer, article, section, nav, menu, hgroup {display: block;}

However, IE still cannot parse these new HTML5 tags, so you need to use Javascript to solve this problem:

The code is as follows:

Document.createElement ("article"); document.createElement ("footer"); document.createElement ("header"); document.createElement ("hgroup"); document.createElement ("nav"); document.createElement ("menu")

You can use this piece of Javascript code to fix IE's better parsing HTML5.

The code is as follows:

twelve。 Title group (hgroup)

This is similar to the second technique. If you use H2 and h3 tags to indicate the name and subtitle of the site, respectively, this will make the two headings that are closely related in the original meaning not related. At this point, you can use tags to combine them, so that the code will be more semantic.

The code is as follows:

Recall Fan Page Only for people who want the memory of a lifetime.

13. Required attribute

The front-end staff must have done a lot of form validation projects, one of the important points is that some of the input boxes must be filled in, here you need to use Javascript to check. In HTML5, a "must be filled in" attribute has been added: required. There are two ways to use the required attribute, the second is more structural, and the first is more concise.

The code is as follows:

With this property, it is easier to submit and validate the form. Take a look at the following simple example:

The code is as follows:

Your name: Go

If the input box is empty, the form will not be submitted successfully.

14. Automatically get focus

Similarly, HTML5 no longer needs Javascript to solve the automatic focus of the input box. If an input box should be selected or get the input focus, HTML5 adds the automatic focus attribute autofocus:

The code is as follows:

Autofocus can also be written as "autofocus=autofocus", which looks more standard, depending on your personal preferences.

15. Support for audio playback

Tags are provided in HTML5 to solve the problem that in the past you had to rely on third-party plug-ins to play audio files. So far, only a few of the latest browsers support this tag.

The code is as follows:

Download this file.

Why are there two formats of audio files? Because of the difference in the format supported by Firefox and Webkit browsers, Firefox can only support .ogg files, while Webkit only supports .mp3 files. The solution is to create two versions of audio files, so that they are compatible with Firefox and Webkit browsers. It should be noted that IE does not support this tag.

16. Support for video playback

Like tags, HTML5 also provides tag support for playing video files. YouTube also announced a new HTML5 video embedding. Unfortunately, the HTML5 specification does not specify a specific video decoder, but leaves it to the browser to decide. This creates a browser compatibility problem, although both Safari and IE9 support videos in H.264 format (which can be played by Flash players), while Firefox and Opera support open source Theora and Vorbis formats. Therefore, when displaying HTML5 video, you also have to prepare two formats.

The code is as follows:

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.