标签类：
1.header 和footer标签都不是全指整个页面的头部和底部，页面任何一块都可以使用
2.结构：主要内容 包含左侧和右
左侧
input表单新属性
autofocus: 自动聚焦
autocomplete="on/off" :自动完成
autocomplete注意： 1.表单必须提交过 2.表单有name属性
reqired: 必输项
pattern: 正则，不需要加/ /;
multiple: 选择多个文件（上传文件常用）
type为email如果添加了multiple允许输入多个邮箱地址以逗号分隔
form： 当一个表单A提交时，表单外有其他的表单B，可以通过ID将两个表单合并为一个一起进行提交
表单A的form标签上给一个ID
表单B添加属性 form="A的ID"；
创建可以选择与输入的下拉框： 使用datalist
list值对应datalist的ID
注意：当input type为url时，再option中输入的网址必须是加上协议的完整网址
专业:
meter：横向的状态条
optimum="70"> //optimum表示设置最佳的值，此值区间状态条显示绿色
事件类
oninput: input中要内容改变即触发。
与onchange区别：onchange失去焦点才触发
onkeyup: 键盘抬起时触发
oninvalid: 验证不通过时触发
网络接口：
ononline:网络连接时触发 一般用事件监听
onoffline:网络断开时触发 一般用事件监听
window.addEventListener("online",function(){
alert("网络连上了");
});
window.addEventListener("offline",function(){
alert("网络断开了");
})；
调试网络技巧：
在network中，右上角有一个offline/online,点击可以切换有无网络的状态
全屏接口：
requestFullScreen(); 开启全屏
cancelFullScreen(); 取消全屏
fullScreenElement(); 是否全屏
注意：不同浏览器要加相应前缀，使用能力测试让它支持所有浏览器
开启全屏添加在触发事件的元素上，退出全屏添加在document上。 判断是否全屏绑定在document上
兼容各浏览器的方法封装：
function fullScreen(ele) {
if(ele.requestFullScreen){
ele.requestFullScreen();
}
else if(ele.webkitRequestFullScreen){
ele.webkitRequestFullScreen();
}
else if(ele.mozRequestFullScreen){
ele.mozRequestFullScreen();
}
else if(ele.msRequestFullScreen){
ele.msRequestFullScreen();
}
}
读取文件内容：
FileReader 读取文件内容
readAsBinaryString(); 读取任意类型的文件。返回二进制字符串。此方法不是用来读取文件展示给用户，而是存储文件。
readAsText(): 读取文本文件，返回文本字符串，默认编码为UTF-8
readAsDataURL: 读取文件获取一段以DATA开头的字符串，这字符串本质就是DATAURL，DATAURL是一种将文件嵌入到文档的方案。DataURL是将资源转换为BASE64编码的字符串形式，并且将这些内容直接存储在URL中，可以优化网站的加载速度和执行效率。
abort();中断读取
实时获取文件预览
关于fileReader
1.readerAsDataURL是一个异步方式,所以需要onload事件等待文件转换完成再放入src
2.JQ入口函数比window.onload加载快，因为前者将文件中的dom元素加载完执行，后者将所有dom元素以及图片，文件加载完之后执行
3.图片转换为base64可以SEO优化，但是有可能转换之后图片反而变大，一般都是小图标转化为base64，而大图不转。
拖拽事件：
一般将事件绑定在document上，通过e.target可以获取当前被拖拽/目标 元素
应用于被拖拽元素的事件：
被拖拽元素需要设置属性draggable="true"
ondrag 整个拖拽过程中都会调用---持续
ondragstart 拖拽开始时调用
ondragleave 鼠标离开拖拽元素时调用
ondragend 拖拽结束时调用
应用于目标元素的事件：
ondragenter ： 拖拽元素进入时调用
ondragover： 停留在目标元素时调用(要添加drop事件必须在dropover事件上清除默认事件)
ondrop: 在目标元素上松开鼠标时调用（浏览器默认阻止drop行为）
ondragleave: 当鼠标离开目标元素时调用
获取地理信息（PC不支持，移动端支持）：
pc端可以通过第三方接口获取，一般是都使用第三方接口
navigator.geolocation.getCurrentPosition(获取地理位置成功后的回调， 获取失败后的回调，{
设置；
})
音频标签：
视频：
video标签
属性：
scr: 路径
controls: 控制器面板
autoplay:自动播放
loop： 循环播放
poster: 值为一个路径，让视频没有完全下载出来时，或者没点击播放时显示的封面画面。
注意：可以设置width 和height属性，但是视频宽高是按比例缩放的，所以建议只设置一个宽或高
suorce标签：
浏览器支持的video格式不一样，播放某个视频时，如果第一个source的资源无法加载，就依此加载下一个，，，
H5操作元素样式
1.操作类样式：
添加样式：add
移除样式： remove
切换： toggle 如果有样式会移除，没有则添加
一次只能加或减一个
判断元素是否包含某样式： contain 返回布尔值
document.querySelector(".blue").classList.remove("blue");
document.querySelector(".blue").classList.add("blue");
document.querySelector(".blue").classList.toggle("blue");
document.querySelector(".blue").classList.contain("blue");
自定义属性：
data-自定义属性名
取值使用dataset（对象）,必须使用骆驼命名法
console.log(p.dataset["scrollName"])；
web存储：
sessionStorage:
setItem(key, value);
getItem(key, value);
removeItem(key, value); 注意：删除数据如果写错key值，不会报错也不会删除数据
clear(); 谨慎使用，清除
存储数据到本地，5兆左右，生命周期当前页面关闭清除
sessionStorage本质上是存储在当前页面内存上的，而不是浏览器内存中。
window.sessionStorage.setItem(key, value);
localStorage:
方法同上，
可存大约20兆数据，同一个浏览器不同窗口共享数据。不同浏览器不能共享数据
但是它是永久生效的，存储在硬盘上，并不会随着页面或浏览器关闭而清除。必须
手动清除
他是存储在当前域下面的。其他域不可取