Simply say my new tag for H5 and the new properties of CSS3

HTML English full name is: Hypertext Markup language; Chinese full name is Hypertext Markup Language, also known as hyperlink text Markup language;

H5 is the fifth generation version of HTML;

First Smart Form

<form action= "" method= "POST" >
<input type= "Color" name= "id=" "value=" "/>
<input type= "Tel" required= "required" autofocus= "" autocomplete= "Off" pattern= "" Name= "" id= "" value= ""/>
<input type= "Submit" onactivate= "Name=" "id=" "value=" "/>
</form>

Action Submit Address

method is the default way of submitting a get get is not doing any secrecy. However, the post is encrypted to transmit data infinitely,

Required is a required entry

Autocomoelete is to set the memory input

Autofocus Auto Focus

Pattern is the judgment of the regular

Here is the canvas drawing board

GetContext ("2d"); set brush

　　　　

Window.onload=function () {
var M=document.getelementbyid ("MyCanvas");
var Pen=m.getcontext ("2d");
Pen.beginpath ();
Pen.moveto (100,100);
Pen.lineto (220,200);
Pen.lineto (300,20);
SetInterval (function () {
Pen.clearrect (0,0,400,400);
var n=math.random () *300;
Pen.beginpath ();
Pen.moveto (10,n);
for (i=1;i<7;i++) {
N=math.random () *300;
Pen.lineto (10+i*50,n);
}
Pen.stroke ();
Pen.closepath ();
},1000)


}

This is a randomly drawn line script.

MoveTo (100,100); Brush start

LineTo Drawing Line,

Closepath () End drawing

. Beginpath () Start drawing

Here is the audio and video

Video

Window.onload=function () {
Btn1=document.getelementbyid ("Btn1"). getElementsByTagName ("button");
V=document.getelementbyid ("Videol");
Zong=document.getelementbyid ("Zong");
Dang=document.getelementbyid ("Dang");
P1=document.getelementbyid ("P");
Li1=document.getelementbyid ("Ul1"). getElementsByTagName ("Li");
Btn1[0].onclick=function () {

if (V.paused==false) {
V.pause ();
This.innerhtml= "Play"
}else{

V.play ();
This.innerhtml= "Pause"
Zong.innerhtml=math.round (v.duration);
}
Btn1[1].onclick=function () {
v.volume-=0.1;
}
Btn1[2].onclick=function () {
v.volume+=0.1;
}
Btn1[3].onclick=function () {
if (V.muted==false) {
V.muted=true;
This.innerhtml= "Recovery"
}else{
V.muted=false;
This.innerhtml= "Mute"
}
Btn1[4].onclick=function () {
v.currenttime-=10;
}
Btn1[5].onclick=function () {
v.currenttime+=10;
}
Btn1[6].onclick=function () {
V.mozrequestfullscreen ();
}
Btn1[7].onclick=function () {
v.playbackrate=0.5;//Full Release
}
Btn1[8].onclick=function () {
v.playbackrate=5;
}
Btn1[9].onclick=function () {
v.playbackrate=1;
}

}

}
SetInterval (function () {
Dang.innerhtml=math.round (V.currenttime);
M=v.currenttime/v.duration;
p1.value=m*100;
},100);
for (var i=0; i<li1.length;i++) {
Li1[i].onclick=function () {

V.src=this.title;
}
}

}

The above is a simple control of the video Moz WebKit o ms Fast Forward rewind webkit not supported;

Start CSS3

CSS English full name is cascading style sheet; Chinese full name is cascading style sheet;

CSS3 is adding something to the CSS base.

@keyframes	specifies animation.	3
animation	The shorthand properties of all animated properties, in addition to the Animation-play-state property.	3
animation-name	Specifies the name of the @keyframes animation.	3
animation-duration	Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.	3
animation-timing-function	Specifies the speed curve of the animation. The default is "ease".	3
animation-delay	Specifies when the animation will start. The default is 0.	3
animation-iteration-count	Specifies the number of times the animation has been played. The default is 1.	3
animation-direction	Specifies whether the animation will play backwards in the next cycle. The default is "normal".	3
animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3

Above is the animated property reprint W3school

Simply say my new tag for H5 and the new properties of CSS3