小李飞刀资源网

详解HTML5.2版本带来的修改
网页制作 2024/12/23 佚名
3 2
小李飞刀资源网 Design By www.iooab.com

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">
标签：
HTML5.2版本,修改
小李飞刀资源网 Design By www.iooab.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
小李飞刀资源网 Design By www.iooab.com
www.iooab.com 小李飞刀资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接