1.HTML5新个性
(1)标签：nav article footer header aside...(2)表单新个性：input type取值：date time week email number(3)表单属性：form formaction(提交地址) formmethod(提交形式) required readonly disabled(4)表单控件标签：progress meter datalist
1.1媒体元素
1.1.1 video
（1）在video标签呈现之前，如果想在网页中播放视频或者音频数据是十分艰难的。（2）H5中的video标签能够向应用img显示图片一样简略去播放视频（3）video提供了很多属性和办法，咱们能够通过间接设定或者通过js管制视频的显示（4）读写属性 src, autoplay(自动播放), poster=“封面 放封面的地址” ,loop(循环播放),controls(管制条)，width height 宽高个别不一起设置应用（5）办法：play()播放，pause()暂停，paused()切换 是否是暂停状态，volume()管制音量，currentTime()以后播放秒数 playbackRate()倍数播放
1.1.2 audio音频
audio元素与video相似，用来播放音频的。其属性办法事件也简直与video元素统一。当不加control时相当于背景音乐<audio src="./音视频/1.mp3" controls loop autoplay></audio>
1.2 canvas
(1)把握canvas元素的基本概念，学会如何在页面上搁置一个canvas元素，如何应用canvas元素绘制出一个简略的矩形(2)把握应用门路的办法，可能利用门路绘制出圆与多边形(3)把握突变图形的绘制办法，学会图形变形，图形缩放，图形组合，以及给图形绘制暗影的办法根本用法(1)获取canvas对象--获取画布 通过document.getElementById()等办法获得canvas对象(2)获取上下文--获取画布 图形上下文是一个封装了很多绘图性能的对象，参数只能是"2d" var context = canvas.getContext("2d");(3)定义填充款式 context.fillStyle="red";(4)绘制填充图形 context.fillStyle(10,10,100,100);//第一个参数是x轴开始的地位，第二个参数是y轴开始的地位，第三个参数是绘制图形的宽，第四个参数是绘制图形的高
1.2.1 绘制填充矩形(fillRect)
<body> <canvas width="400px" height="400px"></canvas></body><script> window.onload = function(){ //1.获取canvas对象---获取画布 var canvas = document.querySelector("canvas"); //2.获取上下文对象---获取画布 var context = canvas.getContext("2d"); //3.绘制填充款式 context.fillStyle = "red"; //4.绘制填充矩形 context.fillRect(10,10,100,100); }</script>
1.2.2 绘制轮廓矩形/边框矩形
<body> <canvas width="400px" height="400px"></canvas></body><script> window.onload = function(){ //1.获取canvas对象 var canvas = document.querySelector("canvas"); //2.获取上下文 var context = canvas.getContext("2d"); //3.设置轮廓款式 context.strokeStyle="red"; //4.设置轮廓的线宽 context.lineWidth = 10; //5.绘制边框矩形或者轮廓矩形 context.strokeRect(0,0,100,100); //6.革除一部分区域 context.clearRect(0,0,50,50); //7.分明全副区域 context.clearRect(0,0,400,400); }</script>
1.2.3 绘制圆
<body> <canvas width="400px" height="400px"></canvas></body><script> window.onload = function(){ //1.获取canvas对象 var canvas = document.querySelector("canvas"); //2.获取上下文 var context = canvas.getContext("2d"); //3.绘制圆、曲线、直线须要门路 context.beginPath(); //4.圆的门路 x y r 开始弧度 完结弧度 圆的方向是否是逆时针门路 //Math.PI --180度 context.arc(100,100,50,0,Math.PI,true); //context.arc(100,100,50,0,Math.PI/2); //5.直线门路 context.lineTo(100,100);//指回圆点 //6.完结门路 context.closePath(); //7.填充款式 context.fillStyle="red"; //8.绘制填充圆 context.fill(); //绘制轮廓圆 // context.stroke(); }</script>
1.2.4 圆挪动
<body> <canvas width="400px" height="400px"></canvas></body><script> window.onload = function(){ //1.获取canvas对象 var canvas = document.querySelector("canvas"); //2.获取上下文对象 var context = canvas.getContext("2d"); var bubble = { x:100, y:100, r:50, color:'red' }; draw(bubble); move(bubble); setInterval(function(){ //革除画布 context.clearRect(0,0,600,600); move(bubble); },200) //绘制办法 function draw(bubble){ context.beginPath(); context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2); context.fillStyle = bubble.color; context.fill(); } //挪动 function move(bubble){ bubble.x += 5; bubble.y += 5; draw(bubble); } } </script>