万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言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() 将父节点的后代替换为指定的后代集合,如果不传参,则直接清空后代节点