這篇文章主要介紹了HTML5.2版本有什么變化,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站制作、做網(wǎng)站、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司,已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步,服務(wù)才是根本,我們始終堅(jiān)持講誠信,負(fù)責(zé)任的原則,為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。W3C HTML 5.2 規(guī)范中, 有一節(jié) 介紹該版本引入的修改,我綜合來自 《What’s New in HTML 5.2?》 這篇文章的描述,在此列舉對我來說比較重要的部分。
新特性
原生<dialog>
元素
對話框在平時(shí)開發(fā)中,使用較為頻繁,HTML 5.2 規(guī)范提供了<dialog>
元素來創(chuàng)建對話框。
<dialog>
元素默認(rèn)是隱藏的。
<!-- 默認(rèn)是隱藏的 --> <dialog> <h3>Dialog Title</h3> <p>Dialog content and other stuff will go here</p> </dialog>
添加open
屬性即可顯示。
<dialog open>
HTMLDialogElement 是 <dialog>
的底層元素表示,提供了 show()
、close()
、showModal()
方法,控制對話框的顯隱。
<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)不能操作背后頁面里的內(nèi)容;而 show()
是以彈框形式顯示的。
allowpaymentrequest
屬性
現(xiàn)在可以為<iframe>
添加 allowpaymentrequest
屬性的方式,允許<iframe>
內(nèi)部網(wǎng)頁使用 Payment Request API 。
<iframe allowpaymentrequest>
rel="apple-touch-icon"
我們使用<link rel="icon">
指定網(wǎng)頁 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
來支持在自家設(shè)備上顯示網(wǎng)頁或安裝網(wǎng)頁應(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è)頁面只能存在一個(gè)<main>
標(biāo)簽,用來表示某個(gè)頁面獨(dú)一無二的主題內(nèi)容。不過,從 HTML 5.2 版本開始,允許一個(gè)頁面中同時(shí)存在多個(gè) <main>
標(biāo)簽,不過只能有一個(gè)顯示的,其他都要用hidden
屬性隱藏。
<main>...</main> <main hidden>...</main> <main hidden>...</main>
注意,其他不顯示的<main>
都要使用hidden
屬性隱藏,使用 display: none;
或visibility: hidden;
的方式的隱藏都是無效的。
<body> 內(nèi) <style>
<style>
之前都是只能在<head>
內(nèi)定義的,不過隨著 component-ized 開發(fā)模式的增長,將組件樣式就近寫在組件結(jié)構(gòu)旁邊的模式開始流行起來。
HTML 5.2 允許在<body>
內(nèi)使用<style>
標(biāo)簽,就近定義結(jié)構(gòu)樣式。
<body> <p>I’m cornflowerblue!</p> <style> p { color: cornflowerblue; } </style> <p>I’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>
可能會導(dǎo)致之前元素的布局改變,令頁面發(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>
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()
方法
新的無效實(shí)踐
<p>
中的無效內(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的全稱為超文本標(biāo)記語言,它是一種標(biāo)記語言,包含了一系列標(biāo)簽.通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個(gè)邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說明文字,圖形、動(dòng)畫、聲音、表格、鏈接等,主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“HTML5.2版本有什么變化”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
文章題目:HTML5.2版本有什么變化-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址:http://aaarwkj.com/article44/goihe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)公司、軟件開發(fā)、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容