站长资源网页制作

详解HTML5.2版本带来的修改

整理:jimmy2024/12/24浏览2
简介W3C HTML 5.2 规范中, 有一节 介绍该版本引入的修改,我综合来自 《What’s New in HTML 5.2?》 这篇文章的描述,在此列举对我来说比较重要的部分。新特性 原生 元素对话框在平时开发中,使用较为频繁,HTML 5.2 规范提供了

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>

详解HTML5.2版本带来的修改

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="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。

<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>

详解HTML5.2版本带来的修改

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">