2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。这一刻web世界已经发生了巨大的改变。
HTML5代表着Web发展的未来方向。无论大家身为开发人员还是高级用户，关于这一Web编程新基础的种种态势都得到了各位的关注。时至今日，网络银行、实时视频聊天以及短视频共享已经成为Web领域的立足根基，而接下来还将有更多极具突破性的趋势及成果不断涌现。
增加了新的语义化标签：
增添了input的属性、类型：
input新属性：
placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
pattern: 正则验证 如: pattern=”[0-9]{7,12}”
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
input的新类型：
email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
range: 选择区域
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
强化了form表单
video出现果断抛弃flash
以往的网络如果播放视频等，需要flash插件
flash存在的问题
如果浏览器不支持flash那么视频就无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式，仍然不能在所有浏览器中播放
目前安卓4.4也抛弃了flash……
HTML5的video标签
width、height属性：
设置媒体元素的大小，单位为像素；
省略该属性，则使用播放源文件的大小；
仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
src 属性：指定播放文件的URL。
video标签的出现可以让我们不用考虑用户是否有flash
video支持的视频格式：MP4、WebM、Ogg
Ps：并不是所有的浏览器都支持MP4格式
解决方法：
视频 mp4 格式适用于IE、chrome 和 Safari，要确保视频在Firefox与Opera中也能够正常播放需要source元素
video的常用属性
controls 属性：用户将鼠标悬停至正在播放的视频时，显示工具条；一但移开，工具条件就会隐藏
autoplay 属性：一旦视频就绪马上开始自动播放。
loop 属性:视频结束后将重新开始播放。
muted 属性: 如果出现该属性，则输出为静音。
poster 属性:将在视频文件播放前显示图片（广告图片）。
preload 属性：是否在页面加载后载入视频 ( 预加载 ) 如有autoplay属性则进行忽略
Ps：
video常用属性方法
duration：整个媒体文件的播放时长，以s为单位。
currentTime：当前播放时间，以s为单位。
paused：如果媒体文件当前被暂停，则返回true。
load ( ) 方法：用于重新加载src指定的媒体文件。
pause ( ) 方法：用于暂停正在播放中的媒体文件。
play ( ) 方法：用于播放媒体文件。
video的常用事件
error————–请求数据时遇到错误时触发
play—————开始播放时触发
pause————-暂停时触发
timeupdate——-播放时间改变时触发
ended————-播放结束时触发
volumechange—-音量改变时触发
Ps：可以使用addEventListener 方法来对事件发生进行监听。
audio出现了
audio支持情况
目前audio元素支持三种格式：MP3、Wav、Ogg
audio常用属性
audio的常用属性和方法与video基本一样
如：play( ) 、pause( ) 、autoplay、controls……..
Canvas
canvas 标签是 HTML 5 中的新标签。
canvas的应用使前端工程师们更像是艺术家。
canvas标签的基本结构
canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和 name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。JavaScript使用document.getElementById()方法来确定正确的画布，如下面代码所示：
Ps:IE 6 7 8不支持
每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：
在标识画布并指明了它的上下文之后，就可以开始绘画了
绘制图形的流程
哈喽~~
告诉大家我要开始绘画了
确定要绘制的起点
……
确定要绘制的终点
路径绘制结束
确定画笔的样式
使用设置好的画笔描边或者填色
现在用代码实现刚刚说的
首先我们要开始一个路径
路径移到画布中指定的点，也就是我们的起点
然后添加一个新点，画线
画完了要关闭路径
开始填充颜色
开始填充绘制好的路径
设置画线的宽度
用来设置描边颜色
绘制已定义好的路径
ok，画图完毕
绘制矩形
rect(x,y,w,h)：x、y为起始坐标，w、h为矩形的宽、高
支持这么写：
ctx.fillRect(x,y,w,h) 及 ctx.strokeRect(x,y,w,h)
绘制圆形
arc(x,y,r,sa,ea,true/false)：
x、y为圆心坐标，r为半径，
sa、ea分别为起始角度和结束角度，
true是逆时针画圆，false是顺时针画圆；
360度角即2PI弧度，1度就是2PI/360=PI/180弧度，
90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)
绘制文字
方法：
fillText(text,x,y,maxWidth): 填充绘制
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出
strokeText(text,x,y,maxWidth): 描边绘制
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出；
常用的属性
font 文本内容的当前字体属性
示例: ctx.font = ‘bold 60px 微软雅黑’;
textAlign 文本内容的当前对齐方式
示例: ctx.textAlign=“left/center/right”;
textBaseline 绘制文本时使用的当前文本基线
示例: ctx.textBaseline=“ top/middle/ bottom ”;
清除画布
既然能够绘制图形，我们也能清除
清除canvas方法：
x : 清除起点横坐标
y : 清除起点纵坐标
width : 清除长度
height : 清除高度
清除画布：
ctx.clearRect(0,0,cvs.width,cvs.height);
图形的组合方式
新画图形是压在原图形上或者原图覆盖新图形等等一系列新图与原图形的结合方式叫做图形的组合，大概分为十一种方式。
比如：显示新图覆盖原图、或者只显示原图和新图相重叠部分等等。
globalCompositeOperation属性 控制图形的组合方式
这个属性归getContext(‘2d’)所创建的对象所有