H5 new content and APIs

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

Just a utf-8.2, a new and semantically structured element

<H1>HTML5 New Structure 
<nav> Navigation Section </nav>
<p></p>
 
<section></section>
<footer></footer>
 
A section element can assume that a div is a section element, an ordinary block element that can be used to define a specific, distinguishable area of a Web site

Header elements include headings, logos, navigation, and other header content, which can be added to the site with multiple headers, just like adding multiple headings to the content

Elements of the Hgroup element that will be grouped by headings

Footer element Copyright notice and author information, with some links

The nav element is used primarily for the main navigation menu

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

Aside elements usage inclusions content around contents 3, new inline elements

<figure>
    <p> Pictures </p>
    
</figure >
 
A typical use of figure elements is to include images, code, and other content to describe the main content, and delete does not affect the main content

Figcaption elements are used primarily for figure headings

The mark element is highlighted to represent the referenced content, or the content associated with the user's current activity is highlighted, unlike en or strong elements

The time element, which is recommended when you want to display times or dates in the content

The time element can contain two attributes, a datetime represents the exact date and the family specified in the element, and pubdate represents the date and times specified by the time element when the article or the entire document was published

The meter element is used to define weights and measures, specify the maximum minimum width, and usually work together with CSS, as follows:


The progress element is used to define a progress bar with two properties of max (completion value) and value (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 new Input type

HTML5 has a number of new form input types. These new features provide better input control and validation. New form elements for email, URL, number, range, date pickers (date, month, week, Time, DateTime, datetime-local), search, color HTML5: DataList, keygen, Output new form properties: AutoComplete, novalidate New input property: AutoComplete, autofocus , form, form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, formtarget), Height and width, list, Min, Max and Ste P, 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>
 
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 do not rely on any plug-ins to play the audios and videos 7, to create a series of new features of 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, the HTML is only responsible for displaying the data, the cookie can only store a small amount of data, and cross-domain communication can only be done through the Web server.

HTML5 expands the capacity of file storage up to 5MB, supports lightweight databases such as WEBSQL, and can develop support for offline Web applications.

The HTML5 Web Storage API can be seen as an enhanced cookie that is not limited by data size, has better resiliency and architecture, can write data to the native ROM, and can 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-Threading Add Web Worker object, can run in the background JS script, that is, support multi-threading, thereby improving the page load efficiency.  10 . History Object The History object contains the URLs that the user has visited (in a browser window). 1) history.go (); Loads a specific page in the History list. 2) History.back (); Loads the previous URL in the History list. 3) History.forward (); Loads the next URL in the history list. 11. Discarded Labels 1. Expressive Elements 2. Framework class elements 3. Attribute Classes 4. Other categories related recommendations: http://www.zhangxinxu.com/wordpress/2010/08/%E7%BF%BB%E8%AF%91-%E4%BD%A0%E5%BF%85%E9%A1%BB% e7%9f%a5%e9%81%93%e7%9a%8428%e4%b8%aahtml5%e7%89%b9%e5%be%81%e3%80%81%e7%aa%8d%e9%97%a8%e5%92%8c%e6%8a%80%e6% 9c%af/