HTML5 知识库

HTML5学习初步

   阅读:440次   评论:0条   更新时间:2011-07-22    

 

新增标签

Markup Elements

Meida Elements

Canvas Elements

Form Elements

Input Type Attribute Values

 

<video><audio>标签

 

<canvas>标签

创建一个canvas <canvas id="myCanvas" width="200" height="100"></canvas>

通过JS控制

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

//画个矩形

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

//画线

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

//画圆

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

//渲染

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

//放置图片

var img=new Image();

img.src="img_flwr.png";

cxt.drawImage(img,0,0);

 

通过JS存储数据 

localStorage 一直存在

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

 

sessionStorage 浏览器进程

<script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

 

更多的input type="?"

<email><url>自动验证

<number><range>可设置min max step value

DatePickers 包括<month><week><time><datatime><datatime-local>

<search>

<color>

 

Form

<datalist><keygen><output> (没看明白)

Form Attribute

autocomplete(记录 类似ajax那种输入提示)

autofocus

form(让分开的form结构联系到一起 通过id)

其他诸如novalidate placeholder multiple pattern 等等表单属性

 

另外多出很多诸如Tags Attributes Events等

惨遭Reference


写得非常详细
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

Global site tag (gtag.js) - Google Analytics