The common characteristics of HTML5 XV

　　HTML5 Presumably everyone is familiar, because too many media are discussing this technology. However, can you tell exactly what new features HTML5 brings? This article summarizes the 15 new features that HTML5 brings to you.

Take a look at the following:

　　1. New Document type (Doctype)

Many web pages are still using XHTML 1.0 and are declaring document types like this on the first line:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

In HTML5, the above declaration will fail. Here's how to declare in HTML5:

<! DOCTYPE html>

　　2. Scripts and links do not need type (no more Types for Scripts and links)

In HTML4 or XHTML, you need to use the following lines of code to add CSS and JavaScript files to your Web page.

<link rel= "stylesheet" href= "Path/to/stylesheet.css" type= "Text/css"/>

<script type= "Text/javascript" src= "Path/to/script.js" ></script>

In HTML5, you no longer need to specify the type attribute. Therefore, the code can be simplified as follows:

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

<script src= "Path/to/script.js" ></script>

　　3. Semantic header and Footer (the semantic header and Footer)

In HTML4 or XHTML, you need to use the following code to declare "Header" and "Footer".

<div id= "Header" >

...

<P>

..........

<div id= "Footer" >

...

<P>

In HTML5, there are two elements that can override the above declaration, which makes the code simpler.

...

<footer>

...

</footer>

　　4.Hgroup

In HTML5, there are many newly introduced elements, Hgroup is one of them. Assuming my site name follows a sub title, I can define it separately with the

In HTML5, we can use Hgroup elements to group them so that the outline of the file is not affected.

　　5. Tag elements (mark Element)

You can think of it as a highlight tag. The string that is decorated with this tag should be relevant to the user's current action. For example, when I search for "Open your Mind" In a blog, I can use some of the phrases that JavaScript will appear to use <mark> modify.

<p> They were interrupted, just after Quato said, <mark> "Open your Mind" </MARK> </p>

　　6. Graphical elements (Figure Element)

In HTML4 or XHTML, the following code is used to decorate the annotation of a picture.

<p>image of Mars. </p>

However, the above code does not relate text to the picture inside. As a result, HTML5 introduced <figure> elements. When combined with <figcaption>, we can semantically associate annotations with corresponding pictures.

<figure>

<figcaption>

<p>this is an image of something interesting. </p>

</figcaption>

</figure>

　　7. Redefining <small> (small Element redefined)

The,<small> element already exists in HTML4 or XHTML. However, there is no complete description of how to use this element correctly. In HTML5,,<small> is used to define small print. Think of the copyright status at the bottom of your site, and,<small> can interpret the information correctly based on the new HTML5 definition of the element.

　　8. Placeholder (placeholder)

In HTML4 or XHTML, you need to use JavaScript to add placeholders to text boxes. For example, you can set up some information in advance, and when the user starts typing, the text in the textbox disappears.

In HTML5, the new "placeholder" simplifies the problem.

　　9. Necessary attributes (Required attribute)

The new attribute "required" in HTML5 Specifies whether an input is required. There are two ways of declaring this property.

<input type= "text" name= "Someinput" required>

<input type= "text" name= "Someinput" required= "required" >

When a text box is specified, the form cannot be submitted if it is blank. Here is an example of how to use it.

<form method= "POST" action= "" >

<label for= "Someinput" > Your Name: </label>

<input type= "text" id= "Someinput" name= "Someinput" placeholder= "Douglas Quaid" required>

<button type= "Submit" >Go</button>

</form>

In the example above, if the input is empty and the table is submitted, the input box will be highlighted.

　　10.Autofocus Property (Autofocus attribute)

Similarly, the HTML5 solution eliminates the need for JavaScript. If a particular input should be "select" or focus, by default, we can now take advantage of the autofocus attribute.

<input type= "text" name= "Someinput" placeholder= "Douglas Quaid" required autofocus>

　　11.Audio Support (Audio Support)

Currently we need to rely on Third-party plug-ins to render audio. In HTML5, however,,<audio> elements were introduced.

<audio autoplay= "AutoPlay" controls= "Controls" >

<source src= "File.ogg"/>

<source src= "File.mp3"/>

<a href= "File.mp3" >download this file.</a>

</audio>

Remember to include two audio formats when using <audio> elements. Firefox wants a file in the. ogg format, while the WebKit browser needs the. mp3 format. As always, IE is not supported, and opera 10 and the following versions only support the. wav format.

　　12.Video Support (video Support)

There are not only <audio> elements in HTML5, but also <video>. However, like <audio>, HTML5 does not specify a video decoder, it is left to the browser to decide. While Safari and Internet Explorer9 can support H.264 format video, Firefox and opera are sticking to open source Theora and Vorbis formats. Therefore, when you specify HTML5 video, you must provide both of these formats.

<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 ' "/>

<p> Your browser is old. <a href= "Cohagenphonecall.mp4" >download this video instead.</a> </p>

</video>

　　13. Video Pre-download (preload attribute in videos Element)

This property allows the video to be preloaded when the user accesses the page. In order to achieve this function, you can add preload= "preload" to the <video> element or just preload.

<video preload>

　　14. Show control bar (display Controls)

If you have used each of the above mentioned technical points, you may have noticed that using the above code, the video only shows a picture, no control bar. In order to render the playback control bar, we must specify the controls attribute within the video element.

<video preload controls>

　　15. Regular Expressions (Regular Expressions)

In HTML4 or XHTML, you need to use some formal expressions to validate specific text. The new pattern attribute in HTML5 allows us to insert a regular expression directly into the label.

<form action= "" method= "POST" >

<label for= "username" >create a username: </label>

<input type= "Text"

Name= "username"

Id= "username"

Placeholder= "4 <> 10"

Pattern= "[a-za-z]{4,10}"

Autofocus

Required>

<button type= "Submit" >go </button>

</form>

　　Conclusion

In fact, there are a lot of new elements and features, mentioned above are just some I think the site is commonly used in development, the rest of you to explore the.