22 Basic skills of beginner HTML5

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>
 
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 "email" id= "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.
 
 
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 
 
 
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 {
display:block;
}
 
Still, ie can't parse these new HTML5 tags, and it's time to use JavaScript to solve the problem:
 
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 better parsing HTML5
 
  <script mce_src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" >
</script>  
 
12. Title Group (hgroup)
 
This is similar to the 2nd trick. If you use the H1 and H2 tags to represent the name and subtitle of a Web site, it does not correlate to the two headings that are closely related to the original meaning. This time you can use the 
 
 
13. Required Property
 
The front end staff must have done a number of forms validation items, and it is important that some of the input boxes must be filled in, and here you need to use JavaScript to check. In HTML5, a new "must fill" attribute is added: required. There are two ways to use the required attribute, the second is more structured, and the first is more concise.
 
<input type= "text" name= "Someinput" required> <input type= "
text" name= "Someinput" required= "required" >
 
With this attribute, making the form's submit verification easier, 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 will fail to commit successfully.
 
14. Automatically get focus
 
Similarly, HTML5 no longer needs JavaScript to solve the automatic focus of the input box, and if an input box should be selected or acquired into the input focus, HTML5 has added the automatic get focus attribute autofocus:
 
<input type= "text" name= "Someinput" placeholder= "Douglas Quaid"
required= "required" autofocus= "autofocus" >
 
Autofocus can also be written as "Autofocus=autofocus", which looks standard, depending on your personal preferences.
 
15. Support for audio playback
 
The <audio> tag is provided in the HTML5, which solves the problem of having to rely on Third-party plug-ins to play audio files in the past. So far, only a handful of the latest browsers support the label.
 
<audio controls= "Controls" autoplay= "AutoPlay" >
<source src= "File.ogg"/> <source "src="
File.mp3 "/> <a href= File.mp3" >download this
file.</a>
</audio>
 
Why are there two forms of audio files? Because the formats supported by Firefox and WebKit browsers are different, Firefox can only support. ogg files, while WebKit only supports. mp3 files, the solution is to create two versions of audio files, so that you can be compatible with Firefox and WebKit browser, it should be noted that IE does not support the label.
 
16. Support for video playback
 
Like <audio> tags, HTML5 also provides <video> tag support for playing video files. YouTube has also announced a new HTML5 video embedding. Unfortunately, the HTML5 specification does not specify a specific video decoder, but rather lets the browser decide for itself. This creates a compatibility problem with browsers, although both Safari and IE9 support H.264 format video (Flash player can play), Firefox and opera support open source Theora and Vorbis formats. Therefore, when HTML5 video is displayed, there are 2 different formats to be prepared.
 
  <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 are old
. <a href= ' Cohagenphonecall.mp4 ' >
Download this video instead.</a> </div>  </video>  
 
Note that the type attribute can be omitted, but if added, the browser can parse the video file more quickly and accurately. Not all browsers support HTML5 video, so use the Flash version instead, and of course the decision rests with you.
 
17. Pre-loading video
 
Preload properties: Preload, first of all to determine whether the need to preload the video, if visitors visit a lot of video display of the page, then it is necessary to preload a video, which can save the waiting time for visitors, improve the user experience. You can add a preload property to the <video> tag to implement the preload feature.
 
<video preload= "preload" > ...  </video>
 
18. Display control
 
Display control properties You can add a control that plays a pause to the video, and you need to be aware that the effects that each browser displays may be somewhat different.
 
<video controls= "Controls" preload= "preload" > ...  </video>
 
19. Using Regular expressions
 
In HTML5, we can use regular expressions directly.
 
<form method=post action= "" >
<label for= "username" >create a username: </label>
<input ID = "username" type= "text" name= "username placeholder=" 
4 <> "required=" required "autofocus=" 
 Autofocus "pattern=" [a-za-z]{4,10} ">
<button type=" Submit ">go </button>  </form>
 
20. Detect browser support for HTML5 properties
 
Because browsers have different support for the HTML5 property, this creates some compatibility issues. However, you can use methods to detect whether the browser supports these properties, and the code in the above example can be detected by using JavaScript code if you want to detect whether the pattern property is recognized by the browser.
 
Alert (' Pattern ' in document.createelement (' input '))//Boolean;
 
In fact, this is a common way to determine browser compatibility, the jquery library is often used in this way. The above code creates an input tag and detects whether the pattern property is supported by the browser, or if it supports it, otherwise it is not supported.
 
<script>
if (! ') Pattern ' in document.createelement (' input ')]
 {//do client/server side validation   }  </script>
 
Mark Label
 
<mark> tags are used to highlight text that needs to visually highlight the importance of the user, and the strings wrapped in this tag must be related to the user's current behavior. For example, if I search for "Open your Mind" In some blogs, I can use JavaScript in <mark> tags to wrap each action.
 
  
 
22. How to use the div tag correctly
 
Some people may have doubts, with the 
 
Many people think that HTML5 may still be very distant things, so direct disregard, it is not, now many sites have started to use HTML5, in fact, HTML5 some new properties and functions is to make the code more concise, this is always a good thing, should be worthy of our admiration. Finally, thank you for reading this HTML5 entry-level article, hoping to provide some help for your further study HTML5.