22 basic HTML5 skills

Source: Internet
Author: User
Tags button type

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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 SectionCode:

 
 <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 type = text/CSS href = "path/to/stylesheet.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 id = someid class = myclass> Start the reactor.

6. Make the webpage content editable

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 type = Email name = Email> <button type = submit> 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 type = Email name = Email placeholder = "doug@givethesepeopleair.com">

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>...  

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. createelement ("article"); document. createelement ("footer"); document. createelement ("Header"); document. createelement ("hgroup"); document. createelement ("nav"); document. createelement ("menu ");

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

 
<SCRIPT mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </SCRIPT>

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>  

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 type = text name = someinput placeholder = "Douglas Quaid" required = "required"> <button type = submit> 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 type = text name = someinput placeholder = "Douglas Quaid" required = "required" autofocus = "autofocus">

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 controls = "controls" autoplay = "autoplay"> <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 controls preload> <source src = "cohagenphonecall. OGV "type =" Video/Ogg; codecs = 'vorbis, theora '"/> <source src =" cohagenphonecall.mp4 "type =" Video/MP4; 'codecs = 'avc1. 42e01e, mp4a. 40.2 '"/> <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 preload = "preload">... </video>

18. display controls

The 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 controls = "controls" preload = "preload">... </video>

19. Use Regular Expressions

In HTML5, we can directly use regular expressions.

 
<Form method = post action = ""> <label for = username> Create a username: </label> <input id = username type = text name = username placeholder = "4 <> 10" required = "required" autofocus = "autofocus" pattern = "[A-za -Z] {4, 10} "> <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.

 
Alert ('pattern' in document. createelement ('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. createelement ('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  

22. How to correctly use the DIV tag

Some people may have doubts. DO <div> tags still be used in HTML5 with ArticleOr a navigation menu, we recommend that you use the <Article> and <nav> labels with more semantics.

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.

Original ENGLISH
Translation: Rain night with knife's blog
Link: http://stylechen.com/22-html5-tips.html
If you need to reprint it, please specify the original or original address in the form of a link.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.