详解HTML5.2版本号带来的改动

日期：2021-02-22 类型：科技新闻 

关键词：小程序制作流程，抽奖小程序，微信小程序怎么开店，小程序码生成，小程序模版

W3C HTML 5.2 标准中， 有1节 详细介绍该版本号引进的改动，我综合性来自 《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>

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() 建立是1个模态框，开启时默认设置不可以实际操作身后网页页面里的內容；而  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 以前，iPhone 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 以前，1个网页页面只能存在1个 <main> 标识，用来表明某个网页页面唯一无2的主题內容。但是，从 HTML 5.2 版本号刚开始，容许1个网页页面中另外存在好几个  <main> 标识，但是只能有1个显示信息的，别的都要用 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> 中，为表单域编组。

下面是1个事例：

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

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> 中的失效內容

下列3类元素不可以做为 <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版本号带来的改动的文章内容就详细介绍到这了,更多有关HTML5.2版本号內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：手机微信抽奖活动h5手机游戏综合服务平台，您的 返回下一篇：没有了