新特性
- 用于繪畫的canvas元素
- 用于媒介回訪的video和audio元素
- 對本地離線存儲更好的支持
- 新的特殊內(nèi)容元素 article footer header nav section
- 新的表單控件 calendar date time email url search
video標簽
- src是視頻源文件路徑
- control提供了播放暫停的音量控件
- autoplay會自動播放preload會在頁面加載時進行加載預備播放,若使用autoplay則會忽略該屬性
- loop循環(huán)播放
- height和width分別是播放器的高和寬
- type可以指定視頻的文件格式,例如:video/mp4,safari必須是mpeg4類型,ie8不支持video元素,ie9中也必須是mpeg4格式的視頻
- 在<video>和</video>中間的文本,類似img標簽的alt屬性,當瀏覽器不支持該標簽的時候則會顯示這些文字.
video-DOM
可以使用document.getElementById()來通過id獲取標簽,然后調(diào)用其方法.
w3c上調(diào)用了play()和pause()方法來控制播放和暫停,使用了paused屬性判斷播放器是否處于暫停狀態(tài),還使用了width和height屬性來控制播放器窗口的寬高.
所以可以使用DOM來控制video屬性.
audio
HTML5規(guī)定了audio元素來控制音頻的播放.
audio元素類似video元素
拖放
HTML5中任何元素都能夠拖放
為了使元素可以被拖放,首先需要設置其darggable屬性為true,讓元素支持拖放.
當元素被拖動時ondragstart屬性會調(diào)用一個指定的方法,方法中通常傳入拖動事件,然后通過事件的dataTransfer.setData()方法設置被拖動的數(shù)據(jù)類型和值.可以使用事件的target.id屬性獲取值.
使用ondragover屬性將元素放到其他元素中,若需要設置允許放置e,必須阻止對元素的默認處理方式.通過調(diào)用ondragover事件的event.preventDefault()方法來實現(xiàn).
使用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對拖放的標注:
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
