HTML5 是下一代的 HTML，新增了不少的标签啊什么的，今天就总结一波（悄咪咪其实是因为面试题好多都在考这个点
// 基本用法 <video src=‘movie.ogg‘> 这里的内容是供不支持 video 元素的浏览器显示的 </video> // 一些常见的属性 autoplay：视频在就绪后立刻播放 controls：向用户显示空间，比如播放/暂停按钮 height：视频播放器的高度 loop：循环播放 preload：视频在页面加载时进行播放，但如果使用 autoplay，则忽略改属性 src：播放视频的url width：视频播放器的宽度
// 基本用法 <audio src=‘song.org‘> 这里的内容提供给不支持 audio 元素的浏览器显示 </audio> // 基本属性 autoplay：音频就绪立即播放 controls：向用户显示空间，比如播放/暂停按钮 loop：循环播放 preload：与 video 一样 src：播放音频的url
1 // 实现拖放 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <script type=‘text/javascript‘> 6 function allowDrop(ev){ 7 ev.preventDefault(); 8 } 9 10 function drag(ev){ 11 ev.dataTransfer.setData(‘Text‘, ev.target.id); 12 } 13 14 function drop(ev){ 15 ev.preventDefault(); 16 var data = ev.dataTransfer.getData(‘Text‘); 17 ev.target.appendChild(document.getElementById(data)); 18 } 19 </script> 20 </head> 21 <body> 22 <div id=‘div1‘ ondrop=‘drop(event)‘ ondragover=‘allowDrop(event)‘></div> 23 <img id=‘drag1‘ src=‘image.git‘ draggable=‘true‘ ondragstart=‘drag(event)‘ width=‘330‘ height: ‘330‘ /> 24 </body> 25 </html>
解析一下上面的代码，我们看到了 ondrop, ondragStart, ondragOver, draggable。他们分别代表的意思是什么呢？
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData(‘Text‘);
ev.target.appendChild(document.getElementById(data));
}
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
// 数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
// 创建 Canvas 元素 <canvas id=‘myCavans‘ width=‘200‘ height=‘100‘></canvas> // JS 绘制 <script type=‘text/javascript‘> var c = document.getElementById(‘myCavans‘); var cxt = c.getContext(‘2d‘); // 创建 context 对象 cxt.fillStyle=‘#f00‘; // 染色 cxt.fillRect(0, 0, 150, 75); // 规定形状、尺寸和位置，从(0, 0)开始绘制 150x75 的矩形 }
localSotrage 方法存储的数据没有时间限制，不手动清除则永远存在
// 新建一个key-value放入localStorage
localStorage.setItem(key, value);
// 获取key值对应的value值
localStorage.getItem(key);
// 移除某一个localStorage项
localStorage.removeItem(key);
// 清除所有
localStorage.clear();
sessionStorage 与 localStorage 相似，不同在于localStorage 里面存储的数据没有过期时间的设置，而存储在 sessionStorage 里面的数据在页面回话结束后就会被清除。也就是说当这个浏览页面被关闭之后sessionStorage就会被清除。
// API
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
sessionStorage.clear();
<!DOCTYPE HTML> <html manifest=‘demo.appcache‘> <body> The content of the document... </body> </html>
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
原文：https://www.cnblogs.com/pingzi-wq/p/11490383.html