HTML5 new Features

HTML5 has appeared for a long time, there are many related to the Internet, I do not want to write more than a whole lot of fine, just want to summarize something to keep their own slowly look, ah ha!!!

1. The new DOCTYPE

Although using <! 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 a picture with a title

1 < Figure> 2 <imgsrc= "" Path/to/image ""alt= "about" /> 3 <figcaption> 4 This is an image of something interesting. 5 </figcaption> 6 </ Figure> 

3. Redefined

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 from the link and script tags

5. Add/No parentheses

HTML5 There are no strict requirements attributes must be quoted, closed and not closed, but it is recommended to enclose quotes and closed labels

6. To make your content editable, just add a contenteditable property

7. Email Inputs

If we set the type of input to e-mail, the browser verifies that the input is an email type, not just the front-end checksum, and the backend has to have a corresponding checksum.

8. Placeholders

The meaning of this input property is that you don't have to do placeholder with JavaScript.

9. Local Storage

With the local storage you can permanently store large pieces of data on the client side (unless actively deleting), most browsers are now supported and can be detected before use

Whether Window.localstorage exists

10. Semantic Headers and Footer

11. More HTML5 Form Features

IE and HTML5

By default, HTML5 new elements are rendered inline, but can be rendered in block mode in the following way

{Display: block;}

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

Document.createelement ("article");d ocument.createelement ("footer");d ocument.createelement ("header"); Document.createelement ("Hgroup");d ocument.createelement ("Nav");d ocument.createelement ("menu");

Hgroup.

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

 <  header  ><  hgroup  >  <  h1  >  Recall Fan page</ >  <  h2  >  only for people who want the memory of a lifetime. </ h2  >  </ hgroup  ></ header  >  

. Required Properties

The Required property defines whether an input is required, and you can declare it as follows

<type= "" "Text" "  name=" "Someinput" "/>  or <  type= "" "Text" "  name=" "Someinput" "/>

The. Autofocus Property

As its meaning is, it's focused on the input box.

<type= "" "Text" "  name=" "Someinput" "/>

. Audio Support

HTML5 provides tags, you don't need to follow third-party plug-ins to render audio, most modern browsers offer support for HTML5 audio, but there are still some compatibility processing to be provided.

. Video Support

Like audio, the tag provides support for video, because the HTML5 document does not specify a specific encoding for video, so the browser decides which encodings to support, causing a lot of inconsistencies. Safari and IE support the encoded format of H. Theora and Vorbis encoded format, Firefox and Opera, when using HTML5 video, you must provide:

</Pre> <Videowidth= " the"Height= "+"Controls= "Controls"preload= "preload"><Sourcesrc= "" Cohagenphonecall.ogv ""type= "Video/ogg;" /><Sourcesrc= "Cohagenphonecall.mp4″"type= "VIDEO/MP4;" />Your Browser is old.<ahref= "Cohagenphonecall.mp4″">Download this video instead.</a>  </Video> <Pre> 

18. Pre-load Video

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

19. Display Video Control

20. Regular Expressions

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

</Pre> <formAction= "" ""Method= "" Post ""> <label for= "" Username "">Create a Username:</label>  <inputID= "" Username ""type= "" Text ""name= "" Username "" />10″pattern= "[a-za-z]{4,10}" autofocus required><Buttontype= "Submit" ">Go</Button></form> <Pre> 

21. Detection attribute Support

In addition to Modernizr, we can easily detect whether some properties are supported by JavaScript, such as:

<Scripttype= "Text/javascript">//<! [Cdata[if (!' pattern 'inchdocument.createelement (' input ')) {   //Do client/server side validation }  //]]></script>

Mark Element

Think of the <mark> element as a highlight, and when I select a piece of text, the markup effect of JavaScript on HTML should look like this:

< H3 > Search Results</h3>  <Mark>" Open your Mind "</mark>

23. When to use

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

24. Which is not HTML5

1) SVG2) CSS33) Geolocation4) Client Storage5) Web Sockets

. Data property

</ Pre > <  ID= "Mydiv " " data-custom-attr=" "My">bla bla</  div><pre>

Used in CSS:

</ Pre > <  data-hover-response= "I">Don ' t Touch Me</H1>  <pre>

. Output element

element is used to display the result of the calculation, and there is a for property like the label

27. Create a slider with range input

The range type referenced by HTML5 can create a slider that accepts Min, Max, step, and Value properties
You can use CSS: Before and: After to display the values of min and Max

<type= "Range" "  name=" "Range" "  value=" "" " /> Input[type=range]:before {content:attr (min); padding-right:5px;  

HTML5 new Features