您的位置:首页 > Web前端 > > 正文

html5的语法变化(详解HTML5.2版本带来的修改)

更多 时间:2021-10-16 00:48:04 类别:Web前端 浏览量:767

html5的语法变化

详解HTML5.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的语法变化(详解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.jpg" alt="html5的语法变化(详解HTML5.2版本带来的修改)" border="0" />
    
  • HTML 5.2 之前,苹果 iOS 设备并不支持 <link rel="icon">sizes 属性,而是使用  apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用(比如 PWA)时使用的 icon。

  • <link rel="apple-touch-icon" href="/example.jpg" alt="html5的语法变化(详解HTML5.2版本带来的修改)" border="0" />
    
  • 现在规范承认了 apple-touch-icon 这个 rel 值,并且支持在这个  <link rel="apple-touch-icon"> 上设置 sizes 属性。

  • <link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.jpg" alt="html5的语法变化(详解HTML5.2版本带来的修改)" border="0" />
    
  • 新的有效实践

    多个 <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的语法变化(详解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">
    
  • 到此这篇关于详解HTML5.2版本带来的修改的文章就介绍到这了,更多相关HTML5.2版本内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    标签:HTML5.2版本