About HTML5 new features (Baidu)

HTML5 includes the following new and updated features:

1. Added an HTML document type: <doctype html>
2. Added a number of structured tagged elements (3. Backward-compatible HTML and XHTML analysis rules
4. Added <audio> and <vidio> tag elements for multimedia content
5. More INPUT element type value, allow local date selection, time, color and number
6. Frames frame removed from HTML (but ifame preserved, sandbox sandbox)
7. APIs for two-dimensional drawing, media playback, media type registration, drag-and-drop, and cross-document message transmission
8. Web application cache for offline browsing

I. Painting canvas elements

<canvas> define graphics, draw paths, rectangles, circles, characters, and methods for adding images.

First create the canvas element and specify the ID, width, and height of the element to scatter:

<canvas id= "MyCanvas" width= "height=" ></canvas>

It is then drawn by Javas. The canvas element itself does not have the ability to draw, and all the drawing work must be done within JavaScript.

<script type= "Text/javascript" > var c=document.getelementbyid ("MyCanvas");　　　　　　　　　　var Cxt=c.getcontext ("2d");　　　　　　　　　　Cxt.fillstyle= "#FF0000";　　　　　　Cxt.fillrect (0,0,150,75); </script>

JavaScript uses the ID to find the canvas element:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:

The FillStyle method dyes it red, and the FillRect method specifies the shape, position, and size.

The following two lines of code draw a line:

Cxt.moveto (100,100);

Cxt.lineto (200,200);

The following line of code is to draw a circle:

Cxt.arc (70,18,15,0,math.pi*2,false);

These property values correspond to what, 70,18 are the x and Y axes respectively, 15 is the radius of the circle, 0 is the angle, math.pi*2 is the Pi, false is clockwise and true is counterclockwise.

The color gradient is also possible:

<script type= "Text/javascript" >

var C=document.getelementbyid ("MyCanvas");

var Cxt=c.getcontext ("2d");

var grd=cxt.createlineargradient (0,0,175,50);

Grd.addcolorstop (0, "#FF0000");

Grd.addcolorstop (1, "#00FF00");

CXT.FILLSTYLE=GRD;

Cxt.fillrect (0,0,175,50);

</script>

There are some other effects:

Curve Quadraticcurreto

Font Filltext

Second, audio and video

Video also supports multiple source elements, linked to different video files, and the browser will use the first recognizable format
Property value:
autoplay= "AutoPlay" ready to play right after
Loop= "Loop" plays again after playback

preload= "Pre-load"

Muted= "Mute"

volume-=0.1 Volume reduction

volume+=0.1 Volume Plus

Currenttime+=10 Fast forward 10 seconds

Currenttime-=10 Rewind 10 seconds

Playbackrate=1 accelerated Playback (default playback speed)

The Audio property value is the same as video

Third, storage

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

Localstorage-Data storage with no time limit

The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year.

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.

Iv. Semantic Labeling

<article> tags define external content (structural elements)
<aside> define content beyond the content of the page. The content of aside is related to the content of article. (Structural elements)
<figure> defines a grouping of media content and their titles. (Structural elements)
<section> tags define sections (section, sections) in the document. such as chapters, headers, footers, or other parts of the document (structural elements)

V. New form Types

1. Email

The email type is used for input fields that should contain e-mail addresses. When the form is submitted, the value of the email domain is automatically validated.

E-mail: <input type="email" name= "User_email"/>

2. URL

The URL type is used for the input domain that should contain the URL address. When the form is submitted, the value of the URL field is automatically validated.

Homepage: <input type="url" name= "User_url"/>

3. Number

The number type is used for input fields that should contain numeric values. You can also set a limit on the number of accepted numbers:

Points: <input type="number" name= "Points" min= "1" max= "/>"

4. Range

The range type is used for input fields that should contain numeric values in a range.

The range type is displayed as a slider bar. You can also set a limit on the number of accepted numbers:

type="range"Name= "Points" min= "1" max= "ten"/>

5. Date pickers (date, month, week, Time, DateTime, datetime-local)

HTML5 has a number of new input types that can be selected for the date and time

Date: <input type="date" name= "User_date"/>

6. Search

The search type is used for searching domains, such as site search or Google search. The search field appears as a regular text field.

7. Color selection

About HTML5 new features (Baidu)