新特性
用于绘画的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格式的视频
在和中间的文本,类似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
JOE
#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;
}
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));
}
请把图片拖入到矩形中
w3c对拖放的标注:
调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
