一、html5新标签
1.<header></header> ---用作页眉；
2.<footer></footer> ---用作页脚；
3.<nav></nav> -----用作导航；
4.<section></section> --元素用于对网站或应用程序中页面上的内容进行分块,定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。section表示一段专题性的内容，一般会带有标题。一个section元素通常由内容及其标题组成。
5.<hgroup></hgroup> ---标签用于对网页或区段（section）的标题进行组合。
6.<article></article> -- 它代表一个独立的、完整的相关内容块。article 本身就是独立的、完整的，是可独立分配，或是重复使用的，可用作论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。
7.<aside></aside> --- 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside字面理解为“旁边”，是跟主内容相关，但是又可以独立的内容 ，可以是广告、引用、侧边栏等等。用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。
8.<figure></figure> ---更能语义化的定义出页面中图片列表，最多用于图文并茂规定独立的流内容（图像、图表、照片、代码等等）。
9.<meter>和<progress> ---表示进度条。具有value、min、max属性，分别表示现在的进度，最小值，最大值，不同之处在于progress的属性值可以不用 ""。
10.<time> ---表示时间用法：<time datetime="2008-02-14">情人节</time>有个约会。
11.<datalist> --- 标签定义选项列表。比select的效果更好，请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
用法：<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
12. <dialog>--用于对话，与dt、dd搭配使用。
二、拖拉
1.设置待拖拽对象的可拖拽性；
设置待拖拽对象的draggable属性值为“true”。
2.设置待拖拽对象绑定拖拽事件οndragstart="drag(event)"并发送数据；
function drag(e){
e.dataTransfer.setData("Text",e.target.id);//发送数据
}
3.投放区域绑定接收数据事件并组织浏览器默认事件οndrοp="drop(event)"；
function drop(e){
var data= e.dataTransfer.getData('Text')//获取数据
e.target.appendChild(document.getElementById(data));
e.preventDefault();//组织浏览器默认事件
}
4.投放区拖拽结束后组织浏览器默认事件οndragοver="allowDrop(event)"；
function allowDrop(ev)
{
ev.preventDefault();
}
完整代码
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(e){
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e){
var data= e.dataTransfer.getData('Text')
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
</script>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div>
<br />
<p id="drag1" draggable="true" οndragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
三、视频和音频的操作
1.视频操作
<video src="a.mp4" controls='true'></video>
<button οnclick="fun()">click</button>
<script type="text/javascript">
function fun(){
var video1=document.getElementsByTagName('video')[0];
video1.pause()---暂停
video1.play()--开始
}
</script>
具有属性：src，autoplay="autoplay"(加载时播放)，controls="controls"(显示控件按钮)，height、width（宽高只能内嵌设置），loop="loop"(循环播放)。
2.音频操作
<audio src="song.ogg" controls="controls"></audio>
<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>
支持多种类型
<audio controls="controls" loop="loop">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
可以通过绑定事件来实现不用控件按钮，操作而通过外部按钮控制状态
具有属性：src，autoplay="autoplay"(加载时播放)，controls="controls"(显示控件按钮)，loop="loop"(循环播放)。
9976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
