一、HTML5有哪些新特性
1.用于媒体播放的<audio>、<video>
2.用于绘画的<canvas>
3.更好的支持本地离线存储
4.新的特殊内容元素,如：article、header、footer、nav等
5.新的表单控件，如：calendar、date、time、email、url、search
二、音频和视频播放
1.简单的音频播放和视频播放
<video width="100%" height="80%" src="./media/CoolShow_02.mp4" controls="controls">你的浏览器不支持该标签</video><audio src="./media/My_Destiny.mp3" controls="controls">你的浏览器不支持该元素</audio>上面的controls属性使用的是<video>和<audio>自带的播放控件，如播放控制、声音控制、全屏控制等。
2.格式问题
由于不同的浏览器支持的播放格式不同，，如何实现在不同的浏览器上使用相同的代码?
html5提供了<resource>标签，可以同时提供多套视频格式，浏览器会自动使用第一个能识别的视频格式。
<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">你的浏览器不支持该标签</video>3.自定义按钮实现播放/暂停、画面大小控制。
<script type="text/javascript">var myVideo = document.getElementById("video1");function playPause() {if (myVideo.paused)myVideo.play();elsemyVideo.pause();}function makeBig() {myVideo.width = 560;}function makeSmall() {myVideo.width = 320;}function makeNormal() {myVideo.width = 420;}</script>4.视频编解码工具
1)编解码工具
FFmpeg
官网：
下载：
2)使用命令行进行转码
指令，进入需要转码的文件的路径
cd D:\a
然后，执行转码指令
D:\a>D:\ffmpeg\bin\ffmpeg-ia.mp3-acodec libvorbisb.mp4
D:\ffmpeg\bin\ffmpeg：为下载的转码工具的路径
三、拖拽
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1 {width: 488px;height: 370px;background-color: #aaaaaa;}img {width: 200px;height: 200px;}</style><script type="text/javascript">function allowDrop(ev) {ev.preventDefault();}//设置拖拽对象，以id的形式进行标记function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}//取得对象，存放function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");//获得要拖拽的元素的id// ev.target.appendChild(document.getElementById("drag1"));ev.target.appendChild(document.getElementById(data));//2种都可以}</script></head><body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/><img id="drag1" src="header.jpg" draggable="true" ondragstart="drag(event)"/></body></html>
四、canvas绘画
canvas元素本身是没有绘图能力的，所有的绘制工作必须在js中完成。1.绘制线条
<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #FF0000;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");//创建context对象，起始坐标（0,0）cxt.moveTo(10, 10);//moveTO：移动画笔，不连线cxt.lineTo(150, 50);//lineTo：连线cxt.lineTo(10, 50);cxt.lineTo(10,10);cxt.stroke();</script></body></html>2.绘制圆形，填充
<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000"; //填充颜色cxt.beginPath();//参数分别为：圆心坐标x,y,半径，起始弧度，和终止弧度cxt.arc(70,38,35,4,Math.PI*2,true); //填充的参数cxt.closePath();cxt.fill();//完成填充</script></body></html>3.绘制渐变色，使用渐变色进行填充
<!DOCTYPE HTML><html><body><canvas id="myCanvas" width="200" height="100"style="border: 1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");var grd = cxt.createLinearGradient(0, 0, 180, 30);//与渐变有关的一些参数值grd.addColorStop(0, "#FF0000");//起始颜色grd.addColorStop(1, "#00FF00");//结束颜色cxt.fillStyle = grd; //将渐变色设置为填充颜色cxt.fillRect(0, 0, 175, 60);//填充区域</script></body></html>
五、SVG
和canvas相似，区别在于SVG绘制的图是可伸缩的矢量图，不依赖与分辨率。
1.绘制五角星
在乎的是看风景的心情，旅行不会因为美丽的风景终止。
