最近更新
阅读排行
关注本站
染指HTML5
阅读：3346 次 编辑日期：2014-03-10
目录：
概述：
移动端的发展必然会是以后的主流，而且PC端也会逐渐的放弃掉蛋疼的IE，从而得到更好的UI体验，所以今天我们开启HTML5 + CSS3的学习篇章，我也是边琢磨边写，如果哪里写的有错误，欢迎大家指正。
HTML5的DOCTYPE：
HTML5的DOCTYPE声明很简单：
<!DOCTYPE HTML>
HTML5插入视频：
不用Flash播放视频了是不是很爽？
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
还有更爽的，controls 属性供添加播放、暂停和音量控件。
为什么要插入ogg和mp4后缀的两个的文件？
首先source 元素是用来链接不同的视频，video 元素允许多个 source 元素。
ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 mp4 类型。
ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 mp4 类型。
为什么要插入一段文字？
不用担心，这行文字只在不支持 video 元素的浏览器中显示。
HTML5插入音频：
视频都能插入了，音频更不在话下：
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
HTML 5 拖放：
这个功能很NB，可以把拖动的元素放到指定元素内。
设置元素为可拖放
<img draggable="true" />当元素被拖动的时候 - ondragstart() 被拖动的数据 - setData() 当放置被拖数据时 - drop() 把拖动的市局放到何处 - ondragover()
HTML：//
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
JS：//
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
