HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改

新增特性：语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性、三维、图形以及特效特性、性能与集成特性、地理定位、设备权限与功能、css3特性

----H5新增的语义结构标签

article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcaption	定义 <figure> 元素的标题
footer	定义 section 或 document 的页脚。
header	定义了文档的头部区域
mark	定义带有记号的文本。
nav	定义导航链接的部分。
section	定义文档中的节（section、区段

兼容处理：

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了

处理方式：通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题

<script src="../js/html5shiv.min.js"></script>

----H5新增的标签全局属性

contenteditable	规定元素内容是否可编辑。
contextmenu(不兼容)	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
spellcheck	规定是否对元素进行拼写和语法检查。
translate	规定是否应该翻译元素内容

----H5新增的功能标签

----H5表单新增的属性

placeholder 占位符

autofocus 获取焦点

multiple 文件上传多选或多个邮箱地址

autocomplete 自动完成

form 指定表单项属于哪个form

novalidate 关闭验证

required 验证条件 必填

pattern 正则表达式 验证表单

accept 在文件上传中使用accept属性，设置接收的文件类型

----H5新增DOM API

获取元素：

document.getElementsByClassName(类名)

document.querySelector(选择器) 获取匹配的第一个元素

document.querySelectorAll(选择器) 获取匹配的所有元素 伪数组

类名操作：

Node.classList.add(类名) 添加class

Node.classList.remove(类名) 移除class

Node.classList.toggle(类名) 切换class 如果存在就移除，如果不存在就添加

Node.classList.contains(类名) 判断是否包含class

Node为一个有效的DOM节点

自定义属性：

data-*="属性值"

通过 Node.dataset[属性名]可以获取到当前DOM节点的自定义属性值

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

子节点方法：

ChildNode.after() 在父节点的子节点列表中插入一些Node或DOMString对象，插入位置为该子节点的后面

ChildNode.before() 在父节点的子节点列表中插入一些Node或DOMString对象，插入的位置为该子节点的前面

ChildNode.remove() 把DOM对象从它所属的DOM树种删除

ChildNode.replaceWith() 用一套Node对象或DOMString对象替换了该节点

ParentNode.append() 在父节点的最后一个子节点之后插入一组Node对象或DOMString对象
与 Node.appendChild() 的差异：
ParentNode.append()允许追加  DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

ParentNode.prepend() 在父节点的第一个子节点之前插入一组Node对象或DOMString对象

ParentNode.replaceChildren() 将父节点的后代替换为指定的后代集合，如果不传参，则直接清空后代节点