HTML 5.2有哪些新特性？

2021-02-28    分类： 网站建设

原生的

元素

在 HTML 5.2 的所有变化里我感到最为激动的就是引入了

元素，实现了浏览器原生的对话框。对话框在 web 开发中非常常见，但是现在每个实现都不太一样。另一方面，实现一个支持无障碍化的对话框很难，实际上，现在 web 上使用的大多数对话框对于视觉障碍人士来说都是难以使用的。

新引入的

首先，使用


默认情况下，对话框是不可见的，除非你设置了open属性。


open属性可以通过 HTMLDialogElement上的 show()和close()方法来改变。


目前，Chrome 已经支持了

元素，而在 Firefox 中可以通过配置打开这一特性。具体情况可以查看 https://caniuse.com/#feat=dialog。

在 iframe 里使用支付请求 API

支付请求 API 是由浏览器原生提供支付方式，旨在为用户在 web 上进行支付提供一个标准而且一致的方法。它让浏览器提供统一一致的界面来搜集用户的支付信息，而不是让用户填写各个网站自己的支付表单。

在 HTML 5.2 之前，支付请求 API 不能在 iframe 中 使用。这使得那些第三方提供的嵌入式支付解决方案（例如 Stripe、Paystack）完全无法利用这个 API，因为它们的支付接口都是需要在一个 iframe 中进行处理的。

HTML 5.2 为 iframe 引入了一个 allowpaymentrequest 属性，设置这个属性就可以允许 iframe 中使用支付请求 API 了。


为苹果设备定义不同尺寸的图标

通过在 HTML 文档的头部使用 ，我们可以定义网页的图标。同时，还可以使用 sizes属性来定义多个不同尺寸的图标。


虽然这个定义完全是建议性的，但它允许浏览器来自主决定使用哪个图标。尤其是像现在大多数设备的最优图标尺寸都不一样，只有浏览器自己才知道怎样的图标尺寸更为合适。

在 HTML 5.2 以前， sizes 属性仅仅当 link 标签的 rel 属性为 icon 时才视为有效。可是，苹果的 iOS 设备并不支持这种 sizes 属性，它引入了一个私有的 rel 值 apple-touch-icon，用于定义网页在苹果设备上的图标。

在 HTML 5.2 中，规范的这一限制被去除，当 rel 为 icon 或 apple-touch-icon 时都可以使用 sizes 属性。

新的有效写法

除了引入一些新特性，HTML 5.2 中也把一些之前被规范认为无效的 HTML 写法变成有效。

多个

元素

元素用于表达网页的主体内容。对于在多个网页中会反复出现的内容，我们可以把它们放在 header、section 或者别的元素中，但
元素是被设计用于专门放置页面上特定且唯一的内容的。因此，在 HTML 5.2 之前，规范要求

元素在页面的 DOM 结构中只能出现一次。

可是随着单页应用的流行，我们难以再去坚持这一准则。可以设想会有这样一种情况：DOM 中有需要有多个

元素，但在同一时间用户只会看到其中一个。

在 HTML 5.2 中，现在只要能保证用户同时只能看到一个

元素，我们就可以在页面中多次使用这个标签。其它不显示的
元素必须通过 hidden 属性设置为隐藏。


我们都很清楚利用 CSS 有多种办法可以隐藏元素。可是对于页面上的多个

元素，我们必须用 hidden 属性将目前不需要显示的元素进行隐藏。任何别的方法，比如 display:none; 或者 visibility:hidden;，都会被规范认为是无效的。

在 中定义样式

一般情况下，我们都会使用