html5

（一）将一段文字拖拽带某个div中去
分析：
浏览器默认不许拖拽
数据拖拽后怎么体现出啦

解决过程：
1、文字不许拖拽
draggable="true"----让元素可以拖拽
2、文字内容怎么发送出去
ondragstart=" drag(event)"
函数中
      function drag(e){
             e.dataTransfer.setData("Text", e.target.id)     /*页面上必须设置id*/
      }
3、另一边接收获取文字
ondrop="drop(event)"
函数中
      function drop(e){
             var data = e.dataTransfer.getData('Text');


             /*内存中存在的东西，它以id的形式存在在内存中*/
             e.target.appendChild(document.getElementById(data));
        
             /*因为浏览器不许拖拽，所以设置事件阻止默认行为*/
             e.preventDefault();
        
       }
4、最后设置事件阻止默认行为
ondragover="allowDrop(event)"
函数中
       function allowDrop(e){
             e.preventDefault();
       }

=======================================================================================
（二）视频播放的处理：
controls-----控制器
autoplay-----自动播放
loop---------循环播放

（1）简单的视屏播放：
标准版：
<video controls=“controls/true”autoplay="autoplay" loop="loop">
<source src="XXX" type="vide/mp4">
你的浏览器不支持视屏播放，请下载最新的浏览器
</video>

自定义播放btn版：
<video loop="loop">
<source src=" XXX" type="vide/mp4">
你的浏览器不支持视屏播放，请下载最新的浏览器
</video>
<button onclick="fun(event);">播放</button>
function fun(e){
var video = docment.getElementByTagName("video")[0]
video,play();
}

=======================================================================================
(三）音频播放的处理
非循环播放：
<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>




----------------------------------------------------------------------------------------------------
简单的html5
1、XHTML严格模式，有开始也有结尾，严格区分大小写
2、htm与html一样的，只是有的老式的网页不能识别4位的后缀，所以删除l
3、html5新特性
（1）、语义特性（Class：Semantic）
（2）、本地存储
（3）、网页多媒体特性（Class：MULTIMEDIA）

4、head与header的区别
head用于定义html的属性，写的代码不能在页面上显示出来
header用于替代div，写的东西可以在网页中显示出来

5、<footer></footer>脚部分，就是代替了<div id="footer"></div>
6、<section>定义文档中的章节、页眉、页脚或文档中的其他部分
<section>
<h3></h3>
<p></p>
<section>
-----------------------------也相当于<div id=""></div>，就算删除<section>也不会影响


7、<hgroup>当<h>标签有很多时，用此标签包裹在一起
8、<nav>导航还是相当于div
<nav>
   <ul>
      <li></li>
   </ul>
</nav>

9、artical标签，表示独立的一块（与当前网页是独立的东西），不会对其他东西造成影响，在标签里面有自己的头部分<header>等

10、aside标签，表示旁边（也是独立的一块），一般用广告、侧边等

11、图文并茂
<figure>
    <figcaption>文字</figcaption>
    <figcaption><img src=" "></figcaption>
</figure>
----------------------------图片在文字上方，文字在图片左边边线下面对齐
与
<dl><dd><dt>相比：
图片在上方，文字在下方，但文字在图片左边边线的左边对齐


15、-----------------------------------------------------------------------------进度条
<meter value="3" min="0" max="10"></meter>
<progress max = "10" min = "0" value = "4"/>

16、<time>标签
<p>我们每天早上<time>9:00</time>上班</p>
《搜索引擎在抓时就知道9:00代表时间》

17、<menu>菜单
18、<datalist>标签
<input id="myCar" list="cars">
    <datalist id="cars">
        <option value="W3C">