HTML5 new Features

1, HTML5 Introduction

The HTML 4.0 standard has been used before, and until now, HTML4.0 is still the most widely used standard for the industry as a whole. The so-called HTML5 refers to the version 5.0 of HTML, but for the HTML 5.0 standard is basically a look forward to a long time. And the biggest difference between HTML5 technology and the traditional HTML 4 is the support on the mobile side. For example, in HTML 5 to support the acquisition of GPS (can get the current mobile port of longitude and latitude two information), then you can easily achieve the need for positioning, of course, all of this must have a prerequisite: the browser to support. So far has been restricting the development of HTML5 has been concentrated on the client, because some people do not understand the update. IE is purely disruptive because Microsoft has been defining its own development standards. The entire HTML 5 does contain many new features: DOM parsing support, canvas drawing, Form API, GPS, Web Storage, enhanced Ajax, WebSocket.

New features:
Support for Dom parsing
Canvas Drawing
Formapi
Gps
Web Storage
Enhanced Ajax (rather than using jquery directly)
WebSocket (more excellent reverse AJAX support)

If you want to use HTML5 very easily, just add the following piece of code to the top of each page:

Add a sentence
<! Ductype html>

2. New DOM Operation support

The element selector
DOM Operations
First:
getElementById ();
Getelementbytagname ();

Increase
Obtain a single document.query.Selector ();
Get a set of Document.query.SelectorAll ();

Example:

<! DOCTYPE html></style><script type= "Text/javascript" >
Window.onload = function () {
Document.queryselector ("#msg"). SetAttribute ("Class", "infocls");
}</script>
This action is the same as jquery, but it seems that jquery uses a shorter point.
Select a set of element examples:
<! DOCTYPE html>var allelems = Document.queryselectorall ("Span,div,p");　　for (var x = 0; x < allelems.length; x + +) {Allelems[x].setattribute ("Class", "infocls"); }}</script>
　　
If you use jquery, then you can set it up right now, but the DOM operation of HTML5 is still not out of the nature of the DOM operation, so it must be done in a loop at this point. You can also set the "*" in this selector to indicate permissions, or use ". Style name" To select from the style.
Summarizing HTML 5 enhances the selection of DOM elements, which is easier than traditional DOM operations.
3. Draw graphics with canvas
In HTML5 technology, if you want to develop a game, you can use canvas to do it. If you want to use canvas then you should first open up a plot of space, that is, all the operations that need to draw graphics are done in this space. But this space must take into account the situation that the browser does not support.
<canvas id= "Can" width= "height=" > current browser does not support canvas, please replace the browser. </canvas>
If the browser does not support canvas at this point, an error message will appear. If there is only one space now, then it is not possible to display the graphic, because you also need to write code.
Example: Preparing to draw
<script type= "text/javascript" >window.onload = function () {try {var canvasobj = document.getElementById ("can"); c0/>//obtained the artboard var ctx = Canvasobj.getcontext ("2d");  Supports only 2D graphics} catch (e) {alert ("error, current browser does not support this page operation! ") ;}} </script>
But on a supported browser, there is no problem with the code at this point, except that the program will get an error on an unsupported browser.
4. Video playback Support
All of the earliest video sites use flash technology, but the flash technology is now very poor compatibility, then when the HTML5 appeared, the video playback technology in the video has become the preferred technology of many now.
Example: Play a video
<video id= "vid" src= "Video/news.mp4" controls></video>
　　
Although this kind of control operation is very good, but in reality, all video sites its video must not be fixed. Now all the controls are automatically completed by the system, if the user has the need to complete the control to write their own.
Example: Implementing your own Video control
<! DOCTYPE html>
<script type= "text/javascript" >window.onload = function () {if (navigator.geolocation) {alert ("Congratulations, your browser supports GPS positioning!) ") ;} else {alert ("Sad, change browser bar, not support location services!") ") ;}} </script>
　　
Even if your browser supports location operations, your hardware device may not support your targeting.

Example: removing coordinates
<script type= "text/javascript" >window.onload = function () {if (navigator.geolocation) { Navigator.geolocation.getCurrentPosition (function (postion) {var lo = postion.coords.longitude;//get longitude coordinates var la = Postion.coords.latitude;  Get latitude coordinates alert ("longitude =" + Lo + ", latitude =" + LA);}, function (e) {   //error handling alert (E.code);});    Remove coordinates} else {alert ("Sad, change browser bar, not support location services!") ") ;}} </script>
　　
In the process of coordinate operations, if there is a positional error code, then the optional values are as follows:
• 0: Indicates no error;
• 1: Indicates that the user has refused to obtain GPS coordinates in the browser settings;
• 2: Attempt to remove coordinates, but fail;
• 3: The estimated processing time is exceeded.
If you want to GPS positioning needs to have the support of the server, otherwise cannot be removed. Now you have the location: • Longitude coordinates: 116.332474 • Latitude Coordinates: 40.099399 If you want to define a coordinate location, you can do so using a GIS system, such as Google Maps (FQ) or Baidu Map (registration required). You will be given an AK message once the registration is complete.
Summary location of the service must be supported by the GPS module.
Web Storage
1, local data storage;
2, session data storage.
Form API
1, the use of various enhanced form components in HTML5 (basic not used);
2, the use of the validation operation in HTML5.
Although HTML5 supports a wide variety of forms and validation of data, it is still not widely available in development. All development forms are still written in the traditional way and are still validated in the traditional way.
AJAX Operations Enhanced
Use of XMLHttpRequest Level 2.
From the birth of Ajax to today, almost all projects are bound to use asynchronous data processing. And in the traditional Ajax operation will find a lot of processing is not very humane, so from HTML5 began to add new AJAX processing support, the purpose is to use some simpler operation of Ajax processing. Since the AJAX process is bound to involve the server-side program code, define a servlet below and let the servlet return the XML data.
Example: Defining a servlet to handle asynchronous operations
@WebServlet (urlpatterns = "/ajaxservlet") public class Ajaxservlet extends HttpServlet {@Overridepublic void doget ( HttpServletRequest request, HttpServletResponse response) throws Servletexception, IOException {    Request.setcharacterencoding ("UTF-8");    Response.setcharacterencoding ("UTF-8");    Response.setcontenttype ("Text/xml");    Enumeration<string> enu = request.getparameternames (); Get all Parameters    while (enu.hasmoreelements ()) {    String paramname = Enu.nextelement ();    SYSTEM.OUT.PRINTLN ("* * *" parameter name "paramname =" + ParamName + "," parameter contents "Paramvalue =" + Request.getparameter (paramname));    }    Response.getwriter (). Print ("<info>");    Response.getwriter (). Print ("<url> Zibo </url>");    Response.getwriter (). Print ("</info>");} @Overridepublic void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, ioexception{    This.doget (request,response);}}
　　
The program can receive parameters, can also be used to respond to parameter data, and the data type of the response using XML text.

Example: Defining an AJAX operation
<! DOCTYPE html>
　　
This kind of code has little to do with the traditional AJAX processing, the only difference being that the processing progress is changed from the earliest state to the anonymous processing function.
Summing up the entire Ajax operation belongs to the new bottle of wine, in addition to the bottle good point, nothing changes.
WebSocket CommunicationsHow to use WebSocket to implement reverse AJAX operations (server push technology).
HTML5 new Features