html5基础（第一天）

今天开始了html5的学习，相比原来的html，html5的调整，让我们的html文档结构变得更加清晰，
便于查看和修改；同时，html5中也新增了一些功能。

（请将文中的“《”替换为“<”）

首先，我们可以在body中使用<header></header>和<footer></footer>来表示头部和底部的<div>;
<section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，
会在文档流中开始一个新的节。

可以用<nav>来将具有导航性质的链接划分在一起，我们以前使用形如<div id="nav">或<ul id="nav">
这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标签里；
《nav>
《ul>
《li>《a href="index.html">Home</a></li>
《li><a href="/about/">About</a></li>
《li><a href="/blog/">Blog</a></li>
《/ul>
《/nav>

在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签，w3c赋予的定义：
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，
但如果被删除，则不应对文档流产生影响。
《figure>
《figcaption>小猫猫</figcaption>
《img src="?？？" width="350" height="234" />

进度条-----progress
《progress max=10 min=0 value=4>
《/progress>

《datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

当我们要拖拽一个东西，如一段文字到一个区域，并且复制进去，我们该如何做呢？
首先我们要 ①创建拖拽对象，设置draggable属性
②处理拖拽事件 a. dragstart：当元素拖拽开始触发； b.drag：在元素拖拽过程中触发； c.dragend：元素拖拽结束时触发
③创建投放区
④使用dataTransfer传递数据
3.name:文件名
<div id="layer1">
<img src="images/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
《script type="text/javascript">
function drag(e){
e.dataTransfer.setData('Text', e.target.id);
}
function allowDrop(e){
e.preventDefault();//
}
function drop(e){
var data= e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
e.preventDefault();//
}
</script>

网页中插入多媒体：
插入视频：
《video src="a.mp4" controls='true'》 （视频可以设置宽和高，但要注意画面是否会被拉伸变形）
您的浏览器不支持 video 标签。
《/video》
《button onclick="fun()"》click《/button》
《script type="text/javascript"》
function fun(){
var video1=document.getElementsByTagName('video')[0];
video1.pause()---暂停
video1.play()--开始
}
《/script>
插入音频：
《audio controls="controls" loop="loop">
《source src="song.ogg" type="audio/ogg" />
《source src="song.mp3" type="audio/mpeg" />
您的浏览器不支持 audio 标签。
《/audio>

loop--循环 controls--默认的控制按键（播发暂停，进度条，时间）