H5 new Feature Finishing

1. Simplified document type and character set

(1) Document type

<! DOCTYPE html>

The reason for this is that HTML5 is no longer part of SGML (Standard generalized Markup language, standardized universal Markup language), but is a separate markup language that does not require any further consideration of document types

(2) Character set

<meta charset= "UTF-8" >

All you need is a utf-8.

2. A new and semantically rich structure element

<H1>HTML5 New Structure 
<nav> Navigation Section </nav>
<p></p>

<section>    。。。 </section>
<footer>
　　
</footer>

　　 Section element can be considered Div is a Section Elements , a common chunking element that can be used to define specific, distinguishable areas of a site

　　Header elements include headings, logo , navigation, and other header content, you can add multiple Header , just like adding multiple headings to the content

　　Hgroup Element in which the element will be grouped by title

　　Footer element Copyright notice and author Information , Inclusion of links

　　nav elements are mainly used in the main navigation menu

　　article elements that are independently documented and reused in other formats should be placed in a article element in

　　aside elements used to encompass content around the contents

3. Add inline elements

　　

<figure>    <p> Pictures </p>    </figure>

　　 Figure A typical use of an element is to include an image , code and other content to explain the main content, delete does not affect the main content

　　figcaption elements are used primarily for Figure the title

　　Mark element is highlighted to represent the referenced content, or highlights content related to the user's current activity, unlike en or Strong Elements

　　 Time element, when you need to display the time or date in the content, it is recommended to use the Time Elements

　　 Time element can contain two attributes, a datetime represents the exact date and family specified in the element, pubdate indicates when an article or an entire document is published Time the date and time specified by the element

　　Meter elements are used to define weights and measures, specify the maximum minimum width, and usually work together with CSS, with the following effects:

　　Progress the element is used to define a progress bar with two properties of max (completion value) and value (the current value of the progress bar).

4. Support Dynamic page 1) menu <menu>

Used for the list of organization controls in the form, the following properties are commonly used:

To define an example of a selection list:

<menu>    <li><input type= "checkbox"/>a</li>      <li><input type= "checkbox"/ >b</li>      <li><input type= "checkbox"/>c</li> </menu><!--Current mainstream browsers are not supported--

2) Right-click menu <menitem>

　

3) Use the async attribute in the <script> tab

Script for specifying asynchronous execution

4) <detail> elements

Details used to describe a part of a document or document

<details>    <summary>details</summary>    <p> to describe document details <p></details>

Effect:

　　

After expansion:

　　

5. The new form design HTML5 the newly Input type

HTML5 has a number of new form input types. These new features provide better input control and validation.

• Email
• Url
• Number
• Range
• Date pickers (date, month, week, Time, DateTime, datetime-local)
• Search
• Color

New form elements for HTML5:

• DataList
• Keygen
• Output

The new form property:

• AutoComplete
• Novalidate

The new input property:

• AutoComplete
• Autofocus
• Form
• Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
• Height and width
• List
• MIN, Max and step
• Multiple
• Pattern (regexp)
• Placeholder
• Required

The AutoComplete property specifies that the form or input field should have auto-complete functionality.
When the user starts typing in the AutoComplete field, the browser should display the fill-in options in that field:
Instance:

<form action= "/example/html5/demo_form.asp" method= "Get" autocomplete= "on" >
First Name:<input type= "text" name= "fname"/><br/>
Last Name: <input type= "text" name= "lname"/><br/>
E-mail: <input type= "email" name= "email" autocomplete= "off"/><br/>
<input type= "Submit"/>
</form>

<p> please fill in and submit this form, then reload the page to see how the AutoComplete feature works. </p>

Results:

6. Powerful drawing function and multimedia function

1) Canvas can dynamically draw a variety of effects of beautiful graphics, combined with JS can make the Web page graphics moving up

2) SVG draws scalable Vector graphics

3) Audio and Video can be played without any plugins

7. Create a series of new features for desktop applications

Offline cache Web Storage( provides the foundation for HTML5 development of mobile apps)

In traditional web applications, data processing is handled by the server,theHTML is only responsible for displaying the data, thecookie can only store a small amount of data, and cross-domain communication can only be Web server.

HTML5 expands file storage capabilities, up to 5MB, supports lightweight databases such as Websql, and can be developed to support offline Web Application.

　　HTML5 Web Storage API can be seen as an enhanced version of Cookies , is not limited by data size, has better resiliency and schema, can write data to native ROM , you can also recover data when the browser is turned off again, to reduce network traffic.

At the same time, this function is another direction of the background " operation record ", without occupying any background resources, reduce the hardware pressure, increase the running smoothness.

8. Get geo-location information

Add the geolocation API, you can access the user's geographical location through the browser, no longer need to use a third-party address database or professional development package, to provide great convenience.

9. Support Multi-Threadingadd Web Worker object, can run in the background JS script, that is, support multi-threading, thereby improving the page load efficiency. 10. Discarded labels1. Expressive Elements2. Framework class elements3. Attribute Classes4. Other Classes

H5 new Feature Finishing