H5了解-01

1、H5

H5是html的第5个版本，它新增了一些标签，目前主流的浏览器都支持H5标签，IE9以上支持IE8以下都不支持。并且H5新增了一些特新，本地存储特性、网页多媒体、二维三维动画等

2、语义标签

语义标签其实和普通的div是一样的，只不过可以根据相应的语义标签迅速知道此处标签的含义。

常见的语义标签：<header></herader>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>

解决IE8以下浏览器兼容H5 直接引入Html5shiv.js文件。

3、新增文本框type类型

email:实现邮箱检测。

tel：移动端唤出手机数字键盘。

number：文本框只能输入数字。max min 设置范围。

search：提供删除文本。

url：实现完成检测。

range：范围 max min 默认value是50。

color：选择颜色。

time：时分秒。

date：年月日。

datetime-local：日期时间

month：月份。

week：星期。

4、新增表单属性

placeholder：提示文本。

autofocus：自动聚焦。

autocomplete：on/off 自动完成提示。 当前input 必须要有name属性 并且之前submit过。

required：强制该input必须输入。

pattern：添加正则验证input值。

multiple：多选文件。

form：指定表单id，该id表单提交时会带上当前input值。

5、新增表单事件

oninput:监听当前元素内容发生改变。

onkeyup:监听键盘弹起事件触发。onkeyup与oninput都可以获取动态内容变化，但是onkeyup不能获取用鼠标复制粘贴的内容。

oninvalid:校验不通过时触发。

setCustomValidity("content") 设置不通过的提示内容。

6、进度条

<progress max="" min="" value=""></progress>

<meter max="" min="" value="" low="规定的较低的值" high="规定较高的值">< /meter>

7、多媒体

controls ：播放控制台

autoplay：自动播放

loop: 循环播放

<audio src="音频文件路径" controls autoplay loop></audio> 

注意：宽高只需要设置一个就行，让其等比例缩放。

<video src="视频文件路径" controls autoplay loop width="" height=""></video>

解决不同浏览器播放视频兼容性问题（视频格式类型）

<video controls autoplay loop width="" height="">

 不同浏览器会根据所支持的视频格式类型，选择播放 

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

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

</video>

11、获取dom元素

如果是类选择器，必须添加. 如果是id选择器必须添加#

document.querySelector("");

获取所有符合条件的元素，数组。

document.querySelectorAll();

12、操作元素样式

样式已经在class中定义。

/** classList 是当前元素的所有样式列表-数组。 add方式一次只能添加一个样式*/

添加样式：document.querySelector("").classList.add("样式")；

移除样式:document.querySelector("").classList.remove("");

切换样式：如果该样式不存在，则添加。如果该样式存在，则移除。

document.querySelector("").classList.toggle("");

返回样式结果：该样式存在 true，否则false。

document.querySelector("").classList.contains("");

13、自定义属性

规范要点：

1 data-开头

2 data- 后必须至少有一个字符，多个单词使用-连接。

3 名称应该都使用小写

4 名称中不要有任何的特殊字符。

5 名称不要用纯数字。

<p data-test-ldd="test">测试数据</p>

document.querySelector("p").dataset["testLdd"];   取值必须使用驼峰命名法取值。