HTML5高级特性概览-优快云博客

本文链接：https://blog.youkuaiyun.com/happygirl0917/article/details/107452657

1.视频（vedio audio都要记得controls）

<source src=".mp4" type="vedio/mp4"></source>//多个source 浏览器识别并用第一个

</vedio>

vedio与dom的结合

var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play(); //播放
else
myVideo.pause(); //暂停
}

function makeBig()
{
myVideo.width=560;
}

2.音频 audio

</audio>

3.拖放

分成拖的图片放的位置

图片：draggable为true 表可拖 ondragstart表示拖动的东西是什么

<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" />
function drag(e){

e.dataTransfer.setData("Key",e.target.id);//表示拖动的是key 值是id

}

位置：ondragover：放到何处 drop:放到这个地方的是什么

function ondragover(e){ e.preventDefault();}

function ondrop(e){

e.preventDefault();

var img=e.dataTransfer.getData("Key");

e.targat.appendChild=document.getElementById(img);

}

4canvas 画布

具体api：https://www.w3school.com.cn/tags/html_ref_canvas.asp（忘记就查太多了）

var c=document.getElementById("canvas").getContext("2d");

c.fillRect(0,0,125,124)---->从（0，0）开始125*124大小的画布

c.fillStyle('#eee");

5 svg (会有一篇文章专门讲svg)https://www.w3school.com.cn/svg/svg_intro.asp

6.地理位置

7.web存储（开坑？区别）

localSotrage（没有时间限制） sessionSotrage（关闭浏览器后，消失）

8.应用缓存在离线时也可访问

<html manifest="demo.appcache">

实例 - 完整的 Manifest 文件

CACHE MANIFEST //与服务器首次建立后缓存
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK: //不会缓存
login.asp

FALLBACK:// 无法访问的
/html5/ /404.html

9.web worker （运行在后台的js 不影响性能）

var w;

if(typeof(Worker)!=="undefined")//判断是否支持
  {
  // Yes! Web worker support!
    if(typeof(w)=="undefined"){
      w=new Worker("/example/html5/demo_workers.js");
    }
    w.onmessage = function (event) {
      document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  // Sorry! No Web Worker support..
  }

终止：

w.terminate();

10.服务器发送事件（网页自动获取服务器的更新）

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br />";
  };

11.表单

input输入的更新

表单：

datalist：（规定了输入框内容的范围）<datalist id="url_list">
   <option label="W3School" value="http://www.w3school.com.cn" />
   <option label="Google" value="http://www.google.com" />
   <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

keygen：类似密钥

Encryption: <keygen name="security" />

output：输出

12.