What are the new features of HTML5? Summary of new features of HTML5

We should all know that HTML5 is the fifth major modification of HTML, then, since it is a major modification, there will certainly be new features, so, What are the new features of HTML5? The next article will give you a summary of the new features of HTML5.

First of all, we should know what the meaning of HTML5 is, if you don't know HTML5 well, you can take a look at this article: what is HTML5? What's the use of HTML5? , well, after knowing the specific definition of HTML5, let's take a look at what the new features of HTML5 are.

What are the new features of HTML5?

HTML5 new features of canvas elements for painting

The canvas element is used to draw a graphic on a Web page, which is a rectangular area where you can control each pixel. Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

<canvas id= "MyCanvas" width= "" "height=", "style=" border:1px solid #c3c3c3; >your Browser does not support the canvas element.</canvas>

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var img= New Image () img.src= "/i/eg_flower.png" Cxt.drawimage (img,0,0);</script>

Here's something about SVG: SVG is a graphic format for describing two-dimensional vector graphics.

There are three ways to use SVG:

1. Put SVG directly on the page as a picture.

2. SVG implementation animation.

3. Interactive and filter effects for SVG images.

Description

(1) Canvas uses JavaScript to draw 2D graphics.

(2) Canvas is rendered per pixel.

(3) In the canvas, once the drawing is finished, 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.

(4) SVG is a language that uses XML to describe 2D graphics.

(5) SVG is XML-based, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

(6) 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.

For more information on canvas and SVG, refer to: HTML5 canvas and HTML5 inline SVG

Ii. richer and more powerful forms of HTML5 new features

HTML5 has a number of new form input input types. These new features provide better input control and validation.

HTML5 also adds the following form elements:

<datalist>: The element specifies a list of options for the input field, using the <input> element's List property to bind to the ID of the <datalist> element.

<keygen>: Provides a reliable method for validating a user, which specifies the key pair generator field used for the form.

<output>: Used for different types of output, such as calculations or script output.

HTML5 New Form Properties:

Placehoder property: A short hint appears on the input field before the user enters a value. That is, our common input box default prompt, after the user input disappears.

Required property: is a Boolean property. The input field required to fill in cannot be empty

Pattern Property: Describes a regular expression used to validate the value of a <input> element.

Min and Max properties: Sets the element min and Max values.

Step properties: Specify a valid number interval for the input field.

Height and Width properties: The image height and breadth for the <input> label of the image type.

Autofocus property: Is a Boolean property. Specifies that the domain automatically receives focus when the page loads.

Multiple property: is a Boolean property. Multiple values can be selected in the rules <input> elements.

Iii. HTML5 new features for video and audio elements in media

1, HTML5 provides the standard to play audio files, that is, the use of <audio> elements

Example: <audio controls>

<source src= "Horse.ogg" type= "Audio/ogg" ><source src= "Horse.mp3" type= "Audio/mpeg" > your browser does not support the audio element. </audio>

Description

(1) control property for adding play, pause, and volume controls.

(2) between <audio> and </audio> you need to insert the prompt text of the <audio> element that the browser does not support.

(3) <audio> element allows multiple <source> elements to be used. The <source> element can link different audio files, and the browser will use the first supported audio file.

(4) <audio> elements support three audio format files: MP3, Wav, and Ogg.

2. HTML5 provides a standard way to include video through the visual element.

<video width= "height=" controls>  <source src= "Movie.mp4" type= "Video/mp4" >  <source Src= "Movie.ogg" type= "Video/ogg" > your browser does not support the video tag. </video>

Description

(1) control provides playback, pause, and volume controls for controlling video. You can also use DOM actions to control playback pauses for video, such as the play () and Pause () methods.

(2) The video element provides the width and Height properties to control the size of the videos. If you set the height and width, the required video space is retained when the page loads. If you do not set these properties and the browser does not know the size of the video, the browser will not be able to load a specific space, the page will vary depending on the size of the original video.

(3) The content inserted between the tags is presented to browsers that do not support video elements.

(4) The video element supports multiple source elements. Elements can be linked to different video files. The browser will use the first recognizable format (MP4, WebM, and Ogg).

Iv. the HTML5 geographical location of the new HTML5 characteristics

HTML5 geolocation (geolocation) is used to locate the user's location.

window.navigator.geolocation {    getcurrentposition:  fn  is used to get the current location data    WATCHPOSITION:FN  Monitor changes in user location    clearwatch:fn  clear Location Monitoring}

Get User location information:

Navigator.geolocation.getCurrentPosition (    function (POS) {console.log (' user location data obtained successfully ')      //console.log (    arguments);      Console.log (' Positioning time: ', Pos.timestamp)      console.log (' Longitude: ', pos.coords.longitude)      console.log (' Latitude: ', Pos.coords.latitude)      console.log (' elevation: ', pos.coords.altitude)      console.log (' Speed: ', Pos.coords.speed)},    Locate the successful callback function (ERR) {  console.log (' User location  failed ')      //console.log (arguments);}        Locate the failed callback)

V. HTML5 drag and drop of new characteristics of HTML5

Drag-and-drop (Drag and drop) is a common feature that grabs objects and then drags them to another location. In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped, and the drag-and-drop process is divided into the source object and the target object. The source object refers to the element you are about to drag, and the target object is the target position to be placed after dragging.

For more information on drag and drop, you can refer to: HTML drag and drop

An example is given below:

<! DOCTYPE html>


	



	VI: HTML5 new features of HTML5 Web Storage


	



	



	To store data on the client:


	



	



	HTML5 provides two new ways to store data on the client:


	



	



	(1) Localstorage-data storage with no time limit: The Localstorage method stores no time limits on the data stored. Data is still available after the second, second, or next year.


	



	



	(2) Sessionstorage-data storage for a session: The Sessionstorage method stores data for a session. When the user closes the browser window, the data is deleted.


	



	



	Vii. HTML5 new features HTML5 application caching


	



	



	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:


	



	



	(1) Offline browsing-users can use them when the app is offline


	



	



	(2) Speed-cached resources are loaded faster


	



	



	(3) Reduce server load-The browser will download only updated or changed resources from the server.


	



	



	Viii. HTML5 new features HTML5 Web Workers


	



	



	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.


	



	



	Ix. HTML5 new features HTML5 server send events


	



	



	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.


	



	



	Ten, the HTML5 of the new characteristics of HTML5 WebSocket 


	



	



	WebSocket is a protocol that HTML5 begins to provide full-duplex communication on a single TCP connection. In the WebSocket API, the browser and server only need to do a handshake, and then a fast channel is formed between the browser and the server. The data can be transmitted to each other directly between the two. The browser sends a request to the server to establish a WebSocket connection through JavaScript, and after the connection is established, the client and server can exchange data directly via a TCP connection. When you get a Web Socket connection, you can send data to the server via the Send () method and receive the data returned by the server through the OnMessage event.


	



	



	More on the following features you can take a look at: HTML5 full version of the manual


	



	



	The above is to give you a summary of the new features of the 10 HTML5, of course, if you want to learn more in-depth HTML5, here to recommend about HTML5 video tutorial.