![e50e2c75608147f9e3035cccf882064a.png](https://i-blog.csdnimg.cn/blog_migrate/0d9eb12ca2dedf41d1d5821a214a2b9d.jpeg)
前端inn
公众号ID:前端inn
关注
作者:罗哥
编辑:煜喵喵不爱喝酒
W3C HTML 5.2 规范中,有一节介绍该版本引入的修改,我综合来自《What’s New in HTML 5.2?》这篇文章的描述,在此列举我觉得比较重要的部分。
新特性
原生
元素
对话框在平时开发中使用较为频繁,HTML 5.2 规范提供了 元素来创建对话框。
元素默认是隐藏的。
<dialog> <h2>Dialog Titleh2> <p>Dialog content and other stuff will go herep>dialog>
添加 open
属性即可显示。
![2122d022501f6f6fe8f6815033390e1d.png](https://i-blog.csdnimg.cn/blog_migrate/52c4cab0f691276363c6e898f364189b.jpeg)
HTMLDialogElement 是 的底层元素表示,提供了 show()、close()、showModal() 方法,控制对话框的显隐。
Open DialogClose Dialog
Dialog Title
Dialog content and other stuff will go here
const dialog = document.getElementById("dialog");document.getElementById("open").addEventListener("click", () => { dialog.show();});document.getElementById("close").addEventListener("click", () => { dialog.close();});
show()
与showModal()
不同之处在于,showModal()
创建是一个模态框,打开时默认不能操作背后页面里的内容;而show()
是以弹框形式显示的。
allowpaymentrequest 属性
现在可以为
rel="apple-touch-icon"
我们使用 指定网页 icon,除此之外它还支持使用 sizes 属性,定义不同的尺寸的 icon,供浏览器在显示是择优显示。
HTML 5.2 之前,苹果 iOS 设备并不支持 的 sizes 属性,而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用(比如 PWA)时使用的 icon。
现在规范承认了 apple-touch-icon 这个 rel 值,并且支持在这个 上设置 sizes 属性。
新的有效实践
多个 标签
HTML 5.2 之前,一个页面只能存在一个 标签,用来表示某个页面独一无二的主题内容。
不过,从 HTML 5.2 版本开始,允许一个页面中同时存在多个 标签,但是只能有一个显示的,其他都要用
hidden
属性隐藏。
.........
其他不显示的 都要使用 hidden 属性隐藏,使用 display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。
内
HTML 5.2 允许在 内使用
标签,就近定义结构样式。
<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.
即 内的
中可使用标题元素
用在 标签中作标题使用, 则用在 中,为表单域编组。
下面是一个例子:
Personalia:
First name:
Last name:
Email:
Birthday:
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
HTML 5.2 之前, 中只能使用纯文本,HTML 5.2 开始,可以使用标题元素了。
Basic Information
Contact Information
移除特性
、
和
元素
文本
的
inputmode
和dropzone
属性widow.showModalDialog()
方法
新的无效实践
中的无效内容
以下三类元素不能作为
段落的内容。
行内块、表格元素(Inline blocks、inline tables)
浮动元素(floated)
定位元素(positioned block-level elements)
HTML4 和 XHTML1 的严格文档类型声明(strict doctype)不再是有效 HTML。
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
若您对前端开发有兴趣请关注前端inn
遇到问题,请联系我们 QQ群:1141255876
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
求分享
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
求点赞
![loading.gif](https://i-blog.csdnimg.cn/blog_migrate/0a0b243c837b0e75e9dd332ba399c771.gif)
求在看