22 basic HTML5 skills

The original Article address is unknown! No matter how you do, it is helpful for me to learn and add my favorites first.

Web technology is growing too fast. If you don't keep up with the times, you will be eliminated. Therefore, in response to the upcoming HTML5, This article summarizes 22 basic HTML5 skills, hoping to help you learn more about HTML5.
1. New doctype statement
The XHTML statement is too long. I believe few front-end developers can write this doctype Statement by hand.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"/>
The HTML5 doctype Declaration is very short. I believe you will be able to remember this declaration immediately. You don't have to waste brain cells to remember the long, abnormal XHTML doctype declaration.
<! Doctype HTML>
The brief doctype Statement of HTML5 enables modern browsers such as Firefox and chrome and IE6/7/8 to enter the standard mode, you may wonder that IE6/7 can also support HTML5 doctype. In fact, ie enters the standard mode as long as the doctype complies with this format.

2. <figure> label
Take a look at the following simple code:

<H6> image of Mars. </H6>
Unfortunately, the H6 label and the IMG label seem to have nothing to do with it, and the semantics is not clear enough. When HTML5 realized this, it adopted the <figure> label. When the <figure> combined with the <figcaption> label is used, the H6 label and the IMG label can be combined to make the code more semantic.
<Figure>

<Figcaption>
<H6> This is an image of something interesting. </H6>
</Figcaption>
</Figure>

3. Redefinition <small>
Not long ago, I used the <small> label to create a subtitle related to the logo. However, the <small> label is redefined in HTML5 to make it more semantic, And the font size of <small> will decrease, think about it if this tag is used for the copyright information at the bottom of the website.

4. removed the type attribute of the JavaScript and CSS labels.
Generally, you add the type attribute to <link> and <SCRIPT>:
<LINK rel = "stylesheet" href = "path/to/stylesheet.css" type = "text/CSS">
<SCRIPT type = "text/JavaScript" src = "path/to/script. js"> </SCRIPT>
In HTML5, the type attribute is no longer needed, because it is a bit redundant. after removal, the code can be simpler.

<Link href = "path/to/stylesheet.css">
<SCRIPT src = "path/to/script. js"> </SCRIPT>

5. Whether double quotation marks are used
This is a bit confusing. HTML5 is not xthml. You can save double quotation marks in tags. I believe that most of the comrades, including those I am used to adding double quotation marks, make the Code look more standard. However, you can decide whether to use double quotation marks based on your personal preferences.
<H6 class = "myclass" id = "someid"> Start the reactor. </H6>

6. Make the webpage content editable

 

This is a new function of HTML5. Adding a contenteditable attribute to the tag and setting the value to true can directly edit the content of the tag on the page, including the sub-level label content of this label. With this attribute, you can use this attribute to complete many tasks, such as editing a to-do list on a webpage.

<H6 contenteditable = "true"> Break mechanical cab <span> driver </span> </H6>

7. Email input box
The email attribute of an input box is added to hmtl5 to check whether the input content conforms to the email writing format. The function becomes more and more powerful. javascript can only be used for detecting the input content before HTML 5. Although the built-in form verification function will soon become a reality, this attribute is not supported by many browsers and will only be processed as a common text input box.

<Form method = "get">
<Label for = "email"> Email: </label>
<Input id = "email" name = "email" type = "email">
<Button> submit form </button>
</Form>

 

This attribute is not supported so far, including modern browsers, so it is still unreliable for the time being.

8. placeholders
Placeholders in the text box (look at the effects of the search box in this blog) help improve user experience. Previously, we had to rely on JS to implement the placeholder effect, and added the placeholder attribute placeholder in html5.

<Input name = "email" Placeholder = "doug@givethesepeopleair.com" type = "email">
Similarly, the current mainstream modern browsers do not support this attribute well. Currently, only chrome and Safari support this attribute. Firefox and opera do not support this attribute.

 

9. Local Storage
The local storage function of HTML5 enables modern browsers to "remember" What we input, even if the browser is closed and refreshed, it will not be affected. Although some browsers do not support this function, IE8, Safari 4, and Firefox 3.5 still support this function. You can test it.

 

10. More semantic headers and footer
The following code will no longer exist in HTML5

<Div id = "Header">
...
</Div>
<Div id = "footer">
...
</Div>

We usually define a div for the header and footer, and then add an ID. However, in HTML5, you can directly use the

<Header>
...
</Header>
<Footer>
...
</Footer>

Be sure not to confuse the two labels with the header and footer of the website. They only represent their containers.

11. Support for HTML5 by IE
Currently, Internet Explorer does not provide good support for HTML5, which is also a major obstacle to the faster popularization of HTML5. However, ie9 supports HTML5 well.
IE parses all the tags added to HTML5 into inline elements, but they are actually block-level elements, so it is necessary to define a style for them:

Header, footer, article, section, NAV, menu, hgroup {
Display: block;
}

However, ie still cannot parse the newly added HTML5 tags. At this time, JavaScript is needed to solve this problem:

Document. create_relement_x ("article ");
Document. create_relement_x ("footer ");
Document. create_relement_x ("Header ");
Document. create_relement_x ("hgroup ");
Document. create_relement_x ("nav ");
Document. create_relement_x ("menu ");

You can use this JavaScript code to fix IE's better parsing of HTML5

<! -->
<SCRIPT mce_src = "> </SCRIPT>
<! [Endif] -->

12. Title Group)
This is similar to the second tip. If the H1 and H2 tags are used to indicate the website name and Subtitle respectively, this will not associate the two closely related headers. In this case, you can use the

<Header>
<Hgroup>
<H1> recall fan page <H2> only for people who want the memory of a lifetime. </H2>
</Hgroup>
</Header>

13. Required Properties
The front-end personnel must have done a lot of Form Verification projects. One of the most important aspects is that some input boxes must be filled in. Javascript should be used to check the content here. In HTML5, a "mandatory" attribute is added: required. The required attribute can be used in two ways. The second method is more structured, while the first method is more concise.

<Input type = "text" name = "someinput" required>
<Input type = "text" name = "someinput" required = "required">

With this attribute, it is easier to submit and verify the form. Let's take a look at the following simple example:

<Form method = "Post">
<Label for = "someinput"> your name: </label>
<Input id = "someinput" name = "someinput" Placeholder = "Douglas Quaid" required = "required" type = "text">
<Button> go </button>
</Form>

 

If the input box is blank, the form cannot be submitted successfully.
14. automatically retrieve focus
Similarly, HTML5 does not require JavaScript to automatically obtain the focus of the input box. If an input box should be selected or get the input focus, HTML5 adds the autofocus attribute:

<Input name = "someinput" Placeholder = "Douglas Quaid" required = "required" type = "text">

Autofocus can also be written as "autofocus = autofocus", which looks more standard, depending on your personal preferences.
15. Audio Playback support
The <audio> tag is provided in HTML5 to solve the problem that in the past, you must rely on a third-party plug-in to play audio files. So far, only a few of the latest browsers support this tag.

<Audio tabindex = "0" controls = "controls">
<Source src = "file.ogg">
<Source src = "filepath">
<A href = "filepath"> download this file. </a>
</Audio>

Why are there two formats of audio files? Due to the difference in the format supported by firefoxand webkitviewer, firefoxonly supports .ogg files, while webkitonly supports ghost files. The solution is to create two versions of audio files so that they can be compatible with Firefox and WebKit browsers. Note that IE does not support this label.
16. Video Playback support
Like the <audio> tag, HTML5 also supports the <video> tag to play video files. Youtube also announced a new HTML5 video embedding. However, unfortunately, the HTML5 specification does not specify a specific video decoder, but allows the browser to decide on its own. This causes a browser compatibility problem, although both safari and ie9 support H. 264 format video (flash players can play), Firefox and Opera support open-source theora and Vorbis formats. Therefore, you must prepare two formats when displaying HTML5 videos.

<Video tabindex = "0" controls = "controls" preload = "">
<Source src = "cohagenphonecall. OGV" type = "Video/Ogg; codecs = 'vorbis, theora '">
<Source src = "cohagenphonecall.mp4" type = "Video/MP4; 'codecs = 'avc1. 42e01e, mp4a. 100'">
<Div> your browser is old. <a href = "cohagenphonecall.mp4"> download this video instead. </a> </div>

</Video>

It should be noted that although the type attribute can be omitted, if it is added, the browser can parse the video file more quickly and accurately. Not all browsers support HTML5 videos, so you must use the flash version instead. Of course, this is your decision.
17. Pre-load video
Preload attributes: preload. First, determine whether to preload the video. If a visitor accesses a page with many videos displayed, it is necessary to preload a video, this saves the visitor's waiting time and improves the user experience. You can add a preload attribute to the <video> label to implement the preload function.

<Video tabindex = "0" preload = "preload">
...
</Video>

18. display controlsThe display control attribute allows you to add a pause control to a video. Note that the display effect of each browser may be different.

<Video tabindex = "0" preload = "preload" controls = "controls">
...
</Video>

19. Use Regular Expressions
In HTML5, we can directly use regular expressions.

<Form action = "" method = "Post">
<Label for = "username"> Create a username: </label>
<Input name = "username" id = "username" Placeholder = "4 <> 10" pattern = "[A-Za-Z] {4, 10}" required = "required" Type = "text">
<Button type = "Submit"> go </button>
</Form>

20. Check the browser's support for HTML5 attributes
Different browsers have different support for HTML5 attributes, which causes some compatibility problems. However, you can use the method to check whether the browser supports these attributes. If the code in the previous example is to check whether the pattern attribute is recognized by the browser, you can use JavaScript code to check the pattern attribute.

1 alert ('pattern' in document. create_relement_x ('input') // Boolean;

In fact, this is a common method for determining browser compatibility. This method is often used by the jquery library. The above Code creates an input tag and checks whether the pattern attribute is supported by the browser. If it is supported, the browser supports this function; otherwise, it does not.

<SCRIPT>
If (! 'Pattern' in document. create_relement_x ('input ')){
// Do client/server side validation
}
</SCRIPT>

21. Mark tag
<Mark> A tag is used to highlight the text that needs to highlight its importance to the user visually. The strings enclosed in the tag must be related to the user's current behavior. For example, if I search "Open your mind" in some blogs, I can use JavaScript in the <mark> label to wrap each action.

<H3> Search Results <H6> they were interrupted, just after quato said, <mark> "Open your mind" </mark>. </H6>

22. How to correctly use the DIV tag
Some people may have doubts. DO <div> tags still be used in HTML5 with Many people think that HTML5 may still be far away, so they simply ignore it. In fact, many websites are now using HTML5. In fact, some new HTML5 attributes and functions make the code more concise, which is always a good thing and deserves our praise. Finally, thank you for reading this HTML5 entry-level article, hoping to help you learn more about HTML5.