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格式
添加音频：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<!--当浏览器不支持以上视频格式，则显示下面语句-->
Your browser does not support the audio tag.
</audio>
表单元素就不举例子了，其各种浏览器的支持如下：
可见其在opera浏览器中支持较好，但是现在我们可以在任一浏览器中使用他们了，都会以文本框的形式显示，尽管可能不会显示其效果，如type="date",其可能只会显示一个文本框，而不会有日期供我们选择。
Canvas元素特性：
canvas是html5的新特性，其提供一个绘图的工具，但其本身并不具备绘图的动作，动作都是有js来完成的。
<!-- 定义一个canvas画板 -->
<canvas width="700" height="400" id="canvas"></canvas>
<!-- 在画板上进行绘图动作 -->
<script type="text/javascript">
//获得canvas对象
var c=document.getElementById("canvas");
//定义画笔对象
var cxt=c.getContext("2d");
//填充颜色
cxt.fillStyle="#FFC0CB";
//定义大小，坐标为坐上角0,0，宽和高为150,75
cxt.fillRect(0,0,150,75);
</script>
效果图：
矢量图形：
矢量图形是由几何特性绘制的图形，矢量可以是一个点，一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以*无限制的重新组合。它的特点是放大后不会失真，和分辨率无关，适用于一些图形设计，文字设计，logo设计，版式设计。
canvas绘制矩形和三角形圆形，加载图片：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="canvas" width="1000" height="800" />
<script type="text/javascript">
//生成一张纸
var cv = document.getElementById("canvas")
//获取到笔对象
var pen=cv.getContext("2d")
//定义笔样式
pen.fillStyle="#99cc33"
pen.fill()
//绘制矩形,以填充的方式，当然也有以线条的方式stroke
pen.fillRect(100,100,200,200)
//绘制三角形，定义起点
pen.moveTo(300,300)
//y轴不变，x轴向右移动100
pen.lineTo(400,300)
//x轴不变，y轴向下移动100
pen.lineTo(300,400)
//连接回起点
pen.lineTo(300,300)
//填充
pen.fill()
//绘制圆形
//开始绘制路径
pen.beginPath()
pen.arc(400,100,50,0,Math.PI*2,false)//false为顺时针，true为逆时针
pen.closePath()
pen.fill()
//在画板上加载图片
//实例化图片对象
var img = new Image();
img.src="美女.jpg";
pen.drawImage(img,0,0,100,100)
//直接显示图片，执行脚本的流程是等待图片装载完毕之后才会执行下面的操作，如果不想这样的话，我们可以用onload（）函数
/*
* img.onload=function(){
* pen.drawImage(img,0,0,100,600)
* }*/
</script>
</body>
</html>
效果图如下，其中图片素材读者可替换成自己的。
