H5属性总结总结

标签类：

1.header 和footer标签都不是全指整个页面的头部和底部，页面任何一块都可以使用

2.结构：主要内容包含左侧和右

<main>

   <article>左侧</article>

   <aside>右侧</aside>

</main>

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中输入的网址必须是加上协议的完整网址

专业: <input type="text" list="dataList"><br>

<datalist id="dataList">

<option value="英语" label="不会"></option>

<option value="Java" label="使用人数多"></option>

<option value="Chinese" label="np"></option>

</datalist>

meter：横向的状态条

<label for="base">基础水平</label>

<meter name="base" id="base" min="0" max="100" high="80" low="20"

optimum="70"> //optimum表示设置最佳的值，此值区间状态条显示绿色

</meter>

事件类

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的资源无法加载，就依此加载下一个，，，

<video autoplay>

<source src="" type="video/flv"> <source src="" type="video/mp4">

</video>

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（对象）,必须使用骆驼命名法

<p data-scool-name="kk"></p>

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兆数据，同一个浏览器不同窗口共享数据。不同浏览器不能共享数据

但是它是永久生效的，存储在硬盘上，并不会随着页面或浏览器关闭而清除。必须

手动清除

他是存储在当前域下面的。其他域不可取