HTML5

本文详细介绍了HTML5的新特性,包括语义特性、本地存储、设备兼容性等,并探讨了如何处理在旧版浏览器中的兼容问题,如通过html5shiv库解决IE9以下版本的兼容性。此外,还讲解了HTML5新增的DOM API,如新的元素获取方法、类名操作以及子节点操作等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值