22 Primary tips for HTML5

Web technology is growing so fast that if you don't keep up with the times, you'll be eliminated. Therefore, in order to deal with the upcoming HTML5, this article summed up 22 HTML5 of the primary skills, I hope that you can further study good HTML5 will help.

1. The new DOCTYPE statement

The XHTML declaration is too long, and I'm sure there are very few front-end developers who can write this DOCTYPE statement.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

HTML5 's DOCTYPE statement is short, and seeing this statement believes that you will soon remember not wasting brain cells to remember the long, somewhat perverted XHTML DOCTYPE statement.

<! DOCTYPE html>

HTML5 's brief Doctype statement is to allow browsers such as Firefox, Chrome, and IE6/7/8 to enter standard mode, and you may be surprised that IE6/7 can support HTML5 Doctype, in fact, IE is the standard mode as long as the DOCTYPE conforms to this format.

2. <figure> Label

Take a look at the following simple code:

Unfortunately, there seems to be no relationship between the H6 tag and the IMG tag, and the semantics are not clear enough. HTML5 realized this, so he adopted the <figure> tag. When the <figure> combination <figcaption> tag is used, the H6 tag and the IMG tag can be combined to make the code more semantic.

<figure> <figcaption> </figcaption> </figure>

3. Redefining <small>

Not long ago, I used the <small> tag to create a subtitle related to the logo. But redefining the <small> tag in HTML5 makes it more semantic, the size of the <small> is smaller, and it's a good idea to use the label for copyright information at the bottom of the site.

4. Remove the JavaScript and CSS label type attribute

Typically you will add the type attribute in <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 and can be removed to make the code more concise.

<link href= "Path/to/stylesheet.css" > <script src= "Path/to/script.js" ></script>

5. Whether to use double quotes

This is a bit of a tangle, HTML5 is not xthml, you can omit the double quotes in the tag. I'm sure most comrades, including me, are used to adding double quotes because it makes the code look more standard. However, this can be based on your personal preferences to determine whether or not double quotes.

6. To make the content of the Web page editable

7. E-Mail input box

HMTL5 added an input box of e-mail properties, you can detect the input of the content is consistent with the written format of e-mail, more and more powerful, it can only rely on JS HTML5 before detection. Although the built-in form verification feature will soon become a reality, this attribute is not supported by many browsers, but is treated as a normal text entry box.

<form method=get> <label for= "Email" >email:</label> <input id= "Email" type= "email" name= "Email" > <button type= "Submit" > Submit Form </button> </form>

So far, including modern browsers do not support this property, so this property is temporarily unreliable.

8. Placeholder

The placeholder in the text box (see the Search box effect of this Bo) is conducive to enhance the user experience, before we can only rely on JS to achieve the effect of placeholders, in the HTML5 new placeholder property placeholder.

<input type= "Email" name= "email" placeholder= "doug@givethesepeopleair.com" >

Similarly, the current mainstream modern browser support for this property is not good, temporarily only Chrome and Safari support this attribute, Firefox and opera do not support this property.

9. Local Storage

HTML5 's local storage capabilities allow modern browsers to "remember" what we have entered, even if the browser is closed and refreshed. Although some browsers do not support this feature, IE8, Safari 4, and Firefox 3.5 still support this feature, you can test it.

10. More semantically Header and footer

The following code will no longer exist in the HTML5

<div id=header> ... </div> <div id=footer> ... </div>

Usually we will define a div for header and footer, and then add an ID, but in HTML5 you can use the

... <footer> ... </footer>

Be careful not to confuse the two labels with the header and footer of the site, they are just the containers that represent them.

The support of IE to HTML5

IE browser current support for HTML5 is not good, but also hinder the HTML5 of the rapid popularization of a major stumbling block, however, IE9 HTML5 support is still very good.

IE parses HTML5 's new tags into inline elements, which are actually block-level elements, so it is necessary to define a style for them:

Header, footer, article, section, Nav, menu, Hgroup { br>    Display:block; }