HTML5 新特性
一、HTML语义化标签
- 概念：语义化标签是一种书写HTML的方法论
- 解决：明确了html的书写规范
- 优点：适合搜索引擎检索，利于阅读
二、HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas、svg 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持：localStorage 、sessionStorage
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
三、HTML5 视频：video 元素
1、video支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件（IE:no、Firefox:3.5+、opera:10.5+、Chrome:5.0+、Safari:no）
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件（IE:9.0+、Firefox:no、opera:no、Chrome:5.0+、Safari:3.0+）
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件（IE:no、Firefox:4.0+、opera:10.6+、Chrome:6.0+、Safari:no）
2、video标签的属性：
src（音频URL）、autoplay（自动播放）、controls（向用户展示控件）、loop（循环播放）、preload（在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性）
3、视频方法、属性以及事件：（参考W3C资料：http://www.w3school.com.cn/html5/html_5_video_dom.asp）
方法：play()、pause()、load()、canPlayType
1 <video src="movie.ogg" width="320" height="240" controls="controls"> 2 Your browser does not support the video tag. //供不支持 video 元素的浏览器显示的 3 </video> 4 //或者 5 <video width="100" height="100" controls="controls"> 6 <source src="/i/movie.ogg" type="video/ogg"> 7 <source src="/i/movie.mp4" type="video/mp4"> 8 Your browser does not support the video tag. 9 </video>
四、HTML5 音频：audio 元素：
1、audio 支持三种视频格式：
Ogg Vorbis ：（IE:no、Firefox:3.5+、opera:10.5+、Chrome:3.0+、Safari:no）
MP3 ： （IE:9.0+、Firefox:no、opera:no、Chrome:3.0+、Safari:3.0+）
Wav ： （IE:no、Firefox:3.5+、opera:10.5+、Chrome:no、Safari:3.0）
2、属性：src（音频URL）、autoplay（自动播放）、controls（向用户展示控件）、loop（循环播放）、preload（在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性）
注：可使用 <object> 或者HTML5<embed> 标签、 <audio> 元素来将插件添加到 HTML 页面
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
//仅Chrome支持
1 <audio controls="controls"> 2 <source src="孙燕姿 - 我很愉快.mp3" type="audio/mp3" /> 3 <source src="孙燕姿 - 我很愉快.mp3" type="audio/ogg" />
Your browser does not support this audio format. 5 </audio>
//问题：IE6,IE7不支持，其余浏览器均支持，Opera不能自动播放
1 <audio autoplay> 2 <source src="孙燕姿 - 我很愉快.mp3" type="audio/mp3" /> 3 <embed src="孙燕姿 - 我很愉快.mp3" type="audio/mp3"/> 4 </audio>
//问题：IE6,IE7均不支持，其余浏览器均支持，Opera不能自动播放
1 <embed src="孙燕姿 - 我很愉快.mp3"> 2<noembed><bgsound src="孙燕姿 - 我很愉快.mp3"></noembed>
//在IE6,7上不能播放，IE8会弹出“非正常使用的Articx”等字样的提示
//Firefox上正常
//Chrome上正常
//Opera不支持
1 <object data="孙燕姿 - 我很愉快.mp3" />
五、HTML5 拖放：
1、设置元素为可拖放：<img draggable="true">
2、拖动什么 - ondragstart 和 setData()
3、放到何处 - ondragover：event.preventDefault()
4、进行放置 - ondrop
例子：参考于：https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1, #div2 {
float:left;
width:100px;
height:35px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
