h5新增标签属性以及api的总结

什么是html5

1.H5并不是新的语言，而是html语言的第五次重大修改–版本

2.支持：所有的主流浏览器都支持h5.（chrome,firefox,safari。。。）。IE9及以上支持h5(有选择的支持，并不会全部支持),但是ie8及以下不支持h5.

3.改变了用户与文档的交互方式：多媒体：video audio canvas

4.增加了其它的新特性：语义特性，本地存储特性，网页多媒体，以及动画

5.相对于h4:
进步：抛弃了一些不合理不常用的标记和属性
新增了一些标记和属性–表单
从代码角度而言，h5的网页结构代码更简洁。

什么是语义化标签
语义化标签：很直观的清楚这个标签的作用

header: 页眉 头部
nav：导航
main：主体内容
article：文章
aside：侧边栏
footer：页脚，底部
语义标签兼容处理
ie9 及以下: 变成行内元素，手动变成块元素

ie8以下：根本不识别html5,手动创建html5标签或者引入html5shiv.min.js

表单新增的type属性
email：对邮箱可以进行验证
tel：不会进行验证，会在手机端会切换成数字键盘
url：会对输入的网址进行验证
number：可以进行数字的输入，不是数字类型
search：会携带清除的X
range：范围限制的拉动杆
color: 颜色的选择
time: 时分的选择
date：年月日的选择
datetime-local：年月日时分的完整时间选择
month：月份的选择
week: 最终显示的格式为周
表单新增的属性
placeholder：默认占位符，当输入文本的时候，会自动将默认的占位清除
autofocus：自动获取焦点
autocomplete：会有提示之前填过的内容，前提条件：1.必须提交过，必须要有name属性
required：为必填项，输入框不能为空，如果为空，会有提示
pattern：正则表达式验证
multiple：如果input类型为file，提交多个文件，如果类型email，可以输入多个邮箱
form：值form表单的id名，这样的话就会将当前输入框和id对应的表单进行关联，提交的时候会一起提交
表单新增事件
oninput：只要内容发生变化，即触发事件

onkeyup：键盘弹起时触发

oninvalid：代表当前输入框验证没有通过即可触发

setCustomValidity：修改默认的提示内容

媒体标签
audio：播放音频文件的

src：音频文件的地址
controls：控制面板
autoplay：自动播放
loop：循环播放
video：播放视频

src：视频的文件地址
controls：控制面板
autoplay：自动播放
muted：静音
loop：循环播放
poster：定义视频封面图，如果不设置，视频画面的第一帧
width：视频的width
height：视频height
设置width不设置height,设置height，不设置width
source标签：可以设置多个资源文件，浏览器在加载的时候，从上到下加载，如果不支持该文件类型，继续加载，一直到找到兼容该浏览器的资源文件
DOM 获取元素
querySelector：该方法可以传递任何选择器，但是只会查抄到满足条件的第一个
querySelectorAll：该方法可以传递任何选择器。会查找到满足条件的所有的元素，最终返回的是伪数组，如果想设置样式，遍历该数组，拿到每一个元素，设置样式即可
类名的操作
所有关于类样式操作的都在classList，classList属于dom元素上的的

add：为当前元素添加类名，如果想添加多个用，进行分割
remove：移除某一个类名
toggle：进行类名的切换
contains：判断是否包含某一个类名，如果包含，返回true，不包含返回false
DOM 自定义属性
如何自定义一个属性？

凡是以data-开头的都是一个自定义属性

如何获取自定义属性的值？

所有的自定义属性都在dom元素下面的dataset里面以属性的形式进行存储

如何修改自定义属性？

给dataset里面对应的属性重新赋值，即修改完成