1.2 html5基础知识2

一、拖放

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));
}

  ![](img_w3slogo.gif)

• 注:需要给可拖动的元素添加属性：draggable=”true"，
• ondragstart:拖动什么
• ondragover:放在何处
• ondrop:进行放置
  event.dataTransfer.setData("type值",event.target.id) :设置被拖放的数据的类型
  event.dataTransfer.getData("type值") :获得被拖放的数据的类型

二、自定义属性data-

• 通过DOM存储与DOM对象强相关的数据；
• 把内容和数据分开；数据写在标签的属性上；

    
张三
    
李四
    
王五
    
六三

• 通过dataset来获取自定义属性：element.dataset.属性名

三、新的 Input 类型-智能表单

• 新的类型包含：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
• html5中表单涉及的标签：
  • 功能上的表单元素

• 类型上的表单元素
  网页开发过程中，可以根据需求，使用特定的智能表单类型；

"url" name="txt_url" id="txt_url">

### 四、网页多媒体
- 音频

- 视频 video

//poster：海报，广告展示

- 音视频其他属性
![](http://upload-images.jianshu.io/upload_images/4418623-3cd536d5749e493f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 兼容方案：[https://html5media.info/](https://html5media.info/)

### 五、WEB存储
- localStorage - 没有时间限制的数据存储;//对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
- sessionStorage - 针对一个 session 的数据存储;//针对一个 session 进行数据存储。当用户关闭当前页面后，数据会被删除

if(typeof(Storage)!=="undefined"){//判断是否可以使用web存储
　　localStorage.Name="one";
}

### 六、应用程序缓存
- 特点：
  + 离线浏览 - 用户可在应用离线时使用它们，速度 - 已缓存资源加载得更快，减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
  + 使用时需要在标签中添加manifest属性，并配置manifest文件;
  +  把html5慢慢往应用开发靠近
- 具体步骤如下：
  1.  正常开发(html+css+js)
  2.  给html添加一个manifest属性，指向一个文本文件；文件格式cache.manifest

//cache.manifest文件的写法：
CACHE MANIFEST
//缓存的版本（更改version会重新缓存）

version 1.0.1

//需要缓存的文件
CACHE:
index.html
index.js
index.css
//可以联网的文件，*代表所有文件；
NETWORK:
*

### 七、访问历史 API
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态
在HTML5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态

1.  window.history.forward(); // 前进
2.  window.history.back(); // 后退
3.  window.history.go(); // 刷新
4.  通过JS可以加入一个访问状态
4.  history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)， 改变历史状态)

### 八、全屏 API
- JavaScript中可以通过调用requestFullScreen()方式实现指定元素的全屏显示

var element = document.querySelector('...');
element.requestFullScreen();

### 九、文件API
- 对于表单里的input来说：可以直接通过name找到
    document.forms[0].input_file
- 选择多个文件：设置multiple属性；
``
- 替换自带丑按钮的解决方法；