HTML5.2版本有什么變化-創(chuàng)新互聯(lián)

這篇文章主要介紹了HTML5.2版本有什么變化，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站制作、做網(wǎng)站、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

W3C HTML 5.2 規(guī)范中， 有一節(jié) 介紹該版本引入的修改，我綜合來(lái)自 《What’s New in HTML 5.2?》 這篇文章的描述，在此列舉對(duì)我來(lái)說(shuō)比較重要的部分。

新特性

原生<dialog> 元素

對(duì)話框在平時(shí)開發(fā)中，使用較為頻繁，HTML 5.2 規(guī)范提供了<dialog> 元素來(lái)創(chuàng)建對(duì)話框。

<dialog> 元素默認(rèn)是隱藏的。

<!-- 默認(rèn)是隱藏的 -->
<dialog>
  <h3>Dialog Title</h3>
  <p>Dialog content and other stuff will go here</p>
</dialog>

添加open 屬性即可顯示。

<dialog open>

HTML5.2版本有什么變化

HTMLDialogElement 是 <dialog> 的底層元素表示，提供了 show() 、close() 、showModal() 方法，控制對(duì)話框的顯隱。

<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>

<dialog id="dialog">
  <h3>Dialog Title</h3>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {
  dialog.close();
});
</script>

show() 與 showModal() 不同之處在于，showModal() 創(chuàng)建是一個(gè)模態(tài)框，打開時(shí)默認(rèn)不能操作背后頁(yè)面里的內(nèi)容；而 show() 是以彈框形式顯示的。

allowpaymentrequest 屬性

現(xiàn)在可以為<iframe> 添加 allowpaymentrequest 屬性的方式，允許<iframe> 內(nèi)部網(wǎng)頁(yè)使用   Payment Request API 。

<iframe allowpaymentrequest>

rel="apple-touch-icon"

我們使用<link rel="icon"> 指定網(wǎng)頁(yè) icon，除此之外它還支持使用 sizes 屬性，定義不同的尺寸的 icon，供瀏覽器在顯示是擇優(yōu)顯示。

<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">

HTML 5.2 之前，蘋果 iOS 設(shè)備并不支持<link rel="icon"> 的sizes 屬性，而是使用  apple-touch-iconrel 來(lái)支持在自家設(shè)備上顯示網(wǎng)頁(yè)或安裝網(wǎng)頁(yè)應(yīng)用（比如 PWA）時(shí)使用的 icon。

<link rel="apple-touch-icon" href="/example.png">

現(xiàn)在規(guī)范承認(rèn)了apple-touch-icon 這個(gè)rel 值，并且支持在這個(gè) <link rel="apple-touch-icon"> 上設(shè)置sizes 屬性。

<link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="apple-touch-icon" sizes="32x32" href="path/to/icon32.png">

新的有效實(shí)踐

多個(gè) <main> 標(biāo)簽

HTML 5.2 之前，一個(gè)頁(yè)面只能存在一個(gè)<main> 標(biāo)簽，用來(lái)表示某個(gè)頁(yè)面獨(dú)一無(wú)二的主題內(nèi)容。不過(guò)，從 HTML 5.2 版本開始，允許一個(gè)頁(yè)面中同時(shí)存在多個(gè) <main> 標(biāo)簽，不過(guò)只能有一個(gè)顯示的，其他都要用hidden 屬性隱藏。

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

注意，其他不顯示的<main> 都要使用hidden 屬性隱藏，使用  display: none; 或visibility: hidden; 的方式的隱藏都是無(wú)效的。

<body> 內(nèi) <style>

<style> 之前都是只能在<head> 內(nèi)定義的，不過(guò)隨著  component-ized 開發(fā)模式的增長(zhǎng)，將組件樣式就近寫在組件結(jié)構(gòu)旁邊的模式開始流行起來(lái)。

HTML 5.2 允許在<body> 內(nèi)使用<style> 標(biāo)簽，就近定義結(jié)構(gòu)樣式。

<body>
    <p>I&rsquo;m cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I&rsquo;m cornflowerblue!</p>
</body>

但好還是不要這樣做，把樣式寫在 中是更推薦的做法。規(guī)范中提到：

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

即<body> 內(nèi)的<style> 可能會(huì)導(dǎo)致之前元素的布局改變，令頁(yè)面發(fā)生重繪。所以盡量避免使用。

<legend> 中可使用標(biāo)題元素

<legend> 用在 <fieldset> 標(biāo)簽中作標(biāo)題使用，<fieldset> 則用在<form> 中，為表單域編組。

下面是一個(gè)例子：

<!-- See: https://www.w3schools.com/tags/tag_fieldset.asp -->
<form action="/action_page.php">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

HTML5.2版本有什么變化

HTML 5.2 之前，<legend> 中只能使用純文本，HTML 5.2 開始，可以使用標(biāo)題元素了。

<fieldset>
    <legend><h3>Basic Information</h3></legend>
    <!-- Form fields for basic information -->
</fieldset>
<fieldset>
    <legend><h3>Contact Information</h3></legend>
    <!-- Form fields for contact information -->
</fieldset>

移除特性

  • <keygen> 、<menu> 和<menuitem> 元素

  • 文本<input> 的 inputmode 和 dropzone 屬性

  • widow.showModalDialog() 方法

新的無(wú)效實(shí)踐

<p> 中的無(wú)效內(nèi)容

以下三類元素不能作為<p> 段落的內(nèi)容。

  • 行內(nèi)塊、表格元素（Inline blocks、inline tables）

  • 浮動(dòng)元素（floated）

  • 定位元素（positioned block-level elements）

 strict doctype

HTML4 和 XHTML1 的嚴(yán)格文檔類型聲明（strict doctype）不再是有效 HTML。

<!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">

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5.2版本有什么變化”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章題目：HTML5.2版本有什么變化-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://bm7419.com/article44/goihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開發(fā)、全網(wǎng)營(yíng)銷推廣

廣告

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

搜索引擎優(yōu)化