HTML5部分新标签属性及DOM扩展元素

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等。

我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

语义化标签：如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

常用语义标签：<nav> ：导航
<header>：页眉
<footer>：页脚
<section>：区块
<article>：文章
<aside>：侧边栏
<progress>：进度条

本质上新语义标签与<div>、<span>没有区别，只是其具有语义性。

尽量避免全局使用header、footer、aside等语义标签。

兼容性：在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过。
在实际开发中采用的是通过检测IE浏览器的版本来加载第三方的一个JS库(html5shiv.min.js)来解决兼容问题，这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。

HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理变的更加高效。

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
color	<input type="color">	拾色器
time	<input type="time">
date	<input type="date">
datetime	<input type="datetime">
month	<input type="month">
week	<input type="week">

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中应选择性的使用。

表单元素：

元素	含义
<datalist>	数据列表
<keygen>	生成加密字符串
<output>	输出结果
<meter>	度量器

表单属性：

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符
autofocus	<input type="text" autofocus>	自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	自动完成（保存上次记录）
form	<input type="text" form="某表单ID">
novalidate	<form novalidate></form>	关闭验证
required	<input type="text" required>	必填项
pattern	<input type="text" pattern="\d">	自定义验证

多媒体：HTML5通过<audio>标签来解决音频播放的问题。

通过src制定音频文件路径即可

audio 标签 controls 控制autoplay 自动播放loop 是否循环src 直接指定音频文件

source属性可以指定多个音频

当我们使用 source属性指定多个音频时 浏览器会从上往下进行解析,找到可以播放的 即可开始播放
如果遇到无法播放的会继续往下解析直到可以播放为止，如果都无法解析我们能够在最后设置一个提示信息可以对低版本的用户进行一个友善的提示。

不同的浏览器可支持播放的格式是不一样的，如下图供参考：

同样HTML5也可以通过<video>标签解决音频播放的问题。

video 标签controls 控制器src 指定的是视频的路径loop循环播放autoplay自动播放width设置播放窗口的宽度height设置播放窗口的高度

poster 视频没有播放的时候显示的图片source属性可以指定多个音频

我们在使用 width height 设置video标签的 宽高时, 会优先考虑视频本身的大小改变的是 video标签的大小

DOM扩展元素：

document.querySelector('') 通过CSS选择器获取元素，其中括号内可以是标签名（"li"）、class类名(".class")、id名("#id"),只能获取满足条件的第一个dom元素。

document.querySelectorAll('') 通过CSS选择器获取元素，以伪数组形式存在。哪怕只选中一个元素 返回的也是伪数组形式。

类名操作：

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

Node指一个有效的DOM节点，是一个通称。

自定义属性：

在HTML5中我们可以自定义属性，其格式如下data-*=""，例如data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、读取 demo.dataset['name'] 或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

当我们如下格式设置时，则需要以驼峰格式才能正确获取