html5可以理解为html+css+js
其目前可以解决：1.浏览器的兼容问题 2.统一web应用标准 3.解决文档结构定义不明确问题 4.解决web应用中的功能受限问题 5.是程序员编写的web应用更加独立
html5的判断是<!DOCTYPE html>标签，此标签内不含其他任何元素，便是html5。
html5新增特性：video,audio,canvas,新的特殊内容元素（article,footer,header,nav,section）,新增的表单控件（calendar,date,time,email,url,search）
添加视频：
目前html5只支持ogg,mpeg4,webm格式
添加音频：
1 <audio controls="controls"> 2 <source src="song.ogg" type="audio/ogg"> 3 <source src="song.mp3" type="audio/mpeg"> 4 <!--当浏览器不支持以上视频格式，则显示下面语句--> 5 Your browser does not support the audio tag. 6 </audio>
表单元素就不举例子了，其各种浏览器的支持如下：
可见其在opera浏览器中支持较好，但是现在我们可以在任一浏览器中使用他们了，都会以文本框的形式显示，尽管可能不会显示其效果，如type="date",其可能只会显示一个文本框，而不会有日期供我们选择。
Canvas元素特性：
canvas是html5的新特性，其提供一个绘图的工具，但其本身并不具备绘图的动作，动作都是有js来完成的。
1 <!-- 定义一个canvas画板 --> 2 <canvas width="700" height="400" id="canvas"></canvas> 3 <!-- 在画板上进行绘图动作 --> 4 <script type="text/javascript"> 5 //获得canvas对象 6 var c=document.getElementById("canvas"); 7 //定义画笔对象 8 var cxt=c.getContext("2d"); 9 //填充颜色 10 cxt.fillStyle="#FFC0CB"; 11 //定义大小，坐标为坐上角0,0，宽和高为150,75 12 cxt.fillRect(0,0,150,75); 13 </script>
效果图：
矢量图形：
矢量图形是由几何特性绘制的图形，矢量可以是一个点，一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后不会失真，和分辨率无关，适用于一些图形设计，文字设计，logo设计，版式设计。
canvas绘制矩形和三角形圆形，加载图片：
1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="1000" height="800" /> 9 <script type="text/javascript"> 10 //生成一张纸 11 var cv = document.getElementById("canvas") 12 //获取到笔对象 13 var pen=cv.getContext("2d") 14 //定义笔样式 15 pen.fillStyle="#99cc33" 16 pen.fill() 17 //绘制矩形,以填充的方式，当然也有以线条的方式stroke 18 pen.fillRect(100,100,200,200) 19 //绘制三角形，定义起点 20 pen.moveTo(300,300) 21 //y轴不变，x轴向右移动100 22 pen.lineTo(400,300) 23 //x轴不变，y轴向下移动100 24 pen.lineTo(300,400) 25 //连接回起点 26 pen.lineTo(300,300) 27 //填充 28 pen.fill() 29 //绘制圆形 30 //开始绘制路径 31 pen.beginPath() 32 pen.arc(400,100,50,0,Math.PI*2,false)//false为顺时针，true为逆时针 33 pen.closePath() 34 pen.fill() 35 //在画板上加载图片 36 //实例化图片对象 37 var img = new Image(); 38 img.src="美女.jpg"; 39 pen.drawImage(img,0,0,100,100) 40 //直接显示图片，执行脚本的流程是等待图片装载完毕之后才会执行下面的操作，如果不想这样的话，我们可以用onload（）函数 41 /* 42 * img.onload=function(){ 43 * pen.drawImage(img,0,0,100,600) 44 * }*/ 45 </script> 46 </body> 47 </html>
效果图如下，其中图片素材读者可替换成自己的。
