html5 学习随笔 1

    html5 标签

<abbr>标签  表示它所包含的文本是一个更长的单词或短语的缩写形式

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.   输出The PRC was founded in 1949.

<address>标签

<canvas> 标签 这是一个画布的标签， 属性有 with 和height  

相应代码，首先定义一个画布标签<canvas id="myhuabu"/>

相应js代码<script type="text/javascript">
         function qq() {
             var can = document.getElementById("mycanvas");
             var cat = can.getContext("2d");//getContext 这个方法是返回一个用于在画布上绘图的环境。
             cat.fillStyle = '#FF0000';//这个环境所填充的颜色样式
             cat.fillRect(100, 100, 80, 100);fillRect 方法规定了形状、位置和尺寸。意思是花一个x =100；y=100 ；80*100的矩形
         }
    </script>

绘制这个图形的js

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);//这是设置移动的终点
cxt.lineTo(150,50);//这是移动到的起始坐标点
cxt.lineTo(10,50);//这也是移动到的起始坐标点
cxt.stroke();

绘制这个图形，圆形的js代码

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

把一个图像放在画布上相应的js

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

颜色渐变js相应代码

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

 

 

<video> 标签 视频标签

controls="controls"这个属性是向用户显示控件，比如播放等

autoplay=“autoplay”如果出现该属性，则视频在就绪后马上播放。等等等属性

 

<audio>标签 是音频标签