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

This article introduces the relevant knowledge of "what are the characteristics of html5". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Html5 features are: 1, semantic tags; 2, enhanced form input type; 3, support video and audio playback; 4, Canvas drawing; 5, SVG drawing; 6, geographic location; 7, drag and drop API;8, Web Worker;9, Web Storage;10, WebSocket.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Ten new features of HTML5

In order to better handle today's Internet applications, HTML5 has added many new elements and functions, such as: drawing graphics, multimedia content, better page structure, better form processing, and several api drag-and-drop elements, positioning, including web application caching, storage, web workers, etc.

(1) semantic label

Semantic tags make the content of the page structured. See name and meaning.

The tag description defines the head area of the document, defines the tail area of the document, defines the navigation section of the document (section, section), defines the page independent content area, defines the sidebar content of the page, the sidebar content of the page is used to describe the details of the document or part of the document, the detail tag contains the title definition dialog box of details elements, such as a prompt box (2) enhanced form input type

HTML5 has several new form Input input types. These new features provide better input control and validation.

Input Typ

Description

Color

Mainly used to select colors

Date

Select a date from a date selector

Datetime

Select a date (UTC time)

Datetime-local

Select a date and time (no time zone)

Email

Input field containing e-mail addr

Month

Select a month

Number

Input field of numerical value

Range

The input field of numeric values within a certain range

Search

Used to search the domain

Tel

Define input phone number field

Time

Choose a time

Url

Input field of URL address

Week

Choose Zhou and year

HTML5 also adds the following form elements

Form element description

Element specifies the list of options for the input field

Use the element's list attribute to bind to the element's id

Provides a reliable way to authenticate users

The label specifies the key pair generator field used for the form.

For different types of output

Such as calculation or script output

New form properties for HTML5

Placehoder property, a short prompt is displayed on the input field before the user enters the value. That is, the default prompt of our common input box disappears after the user enters it.

The required property, which is a boolean property. The required input field cannot be empty.

The pattern attribute, which describes a regular expression used to validate the value of an element.

The min and max attributes, which set the minimum and maximum values of the element.

The step property, which specifies a legal numeric interval for the input field.

The height and width properties, which are used for the image height and width of tags of type image.

The autofocus property, which is a boolean property. Specifies that the domain automatically gets focus when the page is loaded.

The multiple property, which is a boolean property. Multiple values can be selected in the specified element.

(3) Video and audio

HTML5 provides a standard for playing audio files, even with elements

Your browser does not support audio elements.

The control property allows you to add playback, pause, and volume controls.

Between and you need to insert prompt text for elements that the browser does not support.

Elements allow the use of multiple elements. Elements can be linked to different audio files, and the browser will use the first supported audio file

Currently, the element supports three audio formats: MP3, Wav, and Ogg

HTML5 specifies a standard way to include video through the video element.

Your browser does not support Video tags.

Control provides playback, pause and volume controls to control video. You can also use the dom operation to control the pause of video playback, such as the play () and pause () methods.

The video element also provides width and height attributes to control the size of the video. If you set the height and width, the required video space is retained when the page loads. If these properties are not set, the browser does not know the size of the video, the browser can no longer retain a specific space when loading, and the page will change according to the size of the original video.

The content inserted between the and tag is provided to browsers that do not support video elements.

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

(4) Canvas drawing

Labels are just graphics containers and must be drawn using scripts.

Canvas-graphic

1, create a canvas, a canvas in the web page is a rectangular box, through the elements to draw. By default, elements have no borders and content.

Tags usually need to specify an id attribute (frequently referenced in scripts), the size of the canvas defined by the width and height attributes, and use the style attribute to add borders. You can use multiple elements in a HTML page

2. Using Javascript to draw an image, the canvas element itself does not have the ability to draw. All drawing work must be done within JavaScript

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.fillStyle= "# FF0000"; ctx.fillRect (0memo 150,150,75)

The getContext ("2d") object is a built-in HTML5 object with a variety of ways to draw paths, rectangles, circles, characters, and add images.

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is # 000000 (black). The fillRect method defines the current filling method of the rectangle. Draw the rectangle of 150x75 on the canvas, starting at the upper left corner (0jin0).

Canvas-path

To draw lines on Canvas, we will use the following two methods:

MoveTo (xPowery) defines the line start coordinates

LineTo (xPowery) defines the line end coordinates

We have to use the "ink" method to draw lines, just like stroke ().

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.moveTo (0Power0); ctx.lineTo (200100); ctx.stroke ()

Define the start coordinates (0J0) and the end coordinates (200100). Then use the stroke () method to draw the line

Canvas-text

Using canvas to draw text, the important properties and methods are as follows:

Font-defines the font

FillText (text,x,y)-draw solid text on canvas

StrokeText (text,x,y)-draw hollow text on canvas

Use fillText ():

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.font= "30px Arial"; ctx.fillText ("Hello World", 10jue 50)

Use the "Arial" font to draw a high 30px text on the canvas (solid)

Canvas-gradient

Gradients can be filled in rectangles, circles, lines, text, etc., and various shapes can define different colors.

There are two different ways to set Canvas gradients:

CreateLinearGradient (x1)-create a line gradient

CreateRadialGradient (x _ journal y _ r _ 1 ~ r _ 1)-create a radial / circular gradient.

When we use a gradient object, we must use two or more stop colors.

The addColorStop () method specifies the color stop, and the parameters are described by coordinates, which can range from 0 to 1.

Using a gradient, set the value of fillStyle or strokeStyle to a gradient, and then draw a shape, such as a rectangle, text, or a line.

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); / / Create gradientvar grd=ctx.createLinearGradient (0, "red"); grd.addColorStop (0, "red"); grd.addColorStop (1, "white"); / / Fill with gradientctx.fillStyle=grd;ctx.fillRect (10, 10, 10 and 150)

Creates a linear gradient that fills the rectangle with a gradient

Canvas-Ima

Place an image on the canvas using the drawImage (image,x,y) method

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); var img=document.getElementById ("scream"); ctx.drawImage (img,10,10)

Put an image on the canvas.

(5) SVG drawing

SVG refers to scalable vector graphics.

The difference between SVG and Canvas

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

Canvas uses JavaScript to draw 2D graphics.

SVG is based on XML, which means that every element in SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawing is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.

Canvas is rendered pixel by pixel. In canvas, once the graph is drawn, it will no longer get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the drawing.

(6) Geographic positioning

HTML5 Geolocation (geolocation) is used to locate the location of the user.

Window.navigator.geolocation {getCurrentPosition: fn is used to obtain current location data watchPosition: fn monitors changes in user location clearWatch: fn clears 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 ('altitude:', pos.coords.altitude) console.log ('velocity:', pos.coords.speed)} / / callback function (err) {console.log ('failed to obtain user location data') / / console.log (arguments) } / / callback for failed positioning) (7) drag and drop API

Drag and drop is a common feature that grabs an object and then drags it to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

The process of drag and drop is divided into source object and target object. The source object refers to the element you are about to drag, while the target object refers to the target location to be placed after dragging.

Events that can be triggered by dragged and dropped source objects (which may move)-3:

Dragstart: drag to start

Drag: dragging

Dragend: dragging end

The composition of the whole dragging process: dragstart*1 + drag*n + dragend*1

Events that can be triggered by dragged and dropped target objects (no movement occurs)-4:

Dragenter: drag into

Dragover: drag and hover

Dragleave: drag away

Drop: release

The composition of the whole dragging process 1: dragenter*1 + dragover*n + dragleave*1

The composition of the whole dragging process 2: dragenter*1 + dragover*n + drop*1

DataTransfer: tractor object for data transfer

Use the e.dataTransfer property to save the data in the drag source object event:

E.dataTransfer.setData (k, v)

Use the e.dataTransfer property to read data in the drag target object event:

Var value = e.dataTransfer.getData (k) (8) Web Worker

When a script is executed in a HTML page, the state of the page is unresponsive until the script is complete.

Web worker is a JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page. You can continue to do whatever you want: click, select, and so on, while web worker is running in the background.

First check whether the browser supports Web Worker

If (typeof (Worker)! = = "undefined") {/ / Yes! Web worker supports! / / some code. } else {/ Sorry! Web Worker does not support}

The following code detects whether worker exists, and if not,-it creates a new web worker object and then runs the code in "demo_workers.js"

If (typeof (w) = = "undefined") {w=new Worker ("demo_workers.js");}

Then we can send and receive messages from web worker. Add a "onmessage" event listener to web worker:

W.onmessage=function (event) {document.getElementById ("result") [xss_clean] = event.data;}

When web worker delivers a message, the code in the event listener is executed. Data from event.data is stored in event.data. When we create the web worker object, it continues to listen to the message (even after the external script completes) until it is terminated.

To terminate web worker and release browser / computer resources, use the terminate () method.

Complete Web Worker instance code

Count numbers:

Stop Worker

Var wterfunction startWorker () {if (typeof (Worker)! = = "undefined") {if (typeof (w) = = "undefined") {w=new Worker ("demo_workers.js");} w.onmessage = function (event) {document.getElementById ("result") [xss_clean] = event.data;};} else {document.getElementById ("result") [xss_clean] = "Sorry, your browser does not support Web Workers...";}} function stopWorker () {w.terminate ();}

The count script created, which is stored in the demo_workers.js file

Var iTunes 0; function timedCount () {ifolidum 1; postMessage (I); setTimeout ("timedCount ()", 500);} timedCount (); (9) Web Storage

Use HTML5 to store users' browsing data locally. Earlier, local storage used cookies. But Web storage needs to be more secure and fast. This data will not be saved on the server, but it will only be used on the website data requested by the user. It can also store a large amount of data without affecting the performance of the site. The data exists as a key / value pair, and the data of the web page is only allowed to be accessed by that page.

The two objects on which the client stores data are:

LocalStorage-data storage with no time limit

SessionStorage-for a session data store, the data is deleted when the user closes the browser window.

Before using web storage, check whether the browser supports localStorage and sessionStorage

If (typeof (Storage)! = = "undefined") {/ / Yes! Support localStorage sessionStorage object! / / some code. } else {/ / Sorry! Web storage is not supported. }

The same API can be used for both localStorage and sessionStorage. 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

(10) WebSocket

WebSocket is a protocol that HTML5 began to provide for full-duplex communication over a single TCP connection. In WebSocket API, the browser and the server only need to shake hands, and then a fast channel is formed between the browser and the server. Data can be transmitted directly between the two. The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can exchange data directly through the TCP connection. When you get the Web Socket connection, you can send data to the server through the send () method and receive the data returned by the server through the onmessage event.

W3Cschool tutorial (w3cschool.cn) function WebSocketTest () {if ("WebSocket" in window) {alert ("your browser supports WebSocket!"); / / Open a web socket var ws = new WebSocket ("ws://localhost:9998/echo") Ws.onopen = function () {/ / Web Socket is connected, use the send () method to send data ws.send ("send data"); alert ("data sending...");} Ws.onmessage = function (evt) {var received_msg = evt.data; alert ("data received...");} Ws.onclose = function () {/ / close websocket alert ("connection closed...");} } else {/ / browser does not support WebSocket alert ("your browser does not support WebSocket!") }} this is the end of running WebSocket "what are the features of html5"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.