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

Source: Internet
Author: User

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=" "/>

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 ();


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


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{ ();
This.innerhtml= "Pause"
Zong.innerhtml=math.round (v.duration);
Btn1[1].onclick=function () {
Btn1[2].onclick=function () {
Btn1[3].onclick=function () {
if (V.muted==false) {
This.innerhtml= "Recovery"
This.innerhtml= "Mute"
Btn1[4].onclick=function () {
Btn1[5].onclick=function () {
Btn1[6].onclick=function () {
V.mozrequestfullscreen ();
Btn1[7].onclick=function () {
v.playbackrate=0.5;//Full Release
Btn1[8].onclick=function () {
Btn1[9].onclick=function () {


SetInterval (function () {
Dang.innerhtml=math.round (V.currenttime);
for (var i=0; i<li1.length;i++) {
Li1[i].onclick=function () {



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.