Review the basis of 1 - HTML5

HTML5 new features (section)

Semantic characteristics

HTML5 Web page gives a better meaning and structure. Richer label with support for aspects of RDFa, micro-data and micro formats, etc., to build the program, users are more valuable for data-driven Web.
Popular terms is the use of reasonable, correct labels to display content, such as title with h1 ~ h6 tag, a paragraph with the p tag.

advantage:

• Easy-to-read user style page rendering lost time to make a clear structure.
• Conducive to SEO, the search engine to determine the right context and each keyword weight according to the label.
• Other convenient analytical devices, such as a reader for the blind according to the semantic Web page rendering
• Conducive to the development and maintenance of semantic more readable code more maintainable, more harmonious relationship with CSS3.

- New label -

- renderings -

2. Local storage

h5 provides sessionStorage, localStorage and indexedDB strengthen local storage.

Note: Storage type can only store strings. Non-data string is converted into a string before storage

2.1 Local storage method

1.Cookie: data stored in the computer control to add and delete data through a browser
features:

• Storage limits: 100 domain cookie, the value of the size of each 4KB
• Client, the server, the server will request (header information)
• cookie is shared between pages

2.localStorage and sessionStorage
localStorage is a permanent storage, leave the current page open or have local cache recording again;
sessionStorage saved data for a browser session, when the session ends (usually the window is closed), the data is cleared;
advantage:

• localStorage expand the 4K limit the cookie
• localStorage will be the first time the requested data is stored directly to a local, this is equivalent to the size of a 5M for only the high version of the browser to the database front-end of the page, compared to the cookie can save bandwidth, but this is supports.
  Limitations:
• The size of the browser is not uniform, and it supports localStorage this property in more than IE8 IE version.
• All current browsers will put localStorage value type is defined as a string type, this conversion takes some of us everyday more common JSON object type.
• localStorage in the browser's privacy mode following is unreadable.
• It reads string on localStorage essence, if the stored content and more words will consume memory space will cause the page to change the card.
• localStorage reptile can not be crawled.
• sessionStorage can save a lot of browser data.
• sessionStorage under the same window, independent memory; non-interfering

usage:

• 保存数据：
  localStorage.setItem(“key”, “value”);
  sessionStorage.setItem(“key”, “value”);
  

  Note: In the different browsers among the stored storage location is not the same, can not be universal.

  ------ except the setItem () and the getItem () method, in the form of operational attributes may be employed to further manipulate the data ------
  

• Data acquisition:
  localStorage.getItem ( "Key");
  sessionStorage.getItem ( "Key");
  

• Delete data (name cleared a key corresponding data):
  localStorage.removeItem ( "Key");
  sessionStorage.removeItem ( "Key");
  
  Note: The Clear key name does not exist does not complain, just silently fail

  ------ In addition to using removeItem () method, you can also use the delete operator to clear data ------
  
  Note: IE7- browser does not support the delete operator to clear data storage

• Clear local cache (to clear all the saved data):
  localStorage.clear ();
  sessionStorage.clear ();

  

3. Offline web applications

Offline web applications means that no network can run the application in a state

advantage:

• Offline browsing - users can use them in the application offline
• Speed ​​- cached resources load faster
• Reduce server load - the browser will only download updated or changed resources from the server.

Usage:
To enable the application cache, the label must include the manifest attribute in the document
composition manifest file (consisting demo.cache file)

4. geopositioning

HTML5 Geolocation API to get the user's location.
(In view of this feature may violate the privacy of users, unless the user agrees, otherwise the user location information is not available.)

5. New video tag

In the different browsers, different default style, supported video formats are also different
chrome: three formats are supported
Firefox: three formats are supported
safari: only support mp4
European friends: three formats are supported
IE8 and below: Unsupported video label
IE9 +: supports video tags only support mp4

Part of the property:
autoplay autoplay
loop cycle
poster video cover only occurs when the video first loads
muted video mute
Note: chrome default autoplay will not automatically play, but if you set the muted, you can automatically play

6. Forms New Features

type of input values:
the original: text, password, radio, checkbox , file, submit, reset, button, image, hidden
added:


---- can be validated when the form is submitted and prompts ----

The new form element attributes:
original: id, class, title, style , type, name, value, checked, selected, disabled, readonly
added:

Note: Use the need to specify minimum and maximum value type step

- - be validated when the form is submitted and prompts ----

7. Drag Properties

After a mouse click refers to the source object, let go drag it to the target object, or let go halfway (release) process
Drag: Drag
the source object: a thing mouse click specified, for example: an element, such as a picture
goal Object: Specifies whether the drag source object we are expected to enter the area
function: between the source and target objects pass data

Methods dragged source object that can be triggered:

1. ondragstart: source object began to be dragged
2. ondrag: by dragging
3. ondragend: source object is dragged End

Event source object enters the target object that can be triggered:

1. ondragenter: the source object enters the target object trigger
2. ondragover: source object hovering over a target object triggers
3. ondragleave: When the source object is dragged away from the target object triggers
4. ondrop: let go when the trigger source object on the target object
   
   
   renderings
   
   console results
   

8. Device Compatibility

H5 provides an unprecedented open access to data and application interfaces. Application of external and internal data can be directly connected directly to the browser, for example, video and audio can be directly associated microphones and cameras.

Reference website:
https://www.jianshu.com/p/b3762ca713b1
https://www.jianshu.com/p/9e6d7c31573f
https://blog.csdn.net/qinshensx/article/details/104174347