HTM5 new feature additions and deprecated elements

Today, we talk about one of the questions that will be asked in the front end interview, which is the new feature of HTML5. This is the basic knowledge that must be mastered at the end of learning.

New elements

HTML5 has added some more semantic and better tagging elements.

Structural elements

1. A article element that represents a piece of independent content in the page that is not relevant to the context, such as an article in a blog post.
2. The aside element, which represents the content outside the article content, auxiliary information.
3. Header element that represents the header of a content block or an entire page in a page.
4. A hgroup element that is used to group the title of a chunk or an entire page in a page.
5. A footer element that represents a block of content in a page or a footer for an entire page.
6. A figure element that represents the grouping of media content and their caption.
7. A section element that represents a chunk of content in a page, such as a chapter.
8. The Nav element that represents the navigation link in the page.

Other elements

1. Video element, which defines the videos.
2. The audio element, used to define the sound.
3. The canvas element, which is used to show the graphic, has no behavior of its own and only provides a canvas.
4. Embed elements, used to insert a variety of multimedia, the format can be midi, Wav, AIFF, AU, MP3 and so on.
5. The mark element, which is used to display highlighted text.
6. The progress element, which is used to show the progress of any type of task.
7. The meter element, which represents weights and measures, defines a measure within a predefined range.
8. The time element, which is used to display dates or times.
9. Command element, which represents a CommandButton.
10. Details element, which is used to show the detail information that the user asks for and can get.
11. The summary element that defines the visible caption for the details element.
12. The DataList element, used to display an optional list of data, is used in conjunction with the INPUT element to create a drop-down list of input values.
13. The DataGrid element, also used to display an optional list of data, is displayed in a tree-shaped list.
14. The keygen element that represents the generated key.
15. The output element that represents the different types of outputs.
16. The source element, which defines the media resource for the media element.
17. A menu element that represents a list of menus.
18. A Ruby element that represents a ruby annotation, an RT element that represents the interpretation or pronunciation of a character. RP elements are used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
19. A WBR element that represents a soft line break. The difference from the BR element is that the BR element means that the line must be wrapped here, while the WBR element means that the width of the browser window or parent element is wide enough. No line breaks are made, and when the width is not sufficient, the active line wraps here.
20. The BDI element, which defines the text orientation of the text so that it is set apart from the direction of the text surrounding it.
21. A dialog element that represents a dialog box or window.

Elements of abolition

Some elements that are purely expressive are abolished in HTML5, and only some elements supported by some browsers have elements that negatively affect usability.

Purely expressive elements

Elements that are purely expressive are those that can be substituted with CSS. Basefont, big, center, font, S, Strike, TT, u these elements, their functions are purely for the page display services, HTML5 advocates to put the page display features in the CSS style sheet unified processing, so these elements are abolished, with CSS style to replace.

Elements that have a negative impact on availability

For frameset elements, frame elements, and noframes elements, because frame frames have a negative impact on web usability, frame frames are not supported in HTML5, only the IFRAME framework is supported, HTML5 frameset, The three elements of frame and noframes are abolished.

Only elements supported by some browsers

For applets, Bgsound, Blink, Marquee and other elements, because only some browser support, especially the BGSOUND element and the marquee element, is only supported by IE, so in the HTML5 was abolished. Where the applet element can be substituted by the embed element or the object element, the BGSOUND element can be substituted by the audio element, and marquee can be overridden programmatically by JavaScript.

The new Apicanvas API

The canvas elements mentioned above can provide a canvas for the 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. Canvas is essentially a bitmap canvas and is not scalable, drawing objects that are not part of the page DOM structure or any namespaces. You do not need to store each entity as an object and perform very well.

Drawing with the canvas API is the first thing to get the context of the canvas element and then draw with the various drawing features encapsulated in that context.

<canvas id="Canvas"> Alternative Content </canvas><script>varCanvas = document.getElementById ('Canvas'); varContext =canvas.getcontext ("2d");//Get Context//Set Solid ColorContext.fillstyle ="Red"; Context.strokestyle="Blue"; //The practice shows that the default FillStyle under FillStyle does not set to blackContext.fillrect (0,0, -, -); //The practice shows that the default Strokestyle under Strokestyle does not set to blackContext.strokerect ( -,0, -, -);</script>

Svg

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

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

Audio and video

The advent of audio and video elements has made HTML5 's media application a new choice, and developers do not have to use plugins to play audio and video. For these two elements, the HTML5 specification provides a generic, complete, scriptable control API.
Before the HTML5 specification came out, the typical way to play a video on a page was to embed audio video into HTML using Flash, QuickTime, or Windows Media plug-ins, and there were two benefits to using HTML5 's media labels.

1. The new audio and video elements do not need to be installed as a natively supported feature of the browser.
2. Media Elements want Web pages to provide common, integrated, and scriptable control APIs.

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

Browser support detection

The simplest way for a browser to detect whether an audio element or video element is supported is to create it dynamically with a script and then detect the existence of a particular function.

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

Geolocation API

HTML5 's Geolocation 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:

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

How to use

One update navigator.geolocation.getCurrentPosition (updateLocation, handlelocationeror); function UpdateLocation ( Position) {    var latitude = position.coords.latitude;     Latitude    var longitude = position.coords.longitude;   Longitude    var accuracy = position.coords.accuracy;     Accuracy    var timestamp = Position.coords.timestamp;   Timestamp}//error handler function Handlelocationeror (Error) {    ...} Repeat Update navigator.geolocation.watchPosition (updateLocation, handlelocationeror);// Location Update Navigator.geolocation.clearWatch (Watchid) is no longer accepted;

Communication API Cross-document message delivery

For security reasons, the communication between frames, tabs, and Windows running in the same browser has been severely restricted. However, in reality there are some reasonable requirements to allow the content of different sites to interact within the browser. In this case, the application can be better organized if a direct communication mechanism is provided within the browser.
A new feature, cross-document message communication, is introduced in HTML5 to ensure secure cross-origin communication between IFRAME, tabs, and Windows. The PostMessage API is the standard way to send messages, and sending messages is simple:

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

When you receive a message, you only need to add an event handler function to the page. When a message arrives, it determines whether the message is processed by examining the source of the message.

Window.addeventlistener ("message", MessageHandler, True); function MessageHandler (e) {    switch (e.origin) {        Case "friend.example.com":        //Processing message        ProcessMessage (e.data);        break;    Default:         //Message Source Unrecognized        //message ignored    }}

A message event is a DOM event that has both data and origin (source) attributes. The Data property is the actual message passed by the sender, and the Origin property is the source of the send.

XMLHttpRequest Level2

XMLHttpRequest API makes Ajax technology possible, and as an improved version of XMLHttpRequest, XMLHttpRequest Level2 has been greatly improved in functionality. The main two aspects:

1. Cross-Origin XMLHttpRequest
2. Progress events

Cross-Origin XMLHttpRequest

In the past, XMLHttpRequest was limited to homologous communication, and XMLHttpRequest Level2 achieved cross-origin xmlhttprequest through Cors. The cross-origin HTTP request contains an Origin header, which provides the server with the source information for the HTTP request.

WebSockets API

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

WebSockets handshake

In order to establish websockets communication, the client and server upgrade the HTTP protocol to the WEBSOCKET protocol during the initial handshake. Once the connection is successful, the WebSocket message can be passed back and forth between the client and the server in full duplex mode.

WebSockets interface

In addition to the WebSockets protocol definition, the specification also defines the WebSocket interface for JavaScript applications. The use of the WebSockets interface is simple. To connect to a remote host, simply create a new WebSocket instance that provides the peer URL you want to connect to.

Forms API New Form elements

1. The Tel element, which represents the phone number.
2. An email element that represents the e-mail address text box.
3. A URL element that represents the URL of a Web page.
4. The search element, used for search engines, such as the searching box displayed at the top of the site.
5. A range element, a numeric selector within a specific range of values, typically displayed as a slider bar.
6. Number element, which contains only the numeric fields.

Future form elements

1. color element, colour picker, selection based on palette or color palette.
2. A datetime element that displays the full date and time, including the time zone.
3. Datetime-local, displays the date and time.
4. The time element, which does not contain the timezone and the timing selector and indicator.
5. Date element, day selector.
6. The week element, the week selector in a year.
7. month element, the monthly selector for a certain year.

New form features and functions placeholder

When the user has not entered a value, the input control can display a descriptive description or a message to the user via the placeholder feature.

<name= "name"  placeholder= "First and last Name">

AutoComplete

The browser uses the AutoComplete feature to know if the input values should be saved for future use.

Autofocus

The autofocus attribute allows you to specify that a FORM element gets input focus, only one autofocus attribute is allowed on each page, and if more than one is set, this behavior is not specified.

SpellCheck

You can control the SpellCheck property on input controls and textarea spaces with textual content. When you're done setting up, you'll be asked if your browser should give you feedback on the spelling checker results. The SpellCheck property needs to be assigned a value.

List attributes and DataList elements

By combining the list attribute with the DataList element, developers can construct a list of values for an input type control.

<DataListID= "ContactList">    <optionvalue= "[email protected]"></option>    <optionvalue= "[email protected]"></option></DataList><inputtype= "Email"ID= "Contatcs"List= "ContactList">

Min and Max

By setting the Min and Max attributes, you can limit the value input range of the range input box between the lowest and highest values. You can set only one or both, and you can neither set it.

Step

For an input control, setting its Step property allows you to specify the granularity of the input value to increment or decrement.

Required

Once the required attribute is set for an input control, this entry is required, otherwise the form cannot be submitted.

Drag and Drop apidraggable properties

This element can be dragged if the draggable element of the page element is true.

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

Drag-and-drop events

The drag process triggers a number of events, mainly the following:

1. DragStart: triggered when a page element starts dragging.
2. Drag: The dragged element continues to trigger during the drag process.
3. DragEnter: The dragged element is triggered when it enters the target element, and the event should be monitored on the target element.
4. DragLeave: The dragged element is triggered when it leaves the target element, and the event should be monitored on the target element.
5. DragOver: The dragged element remains in the target element while it is continuously triggered, and the event should be monitored on the target element.
6. Drap: The dragged element, or the file selected from the file system, is triggered when the drop is dropped.
7. Dragend: triggered when a page element is dragged at the end.

Draggableelement.addeventlistener (' DragStart ', function (e) {    console.log (' Drag to start! ‘);});

DataTransfer Object

During the drag process, the callback function accepts an event argument that has a DataTransfer property that points to an object that contains various information related to the drag.

Draggableelement.addeventlistener (' DragStart ', function (event) {    event.dataTransfer.setData (' text ', ' Hello World! ');});

The properties of the DataTransfer object are:

1. DropEffect: Drag-and-drop operation type that determines how the browser displays the mouse shape, with possible values of copy, move, link, and none.
2. Effectallowed: Specifies the allowed operation, the possible values are copy, move, link, copylink, Copymove, Linkmove, all, none, and uninitialized (the default value, equivalent to all, That allows everything to be done).
3. Files: Contains a FileList object that represents the files involved in dragging and dropping, primarily for processing files dragged from the file system into the browser.
4. Types: The type of data stored in the DataTransfer object.

The methods for DataTransfer objects are:

1. SetData (format, data): Stores data on DataTransfer objects. The first parameter, format, is used to specify the type of data stored, such as text, URLs, text/html, and so on.
2. GetData (format): Extracts data from the DataTransfer object.
3. ClearData (format): Clears the data stored by the DataTransfer object. If the format parameter is specified, only the formatted data is cleared, otherwise all data is cleared.
4. Setdragimage (imgelement, X, y): Specifies the image to display during drag. By default, many browsers display a semi-transparent version of a dragged element. The parameter imgelement must be an image element, not a path to the image, and the parameter x and Y represent the position of the image relative to the mouse.

Web Workers API

JavaScript is single-threaded. Therefore, long-lasting computations, which block the UI thread, can cause text to be filled in the text box, click a button, and so on, and in most browsers, you cannot open a new tab unless control 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

Sessionstorage saves the data in session, and the browser closes the data and disappears.

Localstorage

Localstorage keeps the data locally on the client side, unless it is manually deleted.
Whether it is sessionstorage, or localstorage, can use the same API, commonly used are 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;

HTM5 new feature additions and deprecated elements