简单说下我对H5的新增的标签和css3的新增属性

Posted 2020-08-06

　　html 英文全称是：HyperText  Markup  language； 中文全称是超文本标记语言又称超链接文本标记语言；

　　H5呢就是HTML第五代版本；

　　首先智能表单

<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 提交地址

　　method 是提交方式 默认是GET get是没有做任何保密。 然而POST是加密传输传输数据无限，

　　　　required是必填项

　　　　autocomoelete  是设置记忆输入

　　　　autofocus 自动聚焦

　　　　pattern 是判断正则

　　下面是 canvas　　画图板

　　　　getContext("2d");设置画笔

　　　　

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)


}

这是一个随机画线的脚本

moveTo(100,100); 画笔起点

lineTo画线、

closePath() 结束画图

.beginPath() 开始绘图

下面是音视频

 

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="播放"
}else{

v.play();
this.innerHTML="暂停"
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="恢复"
}else{
v.muted=false;
this.innerHTML="静音"
}
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;//满放
}
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;
}
}

}

上面是视频的简单控件 moz   webkit o ms快进 快退webkit 不支持；

开始css3

css 英文全称是 Cascading style sheet； 中文全称是层叠样式表；

CSS3 就是在css基础上加了点东西而已

@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

上面是动画属性转载 W3School