28 HTML5 features, tips and techniques

The front end of the development of such a rapid, an inattentive, heroes you may be far away in the back. If you don't want to be overwhelmed by HTML5 changes/updates, you can take this article as a warm-up course that must be understood.

One, the new DOCTYPE
//zxx: "doctype" Chinese meaning refers to "document type"

Still using the troublesome, impossible to remember XHTML document type?

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.html5cn.org/" > If so, why is it still in use? Replace it with the new HTML5 document type. You're going to live longer--as Douglas Quaid said.

<! DOCTYPE html> I was thinking, in order to HTML5 this code, you may be on the code is not reliable to express doubt. Don't worry, it's doable today, only the older browsers need a specific DOCTYPE (document type). If the browser does not know DOCTYPE, it will simply render the included tags in standard mode. So, sister, you go ahead boldly, and caution with caution, to embrace the new HTML5 document type.

second, graphic elements (the Figure element)
take a look at the following label to add to the picture:

<p>image of Mars. </p> text wrapped in the P tag, and the IMG tag each way, it is difficult to make people think that this is the title. The HTML5 is corrected by using the <figure> element. When combined <figcaption> elements are used together, we can semantically associate this with the title of the picture.

<figure> <figcaption> <p>this is an image of Somethi Ng interesting. </p> </figcaption> </figure>
Iii. <small> re-definition
not too long ago.,<small> elements are used to create subtitles that are close to the logo and related. This is a very useful performance element, but, now, this usage may not be correct. <small> elements have been redefined to refer to the small print and thus more usability. Imagine the copyright status at the bottom of your site, and,<small> can properly wrap this information according to the new HTML5 definition of the element.

The small element refers to "small print".

Iv. scripts (scripts) and links (link) do not require type
you may still be adding the type attribute to the link and script tags.

<link rel= "stylesheet" href= "Path/to/stylesheet.css" type= "Text/css"/> <script type= "Text/javascript" src= " Path/to/script.js "></script> This is already an old day lily, not a necessity. This means that each of these labels points to the style sheet and script. So we can kill the type attribute together.

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

Five, quotes or no quotes
... This is really a problem. Remember, HTML5 is not XHTML, and if you don't want to, you don't have to enclose your attributes in quotes, there's no need to close the elements. In other words, as long as you feel comfortable, there is no right or wrong point. This is true for me.
<p id=someid> Start the reactor. You have to make up your own mind about this choice. If you are more inclined to structured documents, keep the quotes firmly in your arms even if the sky collapses.

Vi. content can be edited




the newest browser has a nice new attribute that can be applied to the element, called Contenteditable. As implies means to allow the user to edit any text contained in the element's content, including child elements. There are a number of similar uses, such as a simple to-do list application that can take advantage of its local storage.

<ul contenteditable= "true" > <li> mourning Hong Kong compatriots </li& <li> Shenzhen SEZ 30 Anniversary </li> <li> Yichun air crash </ Li> </ul> or, based on some of the techniques we've learned before, we can write it as:

<ul contenteditable=true<

Seven, email input (inputs)
If we apply the type attribute named "email" to the form input box, we can command the browser to allow only strings that match a valid e-mail address structure. Yes, the built-in form validation is coming, for some obvious reason, we're not 100% reliant on built-in validation, older browsers don't recognize this "email" type, and they simply fall back into the normal text box.

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

ZXX: After my small test, seemingly only in the Chrome browser effect (XP system), when the input is not a legitimate mailbox format, click "OK" button is not responding; When entered as a legitimate mailbox, click the "OK" button to submit the Refresh page.

For now, we cannot rely on browser validation, and client/server validation is required.
It should also be noted that all current browsers are a bit unreliable when it comes to which elements and attributes are supported and unsupported. For example, opera seems to support e-mail authentication, but only when the Name property is specified. Also, it doesn't support placeholder properties, which we'll learn later. The bottom line is not dependent on this form of validation ... But you can still use it!

Viii. placeholder (placeholders)
//ZXX: This content is not literal translation, has the deletion
What do you mean, placeholders? text box/text field space by default there is a text hint, and when the focus is received, the prompt text disappears; If the content is empty when the focus is lost, the prompt text appears again. As shown in the following illustration:



Some of the suggestive text displayed inside these form controls is placeholders. In the past, we need to use a bit of JavaScript code to implement placeholder effects, such as my previous text box/field text prompts automatically show hidden jquery widgets, as shown in the article. Of course, you need to set an initial default value, and then based on the input to determine whether the text box value changes or not. If you use the placeholder (placeholders) property, everything is easy.

<label for= "Email" > Email:</label> <input id= "email" type= "email" placeholder= "zhangxinxu@zhangxinxu.com" "Size="/> According to my test, currently only WebKit core browsers support placeholders properties, such as CHROME5,SAFARI4, and the results are as follows:

Ix. Local Storage (locally Storage) thanks to local storage (informal HTML5, for easy inductive purposes), we can allow advanced browsers to remember our edited content, even if the browser is turned off or the page refreshes.

ZXX: The original video default display is YouTube video, not over the wall can not see, so, here, show from another site of the videos. Suggest Full-screen viewing to see the HTML and JavaScript code in it

ZXX: According to the video content, I did a demo, about local storage.

The IE8 browser already supports local storage, as shown in the screenshot below:

While it's obvious that we don't support all browsers, we can look forward to this work in Safari 4 and Firefox 3.5 when the Internet Explorer8. Note that in order to make up for the old browser will not recognize local storage, you should first test to determine whether the window.localstorage exists.