每一个前端工程师都应该了解的HTML5.2

时间 2019-11-17

原文原文链接

HTML5.2的到来

通常在W3C当中.对版本的发布会通过四个阶段分别是:工做草案（WD）、备选推荐标准（CR）、提案推荐标准（PR）和最终的W3C正式推荐标准（REC）.而当一个规范到达REC阶段时，就意味着它已经获得了W3C成员的正式承认，并推荐它由用户代理部署，前端工程师进行使用。javascript

如今,就在2017年12月14日W3C发布了HTML规范5.2更新版本,这个版本相对以前的版原本说有了一些增长和删除.对于这些变动,均可以在HTML 5.2 Changes这个页面上看到.而下面我会对这些变动中某些内容进行介绍.html

新增的dialog元素

在HTML5.2中新增了dialog这个标签.来帮助咱们快速实现一个对话框.在HTML5.2以前咱们想实现一个对话框功能,大概的实现方式的是:一个div,先将它display: none隐藏掉.而后在须要的地方再讲其display置为block.这样就能控制一个对话框的显示和隐藏.而在HTML5.2中,你只须要这写:前端

<dialog id="dialog">
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>
复制代码

就能够获得一个对话框.默认状况下这个对话框是隐藏的,你能够给他添加open属性让他显示出来html5

<dialog id="dialog" open>
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>
复制代码

同时,也能够拿到这个dialog元素,而后调用它的show()方法让他显示java

<dialog id="dialog" open>
    <h2>我是对话框标题</h2>
    <p>我是对话框内容</p>
</dialog>

<script> const dialog = document.querySelector('#dialog').show(); </script>
复制代码

一样的,若是那你想要这个对话框隐藏,只须要调用这个dialog元素的close()方法便可浏览器

此外,当你想要在显示对话框的同时,有一个遮罩层的话.你可使用showModal()这个方法.它会在显示对话框的同时,在你页面的顶层显示一个遮罩层,以防止你去操做除对话框之外的它元素.另外要注意一点的是open属性和showModal()不能同时使用,不然会报;Untitled-1.html:28 Uncaught DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally.这个错误前端工程师

最后dialog的兼容性以下:工具

支付请求API --- allowpaymentrequest

在HTML5.2以前.对于支付请求的API是不能在iframe中来完成的.因此每次咱们在进行移动支付时都须要跳转到另一个支付页面才能完成付款.而如今,使用allowpaymentrequest属性应用在iframe上网站

<iframe allowpaymentrequest>
复制代码

这样,就可让iframe使用Payment Request API从而让ui

嵌入了第三方内容的页面可以控制该第三方内容是否可向用户请求获取支付凭证，进而让可嵌入的购物车工具能够利用Payment Request API。

来自Forrester的Brendan Miller阐述了支付请求API所带来的好处，他说：该新标准让开发者能够建立一个简化的结账页面，用户能够重复使用保存的付款和地址信息来加快结帐速度，并减小错误输入。

Payment Request API的兼容性:

在页面上同时使用多个`main`标签

HTML Main元素<main>呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部份内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，好比侧边栏，导航栏连接，版权信息，网站logo，搜索框（除非搜索框做为文档的主要功能）。

上面是一段是MDN上对于<main>标签的介绍.其中说明了<main>标签中的内容应该是文档的主题内容,而且是独一无二的.因此,在这段介绍后面有一点注意在一个文档中不能出现一个以上的<main>标签

而如今,随着单页面应用(SPA)的愈来愈流行.使得这一特性的已经不符合当下的实景,因此在HTML5.2中.在页面中同时出现多个<main>标签是被容许的.只要在同一时间内,只有一个<main>标签是对外显示的,其余全部都是被hidden属性隐藏的便可

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>
复制代码

此外要注意,隐藏<main>标签的方法必须是使用hidden属性才行.其它的如:display: none、透明的为0等方法不行.这会让<main>标签失去本身的语义和做用.

被删除的属性和元素

被删除的元素

keygen：用于帮助生成表单的公钥
menu和menuitem：用于建立导航或上下文菜单

被删除的属性

Window.showModalDialog(): 建立并显示一个包含指定HTML文档的模态框。
插件API: 提供有关浏览器插件的信息 .

废弃的HTML头部声明

如下两种HTML的头部声明已在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">
复制代码

上面是我HTML5.2的一些粗浅的总结,但愿对你们有所帮助.若是文中有何不当之处请予以斧正,谢谢.

参考资料

个人我的网址: wangyiming.info