New features of HTML5 necessary for front -end interview

What is HTML5: HTML5 is the next generation of HTML, which will become new standards for HTML, XHTML and HTML DOM. Today, let's talk about a question that I will be asked every time the front -end interview is, which is the new feature of HTML5. This is the basic knowledge that must be mastered at the front end of learning.

HTML5 adds some better semantic label elements.

1. Article element represents an independent content that is not related to the context, such as an article in a blog.
2. ASIDE element represents content other than Article content, assisted information.
3. Header element represents a content block or the header of the entire page in the page.
4. HGROUP element is used to combine the title of a block or the entire page in the page.
5. FOOTER element indicates a content block or a full page in the page.
6. Figure element represents the grouping of media content and their title.
7. Section element represents a content block in the page, such as chapters.
8. NAV elements indicate the navigation link in the page.

1. Video element is used to define video.
2. Audio element is used to define audio.
3. Canvas element is used to display graphics, which itself has no behavior and only one piece of canvas.
4. Embed elements are used to insert various multimedia. The format can be MIDI, WAV, AIFF, AU, MP3, etc.
5. Mark element is used to show highlights.
6. Progress element is used to show the progress of any type of task.
7. Meter elements indicate measures and define the measurement within the pre -defined range.
8. Time element is used to display the date or time.
9. Command element, indicating the command button.
10. Details elements are used to show the details information that the user requires and can be obtained.
11. Summary element is used to define visible titles for Details elements.
12. DataList element is used to display optional data lists. It can be used in conjunction with the input element to make the drop -down list of input values.
13. The DataGrid element is also used to display the optional data list, which is displayed in the form of a tree list.
14. Keygen element indicates a key to generate.
15. OUTPUT elements indicate different types of output.
16. Source elements define media resources for media elements.
17. Menu element indicates the menu list.
18. Ruby element represents Ruby comments, RT elements represent the interpretation or pronunciation of characters. The RP element is used in RUBY notes to define the content displayed by the browser that does not support Ruby elements.
19. WBR elements indicate soft switching. The difference from the BR element is that the BR element means that the WBR element means the width of the browser window or the parent -level element. Do not change the line, and when the width is not enough, take the initiative to change the bank.
20. BDI elements define the text direction of the text, so that it is set off from the direction of the text around it.
21. Dialog element indicates the dialog box or window.

Some purely expression elements are abolished in HTML5. Only some browsers support elements and some elements that can have negative effects on availability.

The elements of pure expression are those elements that can be replaced by CSS. Basefont, BIG, Center, FONT, S, Strike, TT, U, their functions are purely displayed for page display. HTML5 advocates putting the page display function in the CSS style. Abolition and replace in the CSS style.

For Frameset elements, Frame elements, and NOFRAMES elements, because the Frame framework has a negative effect on web availability, the Frame framework is no longer supported in HTML5, and only supports the IFRAME framework. HTML5 also abolish Frameset, Frame and NOFRAMES.

For Applet, BGSound, Blink, Marquee and other elements, because only some browser supports, especially BGSOUND elements and Marquee elements are only supported by IE, they are abolished in HTML5. The Applet elements can be replaced by Embed elements or object elements, BGSOUND elements can be replaced by Audio element, and Marquee can be replaced by JavaScript programming.

The Canvas element mentioned above can provide a canvas for the page to display the graphic. Combined with the Canvas API, you can dynamically generate and display various graphics, charts, images and animations on this canvas. Canvas is essentially graphic. It cannot be zoomed. The drawn object does not belong to the page DOM structure or any name space. There is no need to use each chart as an object storage, and the performance performance is very good.

Use Canvas API to draw the context of the Canvas element first, and then use the various drawing functions encapsulated in the context to draw.

 <canvas id = canvas> alternative content </canvas> <script> var canvas = document.GetelementByid ('canvas'); VAR Context = Canvas.GetContext (2D); ontext.fillstyle = red ; Context.Strokestyle = Blue; // Practice shows that the default Fillstyle is BLACK Context.Fill great (0, 0, 100, 100); CK Context. strokerect (120, 0, 100, 100); </script>

SVG is another graphics function of HTML5. It is a standard vector graphic, a file format with its own API. HTML5 introduces the Inner Union SVG so that SVG elements can appear directly in the HTML mark.

 <svg height = 100 width = 100> <circle CX = 50 CY = 50 R = 50 /SVG>

The emergence of Audio and Video elements has made HTML5 media applications more new choices. Developers can play audio and video without using plug -ins. For these two elements, the HTML5 specification provides a general, complete, and script -controlled API.

Before the HTML5 specification comes out, the typical way to play videos on the page is to use Flash, Quicktime or Windows Media plug -in to embed audio and video in HTML. Relative to this method, there are two great benefits to use HTML5 media tags.

1. As the function of the native support of the browser, the new Audio and Video elements do not need to be installed.
2. Media elements want the web page to provide APIs that are universal, integrated and script -controlled.

 <video src = video.webm Controls> <object data = videoplayer.swf type = Application /x-SHOCKWAVE-FLASH> <Param name = Movie value = Video.swf /> </Object> Your Browser Does Not Support html5 video. </video>

Whether the browser detection supports Audio elements or Video elements is the simplest way to create it dynamically with scripts, and then detect whether specific functions exist.

 var hasvideo = !! (Document.createElement ('video'). CanPlayType);

HTML5 Geolocation API (geographical positioning API) can ask users to share their position. The method of use is very simple. If the user agrees, the browser will return the location information. This location information is provided to the browser by supporting the underlying device (such as laptop or mobile phone) that supports the geographical positioning function of HTML5. Location information consists of latitude, longitude coordinates and some other metadata.

Geolocation API does not specify which underlying technology to use the user to locate the application of the application. Instead, it is only used to retrieve the API of location information, and the data retrieved through the API only has a certain degree of accuracy, and it cannot guarantee that the location of the device returns is accurate. The device can use the following data source:

1. IP address

   Three -dimensional coordinates

   GPS

   MAC addresses from RFID, WiFi and Bluetooth to WiFi

2. GSM or CDMA phone ID
3. User customized data

 // Update Navigator.Geolocation.getCurrentPosition (UpdateLocation, HandleLocationEror); Function UpdateLocation {VAR LATITUDE = POSITION.COORDS.LAT iTude; // latitude var longitude = posity.coords.longitude; // longitude varcuracy = posity. Coords.accuracy; // accuracy var timeStamp = position.coords.timestAmp; // Timmers} // Error processing function function HandleLocationer (error) {....} Navigator.geoloc ATION.WatchPosition (UpdateLocation, handleLocationEror); // No longer accepting the location update navigator.Geolocation.Clearwatch (watchid);

For security considerations, communication between the frame, tabs, and windows in the same browser has been strictly restricted. However, in reality, there are some reasonable demand for the content of different sites to interact in the browser. In this case, if the browser can provide a direct communication mechanism, these applications can be better organized.

A new feature is introduced in HTML5, cross -document message communication, which can ensure that the IFRAME, tab pages, and windows are safely carried out. PostMessage API is the standard method of sending messages. Sending messages is very simple:

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

When receiving the message, you only need to add an event processing function to the page. When a message arrives, the source of the message is determined to decide whether to deal with the message.

 Window.adDeventListener (Message, Messagehandler, TRUE); Function Messagehandler (E) {switch (e.origin) {case friend.example.com: // Age (e.data); BREAK; default: // Message source Can't recognize // The message is ignored}}

The message event is a DOM event with Data (data) and Origin attributes. The Data attribute is the actual message passed by the sender, and the Origin attribute is the source of sending.

XMLHTTPREQUEST API makes AJAX technology possible. As an improved version of XMLHTTPREQUEST, XMLHTTPREQUEST Level2 has greatly improved its functions. There are two main aspects:

1. Cross -source XMLHTTPREQUEST
2. Progress

In the past, XMLHTTPREQUEST was limited to homologous communication, and XMLHTTPREQUEST Level2 realized the transnational XMLHTTPRequest through CORS. Cross -source HTTP request contains an Origin head, which provides the server with the source information of HTTP requests.

WebSockets is the most powerful communication function in HTML5. It defines a full dual -work channel, which can communicate only through a socket on the web.

In order to establish a WebSockets communication, the client and server upgrade the HTTP protocol to the WebSocket protocol when shaking hands. Once the connection is successfully established, we can pass the WebSocket message back and forth between the client and the server under the full dual -working mode.

In addition to the definition of the WebSockets protocol, the specification also defines the WebSocket interface for the JavaScript application. The use of the WebSockets interface is very simple. To connect the remote host, you only need to create a new WebSocket instance to provide a pair of URLs that hope to connect.

1. Tel element, indicating the phone number.
2. Email element indicates the email address text box.
3. URL element indicates the URL of the webpage.
4. Search element, for search engines, such as search box displayed on the top of the site.
5. Range element, numerical selector in a specific range, typical display is sliding bars.
6. Number element contains only values ​​fields.

1. Color element, color selector, based on color palette or coloring board for selection.
2. Datetime element shows the complete date and time, including time zone.
3. DateTime-Local, display date and time.
4. Time element, time selector and indicator of time zone.
5. Date element, date selector.
6. WEEK element, weekly selectioner in a certain year.
7. Month element, a monthly selector in a certain year.

When the user does not have the input value, the input control can display descriptive description or prompt information to the user through the Placeholder feature.

 <input name = name Placeholder = First and Last Name>

The browser can know whether the input value should be preserved through AutoComplete.

Through the autofocus characteristics, you can specify a table element to get the input focus. Only one Autofocus feature is allowed on each page. If multiple is set, it is equivalent to unspecifying this behavior.

The input control with text content and the textarea spatial control Specialcheck property. After setting, you will ask the browser if you should give feedback from the results of the spelling inspection. The Spellcheck attribute needs to be assigned.

By combined with the list characteristics and DataList elements, developers can construct a value selection list for a input -type control.

 <datalist ID = ContactList> <option [email protected]> </option> <option [email protected]> </option> </datalist> <input type = email id = contact = contact List>

By setting the min and MAX features, the value input range of the Range input box can be limited between the minimum and the highest value. You can set only one or two or two, or you can not set it.

For input -type controls, setting its STEP characteristics can specify the granularity of increasing or decreased input value.

Once a required feature is set for a input -type control, then this item must be filled, otherwise the form cannot be submitted.

If the Draggable element of the web element is true, this element can be dragged.

 <DIV DRAGGABLE = TRUE> Draggable Div </div>

The drag process will trigger a lot of events, mainly in the following:

1. Dragstart: The webpage element is triggered when dragging.
2. Drag: The dragged element continues to be triggered during the drag.
3. Dragenter: When the dragged element is triggered when entering the target element, the event should be listened to the target element.
4. Dragleave: When the dragged element is triggered, the event should be listened to the object element.
5. Dragover: Continuous triggers when the drag element stays in the target element, and the event should be listened to the target element.
6. DRAP: Drag element or file selected from the file system, triggers when dragging and falling.
7. Dragend: The webpage element is triggered at the end.

 DraggableElement.addeventListener ('Dragstart', Function (E) {console.log ('drag start!');});

During the drag, the event parameters accepted by the callback function have a Datatransfer attribute, pointing to a object, including various information related to dragging.

 DraggableElement.addeventListener ('Dragstart', Function (Event) {Event.datatransfer.setdata ('Text', 'Hello World!');});

1. Dropeffect: Drag and drop operation type determines how the browser displays the mouse shape. The possible values ​​are Copy, MOVE, LINK, and None.
2. EffectalOwed: Specifying the allowable operations, the possible values ​​are Copy, Move, Link, Copylink, Copymove, Linkmove, ALL, None, and Uninitialized (the default value is equivalent to all, that is, allow all operations).
3. Files: Contains a FileList object, indicating the file involved in the drag and drop, which is mainly used to process files dragged into the browser from the file system.
4. Types: The type of data stored in the Datatransfer object.

1. SetData (Format, Data): Store data on the Datatransfer object. The first parameter format is used to specify the storage data type, such as Text, URL, Text/HTML, etc.
2. Getdata (Format): Take the data from the Datatransfer object.
3. Cleardata (Format): Clear the data stored by the Datatransfer object. If the format parameter is specified, only the data of the format is cleared, otherwise all the data is removed.
4. SetdragImage (imagelement, x, y): Specify the image displayed during the drag process. By default, many browsers show a semi -transparent version of the dragging element. The parameter Imgelement must be an image element, not the path of the image, and the parameter x and y indicate the position of the image for the mouse.

JavaScript is a single thread. Therefore, the calculation of a long duration, back to block the UI thread, which causes the text to fill the text in the text box, click the button, etc., and in most browsers, unless the control is returned, it cannot open a new tab page. Essence The solution of this problem is web worker, which allows Web applications to have background processing capabilities, and its support for multi -threaded is very good.

However, the script executed in Web Workers cannot access the Window object on the page, that is, web workers cannot directly access the web page and DOM API. Although Web Workers does not cause the browser UI to stop responding, it will still consume the CPU cycle, resulting in a slower response speed.

Web Storage is a very important feature introduced by HTML5. It can store data locally on the client. It is similar to HTML4 cookie, but it can achieve much more function than cookies.

SessionStorage saves data in session, and the browser shuts down the data to disappear.

LocalStorage has always saved data on the client, unless deleted manually, it will be kept.

Whether it is SessionStorage, or LocalStorage, the API that can be used is the same.

1. Save data: localStorage.setItem (key, value);
2. Read data: localStorage.getItem (key);
3. Delete a single data: localstorage.removeItem (key);
4. Delete all data: localStorage.clear ();
5. Key to get a certain index: localstorage.key (index);

The above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate. Thank you for your support for VEVB Wulin.com.