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

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

@H_406_3@新特性

原生 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="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>
    

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

到此这篇关于详解HTML5.2版本带来的修改的文章就介绍到这了,更多相关HTML5.2版本内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！