详解HTML5.2版本带来的修改
|
副问题[/!--empirenews.page--]
W3C HTML 5.2 类型中， 先容该版本引入的修改，我综合来自 《What’s New in HTML 5.2?》 这篇文章的描写，在此罗列对我来说较量重要的部门。 新特征 原生 <dialog> 元素 对话框在平常开拓中，行使较为频仍，HTML 5.2 类型提供了 <dialog> 元向来建设对话框。 <dialog> 元素默认是潜匿的。 <!-- 默认是潜匿的 --> <dialog> <h2>Dialog Title</h2> <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"> <h2>Dialog Title</h2> <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() 建设是一个模态框，打开时默认不能操纵背后页面里的内容；而 show() 是以弹框情势表现的。 allowpaymentrequest 属性 此刻可觉得 <iframe> 添加 allowpaymentrequest 属性的方法，应承 <iframe> 内部网页行使 Payment Request API 。 <iframe allowpaymentrequest> rel="apple-touch-icon" 我们行使 <link rel="icon"> 指定网页 icon，除此之外它还支持行使 sizes 属性，界说差异的尺寸的 icon，供赏识器在表现是择优表现。 <link rel="icon" sizes="16x16" href=http://www.jb51.net/html5/"path/to/icon16.png"> <link rel="icon" sizes="32x32" href=http://www.jb51.net/html5/"path/to/icon32.png"> HTML 5.2 之前，苹果 iOS 装备并不支持 <link rel="icon"> 的 sizes 属性，而是行使 apple-touch-icon rel 来支持在自家装备上表现网页或安装网页应用（好比 PWA）时行使的 icon。 <link rel="apple-touch-icon" href=http://www.jb51.net/html5/"/example.png"> 此刻类型认可了 apple-touch-icon 这个 rel 值，而且支持在这个 <link rel="apple-touch-icon"> 上配置 sizes 属性。 <link rel="apple-touch-icon" sizes="16x16" href=http://www.jb51.net/html5/"path/to/icon16.png"> <link rel="apple-touch-icon" sizes="32x32" href=http://www.jb51.net/html5/"path/to/icon32.png"> 新的有用实践 多个 <main> 标签 HTML 5.2 之前，一个页面只能存在一个 <main> 标签，用来暗示某个页面唯一无二的主题内容。不外，从 HTML 5.2 版本开始，应承一个页面中同时存在多个 <main> 标签，不外只能有一个表现的，其他都要用 hidden 属性潜匿。 <main>...</main> <main hidden>...</main> <main hidden>...</main> 留意，其他不表现的 <main> 都要行使 hidden 属性潜匿，行使 display: none; 或 visibility: hidden; 的方法的潜匿都是无效的。 <body> 内 <style> <style> 之前都是只能在 <head> 内界说的，不外跟着 component-ized 开拓模式的增添，将组件样式就近写在组件布局旁边的模式开始风行起来。 HTML 5.2 应承在 <body> 内行使 <style> 标签，就近界说布局样式。 <body> <p>I’m cornflowerblue!</p> <style> p { color: cornflowerblue; } </style> <p>I’m cornflowerblue!</p> </body> 但最好照旧不要这样做，把样式写在 中是更保举的做法。类型中提到： 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> 内的 <style> 也许会导致之前元素的机关改变，令页面产生重绘。以是只管停止行使。 <legend> 中可行使问题元素 <legend> 用在 <fieldset> 标签中作问题行使， <fieldset> 则用在 <form> 中，为表单域编组。 下面是一个例子： <!-- 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 开始，可以行使问题元素了。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
