文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5.2版本有什么变化

2023-06-09 11:41

关注

这篇文章主要介绍了HTML5.2版本有什么变化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

新特性

原生 <dialog> 元素

对话框在平时开发中,使用较为频繁,HTML 5.2 规范提供了 <dialog> 元素来创建对话框。

<dialog> 元素默认是隐藏的。

<!-- 默认是隐藏的 --><dialog>  <h3>Dialog Title</h3>  <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">  <h3>Dialog Title</h3>  <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&rsquo;m cornflowerblue!</p>    <style>        p { color: cornflowerblue; }    </style>    <p>I&rsquo;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><h3>Basic Information</h3></legend>    <!-- Form fields for basic information --></fieldset><fieldset>    <legend><h3>Contact Information</h3></legend>    <!-- Form fields for contact information --></fieldset>

移除特性

新的无效实践

<p> 中的无效内容

以下三类元素不能作为 <p> 段落的内容。

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

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5.2版本有什么变化”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯