HTML5 new features and explanations

What is HTML5:HTML5 is the next generation of HTML that will become the new standard for HTML, XHTML, and HTML DOM.

Some of the rules established for HTML5:

• The new features should be based on HTML, CSS, DOM, and JavaScript.
• Reduce the need for external plug-ins (such as Flash)
• Better error handling
• More tags for replacing scripts
• HTML5 should be independent of the device
• The development process should be transparent to the public

Some interesting new features in HTML5:

• canvas elements for painting
• Video and audio elements for media playback
• Better support for local off-line storage
• New special content elements such as article, footer, header, nav, section
• New form controls, such as Calendar, date, time, email, url, search

1.HTML5 Video and Audio

Instance:

<! DOCTYPE html>
The control property is used to add play, pause, and volume controls.
The content inserted between <video> and </video> is displayed for browsers that do not support video elements.
The above example first uses an Ogg file for Firefox, Opera, and Chrome browser.
To ensure that the video file must be of type MPEG4 for Safari browser.
The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format:
Similarly, audio instances:
<! DOCTYPE html>
2.HTML5 Drag and drop
Drag-and-drop (Drag and Drop) is part of the HTML5 standard.
Instance:
<! DOCTYPE html>
3.HTML 5 Canvas
The canvas element is used to draw graphics on a Web page. Canvas has several ways to draw paths, rectangles, circles, characters, and add images.
Instance:
Create a Canvas element
<canvas id= "MyCanvas" width= "height=" ></canvas>
The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:
<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.fillstyle= "#FF0000"; Cxt.fillrect (0,0,150,75);</script>
Example-line:
<! DOCTYPE html>
For:
Example-round:
<! DOCTYPE html>
：
Instance-gradient:
<! DOCTYPE html>
Example-Image:
<! DOCTYPE html>
：
4.HTML5 inline SVG
What is SVG?

 
      

  
       
 
        
SVG refers to a scalable vector graphic (Scalable vector graphics)
 
        
SVG is used to define vector-based graphics for the network
 
        
SVG defines graphics using XML format
 
        
SVG images have no loss of graphics quality when zooming in or out of size
 
        
SVG is the standard of the World Wide Web Consortium
 
       
 
      
Advantages of SVG
Compared to other image formats (such as JPEG and GIF), the advantage of using SVG is that:

 
      

  
       
 
        
SVG images can be created and modified by a text editor
 
        
SVG images can be searched, indexed, scripted, or compressed
 
        
SVG is scalable
 
        
SVG images can be printed with high quality at any resolution
 
        
SVG can be amplified when the image quality is not degraded
 
       
 
      
Instance:
<! DOCTYPE html>
Canvas vs. SVG:
Both Canvas and SVG allow you to create graphics in your browser, but they are fundamentally different.
Svg
SVG is a language that uses XML to describe 2D graphics.
SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.
Canvas
Canvas uses JavaScript to draw 2D graphics.
The Canvas is rendered per pixel.
In the canvas, once the drawing is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.
Comparison of Canvas and SVG
The following table lists some of the differences between canvas and SVG.
Canvas

 
       

  
        
 
         
Dependent resolution
 
         
Event handlers are not supported
 
         
Weak text rendering capabilities
 
         
Ability to save result images in. png or. jpg format
 
         
Best for image-intensive games where many of the objects are redrawn frequently
 
        
 
       
Svg

 
       

  
        
 
         
Not dependent on resolution
 
         
Support for event handlers
 
         
Best for applications with large rendering areas (e.g. Google Maps)
 
         
High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
 
         
Not suitable for gaming applications
 
        
 
       
5.HTML5 Geo-positioning
Instance:
<! DOCTYPE html>
Example Explanation:

 
        

  
         
 
          
Detect whether geo-targeting is supported
 
          
If supported, run the GetCurrentPosition () method. If not supported, a message is displayed to the user.
 
          
If GetCurrentPosition () runs successfully, returns a coordinates object to the function specified in the parameter showposition
 
          
The Showposition () function obtains and displays the longitude and latitude
 
         
 
        
Error code:

 
        

  
         
 
          
Permission denied-user does not allow geo-location
 
          
Position unavailable-Unable to get current position
 
          
Timeout-operation timed out
 
         
 
        
Watchposition ()-Returns the user's current location and continues to return to the updated location when the user moves (just like the GPS on the car).
Clearwatch ()-Stop watchposition () method
<! DOCTYPE html>
6.HTML 5 Web Storage
Store data on the client
HTML5 provides two new ways to store data on the client:

 
         

  
          
 
           
Localstorage-Data storage with no time limit
 
           
Sessionstorage-Data storage for a session
 
          
 
         
Previously, these were all done by cookies. However, cookies are not suitable for storing large amounts of data because they are passed by each request to the server, which makes the cookie slow and inefficient.
Localstorage method
The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year.
How to create and access localstorage:
<! DOCTYPE html>
The following example counts the number of times a user accesses a page:
<! DOCTYPE html>
Sessionstorage method
The Sessionstorage method stores data for a session. When the user closes the browser window, the data is deleted.
How to create and access a sessionstorage:
<! DOCTYPE html>
The following example counts the number of times a user accesses a page in the current session:
<! DOCTYPE html>
7.HTML 5 Application Cache
With HTML5, creating a cache manifest file makes it easy to create an offline version of your Web app.
What is the application cache (application cache)?
HTML5 introduces application caching, which means that Web applications can be cached and accessed without an Internet connection.
Application caching brings three benefits to your app:

 
             

  
              
 
               
Offline Browsing-users can use them when the app is offline
 
               
Speed-cached resources are loaded faster
 
               
Reduce server load-The browser will download only updated or changed resources from the server.
 
              
 
             
The following example shows an HTML document with the cache manifest (for offline browsing):
<! DOCTYPE html>
To enable application caching, include the manifest attribute in the 
Each page that specifies a manifest is cached when the user accesses it. If the manifest property is not specified, the page is not cached (unless the page is specified directly in the manifest file).
The recommended file name extension for the manifest file is: ". AppCache".
Please note that the manifest file needs to be configured with the correct mime-type, "Text/cache-manifest". Must be configured on the Web server.
The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).
The manifest file can be divided into three parts:

 
              

  
               
 
                
Cache MANIFEST-Files listed under this heading will be cached after the first download
 
                
NETWORK-Files listed under this heading require a connection to the server and are not cached
 
                
FALLBACK-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)
 
               
 
              
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
When the manifest file is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.
NETWORK
The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:
You can use an asterisk to indicate that all other resources/files require an Internet connection:
FALLBACK
The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html":
Note: The first URI is a resource and the second is a substitute.
Update cache
Once the app is cached, it remains cached until the following happens:

 
              

  
               
 
                
User empties browser cache
 
                
The manifest file is modified (see tips below)
 
                
App Cache updated by program
 
               
 
              
Instance-Full Manifest file
8.HTML 5 Web Workers
Web worker is a JavaScript that runs in the background and does not affect the performance of the page. What is a Web Worker? When you execute a script in an HTML page, the state of the page is not responsive until the script is complete. Web Worker is a JavaScript running in the background, independent of other scripts, without affecting the performance of the page. You can continue to do anything you want to do: Click, select Content, and so on, while the Web worker runs in the background.
Instance:
<! DOCTYPE html>
Add a "onmessage" event listener to the Web worker that executes the code in the event listener when the Web worker passes the message. Data from Event.data is stored in the event.data.
Demo_workers.js is a count script:
var i=0;function timedcount () {i=i+1;postmessage (i); SetTimeout ("Timedcount ()", 500);} Timedcount ();
The important part of the above code is the PostMessage () method-it is used to return a message to an HTML page.
9.HTML 5 Server Send Event
HTML5 Server Send events (Server-sent event) allow Web pages to get updates from the server.
Server-sent Event-one-way message delivery
The Server-sent event refers to a webpage that automatically obtains updates from the server.
This could have been done before, provided the Web page had to ask if there were any updates available. Events are sent through the server, and updates are automatically reached.
Examples: Facebook/twitter updates, valuation updates, new blogs, tournament results, etc.
Instance:
<! DOCTYPE html>
Example Explanation:

 
                

  
                 
 
                  
Create a new EventSource object, and then specify the URL of the page that is sending the update ("demo_sse.php" in this case)
 
                  
OnMessage event occurs every time an update is received
 
                  
When the OnMessage event occurs, the received data is pushed into the element with the ID "result"
 
                 
 
                
Server-Side code example: PHP code (demo_sse.php):
<?phpheader (' Content-type:text/event-stream '); header (' Cache-control:no-cache '); $time = Date (' R '); echo "Data: The server time is: {$time}\n\n "; flush ();? >
ASP Code (VB) (demo_sse.asp):
<%response.contenttype= "Text/event-stream" Response.expires=-1response.write ("Data:" & Now ()) Response.Flush ()%>
Code Explanation:

 
                

  
                 
 
                  
Set the header "Content-type" to "Text/event-stream"
 
                  
No caching of pages is required
 
                  
Output send date (always start with "data:")
 
                  
Refresh output data to a Web page
 
                 
 
                
EventSource Object
In the example above, we use the OnMessage event to get the message. However, you can also use other events:
HTML5 new features and explanations