影子论坛

搜索
黑夜模式

[html] HTML 5.2 版本带来的变化

[复制链接]
倔强青铜Ⅳ   utf-8  发表于 2020-5-13 16:41:23 | 显示全部楼层 |阅读模式

限时注册,成为会员后有更多权益

您需要 登录 才可以下载或查看,没有帐号?注册

x
本帖最后由 utf-8 于 2020-5-13 16:48 编辑

W3C HTML 5.2 规范中,有一节 介绍该版本引入的修改,在此列举对我来说比较重要的部分。


新特性原生 <dialog> 元素对话框在平时开发中,使用较为频繁,HTML 5.2 规范提供了 <dialog>  元素来创建对话框。
<dialog> 元素默认是隐藏的。
  1. <!-- 默认是隐藏的 -->
  2. <dialog>
  3.   <h2>Dialog Title</h2>
  4.   <p>Dialog content and other stuff will go here</p>
  5. </dialog>
复制代码

添加 open 属性即可显示。
<dialog open>

HTMLDialogElement 是 <dialog> 的底层元素表示,提供了 show()、close()、showModal() 方法,控制对话框的显隐。
  1. <button id="open">Open Dialog</button>
  2. <button id="close">Close Dialog</button>

  3. <dialog id="dialog">
  4.   <h2>Dialog Title</h2>
  5.   <p>Dialog content and other stuff will go here</p>
  6. </dialog>

  7. <script>
  8. const dialog = document.getElementById("dialog");

  9. document.getElementById("open").addEventListener("click", () => {
  10.   dialog.show();
  11. });

  12. document.getElementById("close").addEventListener("click", () => {
  13.   dialog.close();
  14. });
  15. </script>
复制代码

show() 与 showModal() 不同之处在于,showModal() 创建是一个模态框,打开时默认不能操作背后页面里的内容;而 show() 是以弹框形式显示的。
allowpaymentrequest 属性现在可以为 <iframe> 添加 allowpaymentrequest 属性的方式,允许 <iframe> 内部网页使用  Payment Request API。
  1. <iframe allowpaymentrequest>
复制代码
rel="apple-touch-icon"我们使用 <link rel="icon"> 指定网页 icon,除此之外它还支持使用 sizes 属性,定义不同的尺寸的 icon,供浏览器在显示是择优显示。
  1. <link rel="icon" sizes="16x16" href="path/to/icon16.png">  
  2. <link rel="icon" sizes="32x32" href="path/to/icon32.png">
复制代码

HTML 5.2 之前,苹果 ios 设备并不支持 <link rel="icon"> 的 sizes 属性,而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用(比如 PWA)时使用的 icon。
  1. <link rel="apple-touch-icon" href="/example.png">
复制代码

现在规范承认了 apple-touch-icon 这个 rel 值,并且支持在这个 <link rel="apple-touch-icon"> 上设置 sizes 属性。
  1. <link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.png">  
  2. <link rel="apple-touch-icon" sizes="32x32" href="path/to/icon32.png">
复制代码
新的有效实践多个 <main> 标签HTML 5.2 之前,一个页面只能存在一个 <main> 标签,用来表示某个页面独一无二的主题内容。不过,从 HTML 5.2 版本开始,允许一个页面中同时存在多个 <main> 标签,不过只能有一个显示的,其他都要用 hidden 属性隐藏。
  1. <main>...</main>
  2. <main hidden>...</main>
  3. <main hidden>...</main>
复制代码

注意,其他不显示的 <main> 都要使用 hidden 属性隐藏,使用  display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。
<body> 内 <style><style> 之前都是只能在 <head> 内定义的,不过随着  component-ized 开发模式的增长,将组件样式就近写在组件结构旁边的模式开始流行起来。
HTML 5.2 允许在 <body> 内使用 <style> 标签,就近定义结构样式。
  1. <body>
  2.     <p>I’m cornflowerblue!</p>
  3.     <style>
  4.         p { color: cornflowerblue; }
  5.     </style>
  6.     <p>I’m cornflowerblue!</p>
  7. </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> 中,为表单域编组。
下面是一个例子:
  1. <code class="hljs html copyable" lang="html"><!-- See: https://www.w3schools.com/tags/tag_fieldset.asp -->
  2. <form action="/action_page.php">
  3. <fieldset>
  4.   <legend>Personalia:</legend>
  5.   <label for="fname">First name:</label>
  6.   <input type="text" id="fname" name="fname"><br><br>
  7.   <label for="lname">Last name:</label>
  8.   <input type="text" id="lname" name="lname"><br><br>
  9.   <label for="email">Email:</label>
  10.   <input type="email" id="email" name="email"><br><br>
  11.   <label for="birthday">Birthday:</label>
  12.   <input type="date" id="birthday" name="birthday"><br><br>
  13.   <input type="submit" value="Submit">
  14. </fieldset>
  15. </form></code>
复制代码



HTML 5.2 之前,<legend> 中只能使用纯文本,HTML 5.2 开始,可以使用标题元素了。
  1. <fieldset>
  2.     <legend><h2>Basic Information</h2></legend>
  3.     <!-- Form fields for basic information -->
  4. </fieldset>
  5. <fieldset>
  6.     <legend><h2>Contact Information</h2></legend>
  7.     <!-- Form fields for contact information -->
  8. </fieldset>
复制代码

移除特性
  • <keygen>、<menu> 和 <menuitem> 元素
  • 文本 <input> 的 inputmode 和 dropzone 属性
  • widow.showModalDialog() 方法
新的无效实践<p> 中的无效内容以下三类元素不能作为 <p> 段落的内容。
  • 行内块、表格元素(Inline blocks、inline tables)
  • 浮动元素(floated)
  • 定位元素(positioned block-level elements)
strict doctypeHTML4 和 XHTML1 的严格文档类型声明(strict doctype)不再是有效 HTML。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
复制代码




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

免责声明: 影子论坛所发布的一切内容仅限用于学习和研究目的,请勿用于商业或者非法用途,否则一切后果由用户自负。 请支持正版得到更好的正版服务。如有侵权请邮件与我们联系处理。Mail To:swatxhim@outlook.com
快速回复 返回顶部 返回列表