伏龙阁资源网

详解HTML5.2版本带来的修改
站长资源 2024/11/23 佚名
2 0

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">
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

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