HTML5.2版本有什么变化-创新互联

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

创新互联建站是一家集网站制作、做网站、网站页面设计、网站优化SEO优化为一体的专业的建站公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

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-iconrel 来支持在自家设备上显示网页或安装网页应用（比如 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>

移除特性

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

html是什么

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

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

网页名称：HTML5.2版本有什么变化-创新互联
网站网址：https://www.cdcxhl.com/article44/goihe.html

成都网站建设公司_创新互联，为您提供品牌网站设计、移动网站建设、用户体验、营销型网站建设、python、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

1成都定制网站建设

域名注册知识

分类信息网站