HTML 5.2有哪些新特性？

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

原生的 <dialog> 元素

在 HTML 5.2 的所有變化里我感到最為激動的就是引入了 <dialog> 元素，實現(xiàn)了瀏覽器原生的對話框。對話框在 web 開發(fā)中非常常見，但是現(xiàn)在每個實現(xiàn)都不太一樣。另一方面，實現(xiàn)一個支持無障礙化的對話框很難，實際上，現(xiàn)在 web 上使用的大多數(shù)對話框對于視覺障礙人士來說都是難以使用的。

新引入的

首先，使用


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


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


目前，Chrome 已經支持了 <dialog> 元素，而在 Firefox 中可以通過配置打開這一特性。具體情況可以查看 https://caniuse.com/#feat=dialog。

在 iframe 里使用支付請求 API

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

在 HTML 5.2 之前，支付請求 API 不能在 iframe 中 使用。這使得那些第三方提供的嵌入式支付解決方案（例如 Stripe、Paystack）完全無法利用這個 API，因為它們的支付接口都是需要在一個 iframe 中進行處理的。

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


為蘋果設備定義不同尺寸的圖標

通過在 HTML 文檔的頭部使用 <linkrel="icon">，我們可以定義網(wǎng)頁的圖標。同時，還可以使用 sizes屬性來定義多個不同尺寸的圖標。


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

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

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

新的有效寫法

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

多個 <main> 元素

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

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

可是隨著單頁應用的流行，我們難以再去堅持這一準則?？梢栽O想會有這樣一種情況：DOM 中有需要有多個 <main> 元素，但在同一時間用戶只會看到其中一個。

在 HTML 5.2 中，現(xiàn)在只要能保證用戶同時只能看到一個 <main> 元素，我們就可以在頁面中多次使用這個標簽。其它不顯示的 <main>元素必須通過 hidden 屬性設置為隱藏。


我們都很清楚利用 CSS 有多種辦法可以隱藏元素?？墒菍τ陧撁嫔系亩鄠€ <main> 元素，我們必須用 hidden 屬性將目前不需要顯示的元素進行隱藏。任何別的方法，比如 display:none; 或者 visibility:hidden;，都會被規(guī)范認為是無效的。

在 <body> 中定義樣式

一般情況下，我們都會使用 <style> 標簽來定義內聯(lián) CSS，并將其放置在 HTML 文檔的 <head> 中。但隨著組件化開發(fā)的興起，開發(fā)者們開始逐漸傾向于把樣式定義和與之相關的 HTML 元素放在一起。

在 HTML 5.2 中，在 <body> 中的任何地方都可以定義 <style> 塊，規(guī)范現(xiàn)在將其也視為有效。也就是說我們現(xiàn)在可以讓樣式定義就出現(xiàn)在樣式被使用的地方。


可是仍然需要注意的是，從性能角度考慮，樣式定義最好還是放在 <head> 中。規(guī)范中也提到：

在文檔的頭部使用樣式元素是一種更為可取的做法。在文檔體內使用樣式可能會導致頁面樣式重排、觸發(fā)重新布局或（和）重繪，因此應該謹慎使用這一方式。

還應當注意的是，像在上面這個例子中，樣式定義仍然是作用于全局的。在 HTML 文檔內出現(xiàn)的樣式定義仍然會應用于在其前面的元素之上，這也是它會造成重繪的原因。

在 <Legend> 內使用 h# 標簽

<legend> 用于在表單中表示一個 <fieldset> 的標題。在 HTML 5.2 之前， <legend> 中的內容只能使用純文本，現(xiàn)在我們可以在其中使用 h# 標簽。


當我們想使用 <fieldset> 來為表單中不同部分進行分組時，這一用法非常有用。就像上面這個例子，使用 h# 標簽可以讓那些依賴于文檔大綱視圖進行導航的用戶更為方便地跳轉到這些表單分組區(qū)域。

被移除的特性

在 HTML 5.2 中，有些特性被移除了，包括：

  • keygen：用于為表單生成公鑰
  • menu 和 menuitem：用于創(chuàng)建導航或菜單

新的視為無效的寫法

最后，還有一些開發(fā)實踐被規(guī)范認為是無效的。

<p> 元素中不允許包含行內、浮動或者塊級元素

在 HTML 5.2 中， <p> 元素只能包含短語內容（譯者注：phrasing content，具體解釋可參見這里）。下列元素類型不能再被嵌套在一個段落中：

  • 行內塊
  • 行內表格
  • 浮動或者定位的塊

不再需要嚴格的 Doctype 聲明

我們終于可以和下面這種嚴格的文檔類型說明說再見了：

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入我們，關注，私信小編。一起交流并走出迷茫。

新手可免費領取學習資料，看看前輩們是如何在編程的世界里傲然前行不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻），

有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入

本文標題：HTML 5.2有哪些新特性？
標題鏈接：http://www.muchs.cn/news1/103401.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、定制開發(fā)、網(wǎng)站策劃、全網(wǎng)營銷推廣、響應式網(wǎng)站、外貿建站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設