html5 01 语义化标签、input新属性、多媒体标签、dom获取元素

语义化标签：

很直观的清除这个标签的作用

header 页眉 头部

nav 导航

main 主题内容

article 文章

aside 侧边栏

footer 底部

input新type属性：

email： 邮箱 提供了默认的电子邮箱的验证 ，要求必须包含@符号，同时必须包含服务器名称，如果不满足验证，则会阻止当前数据的提交；

tel：电话 不会执行验证，本质目的是在移动端打开数字键盘，意味着数字键盘限制了用户只能输入数字；

url：网址 验证只能输入合法的网址：必须包含http：//

number: 数量 只能输入数值 （包含小数点），不能输入其他字符 可以设置 max：最大值；min：最小值； value：默认值；

search：可以提供更人性化的输入体验 输入框自带一键删除；

range：范围限制的拉动杆 可以设置 max：最大值；min：最小值；value：默认值；

color：颜色

日期时间相关：

time：时间；时分秒

date：日期；年月日

date-local：日期+时间

month：月份

week：哪一年的第几周

input新表单属性：

placeholder：提示文本，提示占位

autofocus：自动获得焦点

autocomplete：：自动完成：on:打开；off：关闭；让文本框获得已输入过的文本：必须有两个前提条件才会提示1：必须提交过，2：必须要有name属性；

给tel 电话 添加验证属性：

required：为必填项，输入框不能为空，如果为空，会有提示，

pattern：正则表达式验证；

multiple：可以选择多个文件，如果input的类型为file，提交多个文件；如果类型为email，可以输入多个邮箱

form：表单域；

input的新增事件：

oninput：监听当前指定元素内容的改变：只要内容改变（内容删除或者增加）就会触发这个事件

onkeyup：键盘弹起的时候触发事件，键盘每一个键的弹起都会触发一次（鼠标在输入框中复制粘贴的内容不会触发这个事件）；

oninvalid：当前的输入框验证不通过就会触发提示；setCustomValidity () 可以在事件中修改默认的提示信息；

多媒体标签：

老的多媒体方法：

flash：

h5中的方法标签：

audio：音频

	音频的属性：

	src：播放文件的路径

	controls：音频播放器的控制面板

	autoplay：自动播放

	loop：循环播放

video：视频

	视频的属性：

	src：播放文件的路径

	controls：视视频播放器的控制面板

	autoplay：自动播放

	muted：静音

	loop：循环播放

	poster：自定义视频封面图，如果不设置，画面为视频画面的第一帧；

	width：设置视频的宽度；

	height：设置视频的高度；    宽度和高度一般不要同时设置；     只设置高度宽度就会适配；

	source标签：视频标签里面的标签，可以设置多个资源文件，浏览器加载的时候，从上到下加载，如果  

            		不支持该文件类型继续加载，则继续找下一个文件，直到找到兼容该浏览器的资源文件为止；

DOM获取元素：

**选择器**：类似于JQ里的选择器

    querySelector：该方法可以传递任何选择器，但是只会查抄到满足条件的第一个；

        querySelectorAll : 该方法可以传递任何选择器。会查找到满足条件的所有元素，最终返回的是伪数组，如果想设置样式，遍历该数组，拿到每一个元素设置样式即可；

类样式操作：

classList：当前元素的所有样式列表-数组 （来自于DOM的方法）；

add：为元素添加一个指定名称的样式，可以用，来添加多个样式；

remove：为元素移除一个指定名称的样式（不是移除class属性），一次只能移除一个；

toggle：切换元素的样式：如果有这个指定名称的样式这移除，如果没有则添加；

contains：判断元素是否包含指定名称的样式，返回true/false

自定义属性：

定义自定义属性：

date
如何自定义一个属性？ 

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

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

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

如何修改自定义属性？

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