Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the new features of html5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

New element

Html5 has added some tag elements that are more semantic.

Structural element

The article element, which represents a piece of independent content on a page that is not context-sensitive, such as an article in a blog.

Aside element, which represents content other than article content, auxiliary information.

A header element that represents a content block in a page or a header for the entire page.

The hgroup element, which is used to combine a block in a page or the title of the entire page.

The footer element, which represents a content block in the page or the footer of the entire page.

The figure element, which represents the grouping of media content and their titles.

The section element, which represents a block of content on the page, such as a chapter.

The nav element, which represents the navigation link in the page.

Other elements

The video element, which is used to define video.

Audio element, which is used to define audio.

The canvas element, which is used to display graphics, has no behavior of its own and only provides a canvas.

Embed element, used to insert a variety of multimedia, formats can be Midi, Wav, AIFF, AU, MP3, and so on.

Mark element, which is used to display highlighted text.

The progress element is used to show the progress of any type of task.

The meter element, which represents weights and measures, defines measures within a predefined range.

Time element, which is used to show the date or time.

The command element, which represents the command button.

The details element, which is used to show the detailed information that the user requires and can get.

The summary element, which defines a visible title for the details element.

The datalist element, which is used to display an optional list of data, can be used with the input element to create a drop-down list of input values.

The datagrid element, also used to display an optional list of data, is displayed in the form of a tree list.

The keygen element, which represents the generated key.

Output element, which represents different types of output.

The source element that defines the media resource for the media element.

The menu element, which represents the menu list.

The ruby element represents the ruby comment, and the rt element represents the interpretation or pronunciation of the character. The rp element is used in ruby comments to define what is displayed by browsers that do not support the ruby element.

The wbr element, which represents soft line wrapping. The difference from the br element is that the br element indicates that the line must be wrapped here, while the wbr element means that the browser window or parent element is wide enough. Do not wrap, and when the width is not enough, take the initiative to wrap here.

The bdi element that defines the text orientation of the text away from the orientation setting of the text around it.

A dialog element that represents a dialog box or window.

Abrogated elements

Some purely expressive elements have been abolished in html5, only some of the elements supported by browsers and some elements that have a negative impact on usability.

Pure expressive element

Pure presentation elements are those that can be replaced with css. Basefont, big, center, font, s, strike, tt, u these elements, their function is purely for the page display service, html5 advocates the page display function in the css stylesheet unified processing, so abolish these elements and replace them with css style.

Elements that have a negative impact on availability

For frameset element, frame element and noframes element, because of the negative impact of frame framework on web usability, frame framework is not supported in html5, only iframe framework is supported, and frameset, frame and noframes are abolished in html5.

Only elements supported by some browsers

Applet, bgsound, blink, marquee and other elements are abolished in html5 because only some browsers support them, especially bgsound elements and marquee elements, which are only supported by IE. Applet element can be replaced by embed element or object element, bgsound element can be replaced by audio element, and marquee can be replaced by javascript programming.

New API

Canvas API

The canvas element mentioned above provides a canvas for the page to display graphics. Combined with Canvas API, you can dynamically generate and display a variety of graphics, charts, images and animations on this canvas. Canvas is essentially a bitmap canvas that cannot be scaled, and the drawn objects do not belong to the page DOM structure or any namespace. There is no need to store each entity as an object, and the execution performance is very good.

To draw with Canvas API, we must first obtain the context of the canvas element, and then use the various drawing functions encapsulated in that context to draw.

Alternative content var canvas = document.getElementById ('canvas'); var context = canvas.getContext ("2d"); / / get context / / set solid color context.fillStyle = "red"; context.strokeStyle = "blue"; / / practice shows that the default fillStyle is black context.fillRect (0,0,100,100) without setting fillStyle / / practice shows that the default strokeStyle is black context.strokeRect (120,0,100,100) without setting strokeStyle.

SVG

SVG is another graphics function of html5, it is a standard vector graphics, is a file format, has its own API. Html5 introduces inline SVG so that SVG elements can appear directly in html tags.

Audio and video

The advent of audio and video elements has opened up new options for html5's media applications, allowing developers to play audio and video without using plug-ins. For these two elements, the html5 specification provides a generic, complete, scriptable API.

Before the html5 specification, the typical way to play video on a page was to embed audio and video into html using Flash, QuickTime, or Windows Media plug-ins. Compared to this way, using html5 media tags has two major advantages.

As native browser support, new audio and video elements do not need to be installed.

Media elements like Web pages provide a generic, integrated, and scriptable API.

Your browser does not support HTML5 video.

Browser support detection

The easiest 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 specific function.

Var hasVideo =! (document.createElement ('video') .canPlayType)

Geolocation API

Html5's Geolocation API (geolocation API) can request users to share their location. The method is very simple, and if the user agrees, the browser will return location information, which is provided to the browser through an underlying device that supports html5 geolocation, such as a laptop or mobile phone. Location information consists of latitude, longitude coordinates and some other metadata.

Where does the location information come from?

Geolocation API does not specify which underlying technology the device uses to locate the user of the application. On the contrary, it is only an API used to retrieve location information, and the data retrieved through the API only has a certain degree of accuracy, and there is no guarantee that the location returned by the device is accurate. Devices can use the following data sources:

IP address

Three-dimensional coordinate

GPS

MAC address from RFID, WiFi, and Bluetooth to WiFi

ID of GSM or CDMA mobile phone

User-defined data

Usage

/ / once 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 handling function function handleLocationEror (error) {....} / / repeatedly update navigator.geolocation.watchPosition (updateLocation, handleLocationEror); / / No longer accept location update navigator.geolocation.clearWatch (watchId)

Communication API

Cross-document message delivery

For the sake of security, the communication between frames, tabs and windows running in the same browser has been strictly restricted. However, in reality, there are reasonable requirements for content from different sites to interact within browsers. In this case, if the browser can provide a direct communication mechanism, these applications can be better organized.

A new function of cross-document message communication has been introduced into html5, which can ensure secure cross-source communication among iframe, tabs, and windows. PostMessage API is the standard way to send messages, and sending messages is very simple:

Window.postMessage ('Hello, world',' http://www.example.com/');

When you receive a message, you only need to add an event handler to the page. When a message arrives, it is decided whether to process the message by checking 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 not recognized / / message ignored}}

A message event is a DOM event with data (data) and origin (source) properties. The data attribute is the actual message delivered by the sender, while the origin attribute is the sending source.

XMLHttpRequest Level2

XMLHttpRequest API makes Ajax technology possible. As an improved version of XMLHttpRequest, XMLHttpRequest Level2 has greatly improved its function. There are two main aspects:

Cross-source XMLHttpRequest

Progress event

Cross-source XMLHttpRequest

In the past, XMLHttpRequest was limited to homologous communication, and XMLHttpRequest Level2 implemented cross-source XMLHttpRequest through CORS. The cross-source HTTP request contains an Origin header that provides the server with the source information of the HTTP request.

WebSockets API

WebSockets is the most powerful communication function in html5. It defines a full-duplex communication channel, which can communicate only through a Socket on the Web.

WebSockets handshake

In order to establish WebSockets communication, the client and server upgrade the HTTP protocol to WebSocket protocol during the initial handshake. Once the connection is successfully established, WebSocket messages can be passed back and forth between the client and the server in full-duplex mode.

WebSockets interface

In addition to defining the WebSockets protocol, the specification also defines the WebSocket interface for JavaScript applications. The use of the WebSockets interface is simple. To connect to the remote host, you only need to create a new WebSocket instance and provide the peer URL you want to connect to.

Forms API

New form element

The tel element, which represents the phone number.

The email element that represents the e-mail address text box.

The url element, which represents the url of the web page.

Search element for search engines, such as the search box displayed at the top of the site.

The range element, a numerical selector within a specific range of values, is typically displayed as a slider.

The number element, which contains only numeric fields.

Future form elements

The color element, the color picker, is selected based on the color palette or palette.

The datetime element, which displays the full date and time, including the time zone.

Datetime-local, showing the date and time.

Time element, time selector and indicator without time zone.

Date element, date selector.

Week element, the week selector of a certain year.

Month element, the month selector in a certain year.

New form features and functions

Placeholder

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

Autocomplete

Browsers can use the autocomplete feature to know whether input values should be saved for future use.

Autofocus

The autofocus attribute allows you to specify a form element to get input focus, and only one autofocus property is allowed on each page. If more than one is set, this behavior is not specified.

Spellcheck

You can control the spellcheck property for input controls and textarea spaces with text content. After setting up, the browser will be asked if it should give feedback on the spell check results. The spellcheck property needs to be assigned.

List features and datalist elements

By combining the list feature with the datalist element, developers can construct a list of selected values for an input control.

Min and max

By setting the min and max properties, you can limit the numeric input range of the range input box to between the lowest and highest values. You can set only one, both, or neither.

Step

For an input control, setting its step property specifies the granularity at which the input value increases or decreases.

Required

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

Drag and drop API

Draggable attribute

If the draggable element of a web page element is true, this element can be dragged.

Draggable p

Drag and drop event

Dragging triggers a number of events, mainly the following:

Dragstart: triggered when a web page element starts dragging.

Drag: the dragged element continues to trigger while dragging.

Dragenter: triggered when the dragged element enters the target element, and should listen for the event in the target element.

Dragleave: triggered when the dragged element leaves the target element, which should be listened for in the target element.

Dragover: continues to trigger when the dragged element stays in the target element, and the event should be listened for in the target element.

Drap: a file that is dragged or selected from the file system, triggered when dragged and dropped.

Dragend: triggered when the dragging of a web page element ends.

DraggableElement.addEventListener ('dragstart', function (e) {console.log (' drag start!') ;})

DataTransfer object

During the drag, the callback function accepts an event parameter that has a dataTransfer property that points to an object and contains all kinds of information related to the drag.

DraggableElement.addEventListener ('dragstart', function (event) {event.dataTransfer.setData (' text', 'Hello Worldwaters');})

The properties of the dataTransfer object are:

DropEffect: the type of drag and drop operation that determines how the browser displays the mouse shape. Possible values are copy, move, link, and none.

EffectAllowed: specifies the allowed operations, and the possible values are copy, move, link, copyLink, copyMove, linkMove, all, none, and uninitialized (default, equivalent to all, that is, all operations are allowed).

Files: contains a FileList object that represents the files involved in dragging and dropping, mainly for handling files dragged from the file system into the browser.

Types: the type of data stored in the DataTransfer object.

The methods of the dataTransfer object are:

SetData (format, data): stores data on a dataTransfer object. The first parameter, format, is used to specify the type of data to store, such as text, url, text/html, and so on.

GetData (format): fetches data from a dataTransfer object.

ClearData (format): clears the data stored in the dataTransfer object. If the format parameter is specified, only the data in that format is cleared, otherwise all data is cleared.

SetDragImage (imgElement, x, y): specifies the image to display during dragging. By default, many browsers display a translucent version of the dragged element. The parameter imgElement must be an image element, not a path to the image, and the parameters x and y indicate the position of the image relative to the mouse.

Web Workers API

Javascript is single threaded. As a result, long-lasting calculations block the UI thread, making it impossible to fill the text box, click buttons, and so on, and in most browsers, a new tab cannot be opened unless control returns. The solution to this problem is Web Workers, which allows Web applications to have background processing capabilities and is very supportive of multithreading.

But scripts executed in Web Workers cannot access the page's window object, 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 still consumes CPU cycles, causing the system to react more slowly.

Web Storage API

Web Storage is a very important function introduced by html5, which can store data locally on the client side, similar to html4's cookie, but can be implemented much more powerful than cookie.

SessionStorage

SessionStorage saves the data in session, and when the browser closes, the data disappears.

LocalStorage

LocalStorage keeps the data locally on the client side all the time, unless it is manually deleted.

No matter whether it is sessionStorage or localStorage, the same API can be used. The following are commonly used (take localStorage as an example):

Save data: localStorage.setItem (key,value)

Read data: localStorage.getItem (key)

Delete individual data: localStorage.removeItem (key)

Delete all data: localStorage.clear ()

Get the key:localStorage.key (index) of an index

These are all the contents of the article "what are the New Features of html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.