Simple summary of HTML5

1.video tag (supports OGG MPEG4 WebM) IE9 + properties: src width height loop controls autoplay preload;

Method: Play () pause () load () Other property events, and so on. Of all properties, only the Videowidth and Videoheight properties are immediately available. Other properties are available after the video's metadata has been loaded.

2.audio tag (supports OGG MP3 Mav) IE9 + properties: AutoPlay controls loop preload src.
3. Drag and drop:

functionAllowDrop (EV) {ev.preventdefault (); //prevent default, otherwise cannot be placed in other elements}functiondrag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);//set the data type and value of the dragged data (you can make any value yourself)}functionDrop (EV) {ev.preventdefault ();varData=ev.datatransfer.getdata ("Text");//get dragged data, corresponding SetData ()Ev.target.appendChild (document.getElementById (data));}--------------------------------------------------------------------------------<div id= "Div1" ondrop= "Drop ( Event) "OnDragOver= "AllowDrop (event)" ></div>ondragstart= "Drag (event)" Width= "336" height= "/>"

The //ondragstart invokes the function and sets the dragged data through the SetData ();
//ondragover specifies where to place the dragged element, to remove the default setting;
//ondrop A drop event occurs when the drop data is dropped and the function is called. (You can get the dragged data and add it to the placement element)

4.Canvas:

<canvas id= "MyCanvas" width= "height=" ></canvas>--------------------------------------------- ------------------------------<script>var c=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); // The built-in HTML5 object has a variety of drawing methods;cxt.fillstyle= "#FF0000";  // staining cxt.fillrect (0,0,150,75); // The first two bits are the starting position coordinates, the last two bits are size </script>cxt.drawimage (img,0,0); // The image can be placed on the canvas;

5.SVG label (Scalable Vector graphics) (Google Maps)

You can attach a JavaScript event handler to an element.

In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.

6. Geo-positioning:geolocation

Use the GetCurrentPosition () method to get the user's location.

Watchposition ()-Returns the user's current location and continues to return to the update location when the user moves

7.web Storage: HTML5 uses JavaScript to store and access data.

if (Localstorage.pagecount)  {  localstorage.pagecount=number (localstorage.pagecount) +1;  } Else   {  localstorage.pagecount=1;  } document.write ("Visits" + Localstorage.pagecount + "time (s)." ); Calculates the number of times a user visits a page

Sessionstorage the same, just close the browser after the data is emptied;

8. Apply Cache Manifest (can be browsed offline or reduce the burden on the server) IE does not support:

Include the manifest attribute in the HTML tag (

The manifest file can be divided into three parts:

2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK://Files need to be connected to the server and will not be cached login.aspfallback ://file provides a fallback page when the page is inaccessible (e.g. 404 pages)/html5//404.html

Once the app is cached, it remains cached until the following occurs (the user empties the cache and the manifest file is updated by the modified program)

Updating the date and version number in the comment line # is a way to enable the browser to re-cache the file.

9.Web Worker: Run JS in the background without affecting page performance (available for large computations)

<p>count numbers: <output id= "result" ></output></p><button onclick= "Startworker ()" > Start Worker</button><button onclick= "Stopworker ()" >stop worker</button>----------------------- ----------------------------------------------varW;functionStartworker () {if(typeof(Worker)!== "undefined"){  if(typeof(w) = = "Undefined") {W=NewWorker ("Demo_workers.js"); } w.onmessage=function(event) {document.getElementById ("Result"). innerhtml=Event.data; };}Else{document.getElementById ("Result"). Innerhtml= "Sorry, your browser does not support Web Workers ...";}}functionStopworker () {w.terminate (); //Terminate Command}</script>

10. Server sends events, Server-sent event SSE

<div id= "Result" ></div>---------------------------------------------------------------------------- --if(typeof(EventSource)!== "undefined")  {//The EventSource object is used to send event notifications to the receiving server  varSource=NewEventSource ("/example/html5/demo_sse.php");//OnMessage event occurs every time an update is receivedSource.onmessage=function(event) {document.getElementById ("Result"). Innerhtml+=event.data + "<br/>";  }; }Else{document.getElementById ("Result"). Innerhtml= "Sorry, your browser does not support Server-sent events ..."; }

Other events: OnOpen onmessage onerror

input type of 11.HTML5:

Email URL

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

Range: <input type="range" name= "points" min= "1" max= "/>"

Date Month Week time datetime datetime-local

Search

HTML5 form elements:

DataList: Enter a list of options for the domain

Webpage: <input type= "url" list= "url_list" name= "link"/>////with the List Property reference DataList ID< DataList id= "Url_list" ><option label= "W3school" value= "http://www". W3School.com.cn "/><option label=" Google "value=" http://www.google.com "/><option label=" Microsoft " Value= "http://www.microsoft.com"/></datalist>

Keygen

The role of the keygen element is to provide a reliable way to authenticate users.

The keygen element is a key pair generator (Key-pair generator). When the form is submitted, two keys are generated, one is the private key, and one is the public key.

The private key is stored on the client and the public key is sent to the server. The public key can be used to later authenticate the user's client certificate (certificate).

Currently, the browser's poor support for this element is not enough to make it a useful security standard.

Output: Used for different types of outputs in the form, such as calculations or script output;

HTML5 Form Properties:

AutoComplete: Automatic prompt;

Autofocus: auto focus;

Form: Specifies the form or forms to which the input domain belongs (last name: <input type= "text" name= "lname" form="user_form" />) points to the ID of the FOM;

Override Properties for form: (formaction formenctype formmethod formnovalidate formtarget)

<form action= "demo_form.asp" method= "Get" id= "User_form" >E-mail: <input type= "Email" name= "userid" /><br/><input type= "Submit" value= "Submit"/><br/><input type= "Submit" formaction= "Demo_ Admin.asp "value=" submit as admin "/><br/><input type=" Submit "formnovalidate=" true "value=" Submit without Validation "/><br/></form>// can create different submit buttons

width="99"height="99"/>

List property: Specifies the DataList of the input field for the text search URL Telephone email date number range color;

min="0"max="10"step="3"/>

multiple="multiple"/> can select multiple files, also apply to email

Novalidate property: No validation;

Pattern Property: Verify the mode of input (regular)

Country code: <input type= "text" name= "Country_code"pattern= "[A-z]{3}" title= "Three letter country Code"/ >

PLACEHOLDER: hint;

Required: cannot be empty;

12.HTML semantic elements

Section: The label defines the sections in the document, (sections, segments). such as chapters, headers, footers, or other parts of the document. (a section of content)

Article: an independent content;

Nav: navigation;

Aside: Defines content outside the main area (such as the sidebar), which should be related to the content of the main area;

Header: element Note the presentation area used to define the content. (Multiple header elements can be used);

Footer: A footer usually contains the author of the document, copyright information, links to the terms of use, contact information, etc.;

Figure: Specify separate stream content (image, icon, photo, code, etc.), figcaption define the title;

Simple summary of HTML5