HTML5 new Features

HTML5 has added some more semantic and better tagging elements.

First, the new element

Structural elements:

1. Article Tags: represents a piece of content in the page that is irrelevant to the context, such as an article in a blog.

2. Aside tags: indicates content outside the article content, auxiliary information.

3. Header tag: Indicates the top of the page.

4. Footer Tag: Indicates the bottom of the page

5. Section: Represents a content block in a page, such as a chapter.

6. Nav: Represents the navigation link in the page.

Other elements

Video, audio, canvas (canvas), mark (highlighted font), Progress (Task progress), time (date or time), keygen (Generate key), dialog (dialog box or window)

Elements of abolition

Basefont, font, center, frameset ...

Second, the new API

Canvas API

Canvas labels can provide a canvas for a page to display graphics. With the canvas API, you can dynamically generate and display a variety of graphs, charts, images, and animations on this canvas.

SVG

SVG is another graphical feature of H5, a standard vector graphic that is a file format that has its own API. HTML5 introduces inline SVG, which allows SVG elements to appear directly in HTML tags.

<svg height=100 width=100><circle cx=50 cy=50 r=50/></svg>

Audio and video

HTML5 provides a generic, complete, scriptable control API for the audio and video specifications.

1. The new audio and video elements do not need to be installed as a natively supported feature of the browser.

2. Media Elements provide generic, integrated, and scriptable control APIs to Web pages.

1 <Videosrc= "VIDEO.WEBM"Controls>2 <ObjectData= "videoplayer.swf"type= "Application/x-shockwave-flash">3 <paramname= "movie"value= "video.swf" />4 </Object>5 Your Browser does not support HTML5 video.6 </Video> 　 

Browser support detection

The browser detects whether a video or audio element is the simplest way to create it dynamically using a script and then detects whether a particular function exists.

1 var hasvideo =!! (Document.createelement (' video '). Canplaytype);

Geolocation API

Geoocation API (geo-location API), you can request users to share their location. The use of the method is very simple, and if the user agrees, the browser returns the location information that is provided to the browser by the underlying device that supports the HTML5 geolocation feature, such as a laptop or mobile phone. Location information consists of latitude, longitude coordinates, and some other metadata.

Where does location information come from

The Geolocation API does not specify which underlying technology the device uses to locate the user of the application. Instead, it is just an API for retrieving location information, and the data retrieved through the API is only a certain degree of accuracy and does not guarantee that the location returned by the device is accurate. The device can use the following data sources:

2. IP Address
4. Three-dimensional coordinates
   1. Gps
   2. MAC addresses from RFID, wifi and Bluetooth to WiFi
   3. ID of GSM or CDMA phone
5. User-definable data

   1 //Update once2 navigator.geolocation.getCurrentPosition (updateLocation, handlelocationeror);3 function UpdateLocation (position) {4 var latitude = position.coords.latitude;//Latitude5 var longitude = position.coords.longitude;//Longitude6 var accuracy = position.coords.accuracy;//Accuracy7 var timestamp = Position.coords.timestamp;// timestamp8 }9 //Error handling functionTen function Handlelocationeror (error) { One .... A } - //Repeat Updates - navigator.geolocation.watchPosition (updateLocation, handlelocationeror); the //no longer accepts location updates -Navigator.geolocation.clearWatch (Watchid);

Communication API (cross-document message delivery)

HTML5 introduces a new feature that communicates across document messages, ensuring secure cross-origin communication between IFRAME, tabs, and Windows. The PostMessage API is the standard way to send messages:

1 window.postmessage (' Hello, World ', ' http://www.example.com/');

WebSockets API

WebSockets is the most powerful communication feature in HTML5, which defines a full-duplex communication that can be communicated only through a single socket on the web.

Drag-and-drop API

If the Draggable property of a page element is true, the element is draggable.

1 <  draggable= "true">draggable div</div> 

Web Workers API

JS is single-threaded, so long-lasting computations can block the UI thread, resulting in the inability to fill the text box with text, one-shoulder buttons, and so on, and in most browsers, the new tab cannot be opened unless the version right returns. The solution to this problem is Web Workers, which allows the Web application to have background processing power and is very supportive of multithreading. However, scripts executed in Web workers cannot access the page's window object, which means that web workers cannot directly access Web pages and Dom APIs. Although web workers does not cause the browser UI to stop responding, it still consumes CPU cycles, causing the system to react slowly.

Web Storage API

Web storage is a very important feature introduced by HTML5, which can store data locally on the client, similar to HTML4 cookies, but with much greater functionality than cookies.

Sessionstorage: Save data in session, browser close data is lost.

Localstorage: Save the data to the client locally, unless it is manually deleted. Whether Sessionstroge or Localstrage, the same API can be used, commonly used in the following (in the case of Localstorage):

1. Save data: Localstorage.setitem (Key,value);
2. Read data: Localstorage.getitem (key);
3. Delete individual data: Localstorage.removeitem (key);
4. Delete all data: Localstorage.clear ();
5. Get the Key:localStorage.key (index) of an index;

　

　　

HTML5 new Features