详解HTML5.2版本带来的修改


Posted in HTML / CSS onMay 06, 2020

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版本带来的修改的文章就介绍到这了,更多相关HTML5.2版本内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 #HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 #HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 #HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python去除所有html标签的方法
2015/05/05 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
企业承诺书怎么写
2014/05/24 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Go 内联优化让程序员爱不释手
2022/06/21 Golang