新特性
- 用于绘画的canvas元素
- 用于媒介回访的video和audio元素
- 对本地离线存储更好的支持
- 新的特殊内容元素 article footer header nav section
- 新的表单控件 calendar date time email url search
video标签
- src是视频源文件路径
- control提供了播放暂停的音量控件
- autoplay会自动播放preload会在页面加载时进行加载预备播放,若使用autoplay则会忽略该属性
- loop循环播放
- height和width分别是播放器的高和宽
- type可以指定视频的文件格式,例如:video/mp4,safari必须是mpeg4类型,ie8不支持video元素,ie9中也必须是mpeg4格式的视频
- 在<video>和</video>中间的文本,类似img标签的alt属性,当浏览器不支持该标签的时候则会显示这些文字.
video-DOM
可以使用document.getElementById()来通过id获取标签,然后调用其方法.
w3c上调用了play()和pause()方法来控制播放和暂停,使用了paused属性判断播放器是否处于暂停状态,还使用了width和height属性来控制播放器窗口的宽高.
所以可以使用DOM来控制video属性.
audio
HTML5规定了audio元素来控制音频的播放.
audio元素类似video元素
拖放
HTML5中任何元素都能够拖放
为了使元素可以被拖放,首先需要设置其darggable属性为true,让元素支持拖放.
当元素被拖动时ondragstart属性会调用一个指定的方法,方法中通常传入拖动事件,然后通过事件的dataTransfer.setData()方法设置被拖动的数据类型和值.可以使用事件的target.id属性获取值.
使用ondragover属性将元素放到其他元素中,若需要设置允许放置e,必须阻止对元素的默认处理方式.通过调用ondragover事件的event.preventDefault()方法来实现.
使用ondrop进行放置
被拖动的元素需要设置id
<!DOCTYPE html>
<html>
<head>
<title>JOE</title>
<style type="text/css">
#div1{
border: 1px solid #aaaaaa;
/*width: 20%;*/
height: 100px;
float: left;
padding: 60px;
}
#div2{
border: 1px solid #aaaaaa;
/*width: 20%;*/
height: 100px;
float: left;
margin-left: 40px;
padding: 60px;
}
</style>
<script type="text/javascript">
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖入到矩形中</p>
<div id='div1' ondrop="drop(event)" ondragover="allowDrop(event)">
<img id='drag1' src="QQ20171107-142421.png" draggable='true' ondragstart='drag(event)'/>
</div>
<div id='div2' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
</body>
</html>
w3c对拖放的标注:
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
