HTML 5.2 版本带来的修改

时间 2020-05-09

标签 html 5.2 版本带来修改栏目 HTML 繁體版

原文原文链接

W3C HTML 5.2 规范中，有一节介绍该版本引入的修改，我综合来自《What’s New in HTML 5.2?》这篇文章的描述，在此列举对我来讲比较重要的部分。javascript

新特性

原生 `<dialog>` 元素

对话框在平时开发中，使用较为频繁，HTML 5.2 规范提供了 <dialog> 元素来建立对话框。php

<dialog> 元素默认是隐藏的。css

<!-- 默认是隐藏的 -->
<dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>
复制代码

添加 open 属性便可显示。html

<dialog open>
复制代码

HTMLDialogElement 是 <dialog> 的底层元素表示，提供了 show()、close()、showModal() 方法，控制对话框的显隐。html5

<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() 是以弹框形式显示的。java

`allowpaymentrequest` 属性

如今能够为 <iframe> 添加 allowpaymentrequest 属性的方式，容许 <iframe> 内部网页使用 Payment Request API。web

<iframe allowpaymentrequest>
复制代码

`rel="apple-touch-icon"`

咱们使用 <link rel="icon"> 指定网页 icon，除此以外它还支持使用 sizes 属性，定义不一样的尺寸的 icon，供浏览器在显示是择优显示。浏览器

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

HTML 5.2 以前，苹果 iOS 设备并不支持 <link rel="icon"> 的 sizes 属性，而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用（好比 PWA）时使用的 icon。app

<link rel="apple-touch-icon" href="/example.png">
复制代码

如今规范认可了 apple-touch-icon 这个 rel 值，而且支持在这个 <link rel="apple-touch-icon"> 上设置 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">
复制代码

新的有效实践

多个 `<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 开始，可使用标题元素了。

<fieldset>
    <legend><h2>Basic Information</h2></legend>
    <!-- Form fields for basic information -->
</fieldset>
<fieldset>
    <legend><h2>Contact Information</h2></legend>
    <!-- Form fields for contact information -->
</fieldset>
复制代码

移除特性

<keygen>、<menu> 和 <menuitem> 元素
文本 <input> 的 inputmode 和 dropzone 属性
widow.showModalDialog() 方法

新的无效实践

`<p>` 中的无效内容

如下三类元素不能做为 <p> 段落的内容。

行内块、表格元素（Inline blocks、inline tables）
浮动元素（floated）
定位元素（positioned block-level elements）

strict doctype

HTML4 和 XHTML1 的严格文档类型声明（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 5.2 版本带来的修改

新特性

原生 <dialog> 元素

allowpaymentrequest 属性

rel="apple-touch-icon"