Must know the new features, techniques and techniques of HTML5

To sum up:

1. The new DOCTYPE

Despite the use of <! DOCTYPE Html>, even if the browser does not understand this sentence will be in accordance with the standard mode to render

2. Figure elements

Use <figure> and <figcaption> to semantically represent pictures with captions

<figure>

<figcaption>

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

</figcaption>

</figure>

3. Redefined <small>

<small> has been redefined and is now used to represent small typography, such as the copyright notice at the bottom of the site

4. Remove the type attribute in link and script tags

5. Plus/no parentheses

HTML5 No strict requirements attributes must be quoted, closed, but with quotes and closed tags recommended

6. Let your content editable, only need to add a contenteditable property

7. Email Inputs

If we set the input to the type of email, the browser will verify that the input is the type of email, of course, can not only rely on the front end of the check, the back end must have a corresponding check

8. Placeholders

The meaning of this input attribute is that it does not have to be placeholder by JavaScript.

9. Local Storage

Using local storage can permanently store large pieces of data on the client (unless active deletion), most browsers are currently supported, before use to detect the existence of window.localstorage

10. semantically Header and footer

11. More HTML5 Form Features

IE and HTML5

By default, HTML5 new elements are rendered in a inline manner, but you can use the following method to

It is rendered in block mode

Header, footer, article, section, Nav, menu, Hgroup {

Display:block;

}

Unfortunately, IE ignores these styles and can fix it like this:

Document.createelement ("article");

Document.createelement ("footer");

Document.createelement ("header");

Document.createelement ("Hgroup");

Document.createelement ("Nav");

Document.createelement ("menu");

Hgroup

Typically used in header to group together a set of headings, as

Required Properties

The required attribute defines whether an input is required and you can declare it as follows

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

Or

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

Autofocus Properties

As its meaning, is to focus on the input box inside

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

Audio Support

HTML5 provides <audio> tags, you do not need to follow the Third-party plug-ins to render audio, most modern browsers provide support for HTML5 audio, but still need to provide some compatible processing, such as

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

<source src= "File.ogg"/><!–ff–>

<source src= "file.mp3″/><!–webkit–>

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

</audio>

Video support

And audio is much like the,<video> tag provides support for video, because the HTML5 document does not specify a specific encoding for the show, so browsers decide which encodings to support, resulting in a lot of inconsistencies. Safari and IE support H.264 encoded formats, Firefox and opera support Theora and Vorbis encoded formats, and when using HTML5 video, you must provide:

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

18. Pre-loading video

The Preload property is as simple as its literal meaning, and you need to decide whether to preload the video when the page loads

<video preload>

19. Display Video Control

<video preload controls>

20. Regular Expressions

Because of the pattern attribute, we can use regular expressions directly in your markup.

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

21. Detection attribute Support

In addition to Modernizr, we can easily detect the support of some properties through JavaScript, such as:

<script>

if (! ' Pattern ' in document.createelement (' input ')} {

Do Client/server side validation

}

</script>

Mark elements

Consider the <mark> element as a highlight, and when I choose a text, JavaScript's markup effect on HTML should be this:

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

23. When to use <div>

HTML5 has introduced so many elements, so div do we need it? div You can use when there are no better elements.

24. Want to use HTML5 immediately?

Don't wait 2022, you can use it now, just do it.

25. What is not HTML5

1) SVG

2) CSS3

3) geolocation

4) Client Storage

5) Web Sockets

Data property

<div id= "mydiv" data-custom-attr= "My Value" > Bla Bla </div>

Used in CSS:

<style>

H1:hover:after {

Content:attr (Data-hover-response);

Color:black;

Position:absolute;

left:0;

}

</style>

Output element

The <output> element is used to display the results of the calculation, and there is a for property like the label

28. Use range input to create sliders

The range type referenced by HTML5 can create sliders that accept the Min, Max, step, and Value properties

You can use CSS: Before and: After to display the Min and Max values

<input type= "range" name= "range" min= "0″max=" 10″step= "1″value=" ">

Input[type=range]:before {content:attr (min); padding-right:5px;

}

Input[type=range]:after {content:attr (max); padding-left:5px}