HTML 5.2有哪些新特性？

2021-02-28    分類： 網(wǎng)站建設(shè)

原生的

元素

在 HTML 5.2 的所有變化里我感到最為激動(dòng)的就是引入了

元素，實(shí)現(xiàn)了瀏覽器原生的對話框。對話框在 web 開發(fā)中非常常見，但是現(xiàn)在每個(gè)實(shí)現(xiàn)都不太一樣。另一方面，實(shí)現(xiàn)一個(gè)支持無障礙化的對話框很難，實(shí)際上，現(xiàn)在 web 上使用的大多數(shù)對話框?qū)τ谝曈X障礙人士來說都是難以使用的。

新引入的

首先，使用


默認(rèn)情況下，對話框是不可見的，除非你設(shè)置了open屬性。


open屬性可以通過 HTMLDialogElement上的 show()和close()方法來改變。


目前，Chrome 已經(jīng)支持了

元素，而在 Firefox 中可以通過配置打開這一特性。具體情況可以查看 https://caniuse.com/#feat=dialog。

在 iframe 里使用支付請求 API

支付請求 API 是由瀏覽器原生提供支付方式，旨在為用戶在 web 上進(jìn)行支付提供一個(gè)標(biāo)準(zhǔn)而且一致的方法。它讓瀏覽器提供統(tǒng)一一致的界面來搜集用戶的支付信息，而不是讓用戶填寫各個(gè)網(wǎng)站自己的支付表單。

在 HTML 5.2 之前，支付請求 API 不能在 iframe 中 使用。這使得那些第三方提供的嵌入式支付解決方案（例如 Stripe、Paystack）完全無法利用這個(gè) API，因?yàn)樗鼈兊闹Ц督涌诙际切枰谝粋€(gè) iframe 中進(jìn)行處理的。

HTML 5.2 為 iframe 引入了一個(gè) allowpaymentrequest 屬性，設(shè)置這個(gè)屬性就可以允許 iframe 中使用支付請求 API 了。


為蘋果設(shè)備定義不同尺寸的圖標(biāo)

通過在 HTML 文檔的頭部使用 ，我們可以定義網(wǎng)頁的圖標(biāo)。同時(shí)，還可以使用 sizes屬性來定義多個(gè)不同尺寸的圖標(biāo)。


雖然這個(gè)定義完全是建議性的，但它允許瀏覽器來自主決定使用哪個(gè)圖標(biāo)。尤其是像現(xiàn)在大多數(shù)設(shè)備的最優(yōu)圖標(biāo)尺寸都不一樣，只有瀏覽器自己才知道怎樣的圖標(biāo)尺寸更為合適。

在 HTML 5.2 以前， sizes 屬性僅僅當(dāng) link 標(biāo)簽的 rel 屬性為 icon 時(shí)才視為有效。可是，蘋果的 iOS 設(shè)備并不支持這種 sizes 屬性，它引入了一個(gè)私有的 rel 值 apple-touch-icon，用于定義網(wǎng)頁在蘋果設(shè)備上的圖標(biāo)。

在 HTML 5.2 中，規(guī)范的這一限制被去除，當(dāng) rel 為 icon 或 apple-touch-icon 時(shí)都可以使用 sizes 屬性。

新的有效寫法

除了引入一些新特性，HTML 5.2 中也把一些之前被規(guī)范認(rèn)為無效的 HTML 寫法變成有效。

多個(gè)

元素

元素用于表達(dá)網(wǎng)頁的主體內(nèi)容。對于在多個(gè)網(wǎng)頁中會(huì)反復(fù)出現(xiàn)的內(nèi)容，我們可以把它們放在 header、section 或者別的元素中，但
元素是被設(shè)計(jì)用于專門放置頁面上特定且唯一的內(nèi)容的。因此，在 HTML 5.2 之前，規(guī)范要求

元素在頁面的 DOM 結(jié)構(gòu)中只能出現(xiàn)一次。

可是隨著單頁應(yīng)用的流行，我們難以再去堅(jiān)持這一準(zhǔn)則?？梢栽O(shè)想會(huì)有這樣一種情況：DOM 中有需要有多個(gè)

元素，但在同一時(shí)間用戶只會(huì)看到其中一個(gè)。

在 HTML 5.2 中，現(xiàn)在只要能保證用戶同時(shí)只能看到一個(gè)

元素，我們就可以在頁面中多次使用這個(gè)標(biāo)簽。其它不顯示的
元素必須通過 hidden 屬性設(shè)置為隱藏。


我們都很清楚利用 CSS 有多種辦法可以隱藏元素?？墒菍τ陧撁嫔系亩鄠€(gè)

元素，我們必須用 hidden 屬性將目前不需要顯示的元素進(jìn)行隱藏。任何別的方法，比如 display:none; 或者 visibility:hidden;，都會(huì)被規(guī)范認(rèn)為是無效的。

在 中定義樣式

一般情況下，我們都會(huì)使用