HTML5
1.什么是html5？
html5就是html的最新的修订版本，（这里我们要知道html5不是一个全新的知识），html5的设计目的主要是是为了移动端上支持多媒体的。
我们都知道HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
2.接下来我们来看一下视频标签<video></video>
我们都知道在html5出来之前我们用的视频是用的插件Flash，这个插件我们应该比较熟悉吧，直到现在还是有用Flash的，相对html5出来之前来说，少了很多，为什么会这样：
这只是我的个人理解：因为<video></video>好用，我们的视频打开就可以直接观看，然而Flash插件，还需要我们来下载，所以显得比较麻烦，所以他的优势不如以前了。
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
<video></video>的兼容性：
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
IE9以前的版本不支持
3.视频的属性：
autoplay：自动播放
controls ：显示控件（比如播放、暂停）
loop：循环播放
muted：静音
这是我们比较常用的
然后是我们js控制的：
ended:是否停止播放
pause当前处于暂停状态
currentTime 播放到当前时间
duration：影片的总时长
视屏事件：
play（）开始播放
pause（）暂停播放
视频我只介绍了我们常用的，音频和视频的方法差不多；
4.拖放：
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
这里我们要知道，默认的拖放元素只有两个（img 和 a）Chrome safair 正常使用Firefox部分支持
其他的元素都要通过draggable属性设为true
(1)dragstart：拖动开始事件
(2)drag： 拖动进行中事件
(3)dragend：拖动结束事件
拖动的生命周期：
（1）拖动开始
（2）拖动进行中
（3）拖动结束
拖动的目标对象(固定不动的对象)可以触发四个事件
(1)dragenter：拖动着进入事件
(2)dragover：拖动着在上方悬停事件
(3)dragleave：拖动着离开事件
(4)drop：在上方释放/松开
这是一个来回拖放的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放事件</title>
<style type="text/css">
#div{
width: 380px;
height: 216px;
border: 1px solid black;
margin-bottom: 50px;
margin-left: 200px;
}
#div1{
width: 380px;
height: 216px;
border: 1px solid black;
position: absolute;
margin-bottom: 50px;
margin-left: 800px;
top:300px;
}
</style>
</head>
<body>
<div id="div" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="imgs/1.jpg" draggable="true" id="img" ondragstart="drag(event)">
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script type="text/javascript">
function allowDrop(event){
event.preventDefault();
}
function drag(event){
event.dataTransfer.setData("names",event.target.id);
}
function drop(event){
event.preventDefault();
var data = event.dataTransfer.getData("names");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
