您现在的位置是:网站首页> 编程资料编程资料
详解HTML5.2版本带来的修改html5.2 dialog简介详解
2021-08-30
827人已围观
简介 这篇文章主要介绍了详解HTML5.2版本带来的修改,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
W3C HTML 5.2 规范中, 有一节 介绍该版本引入的修改,我综合来自 《What’s New in HTML 5.2?》 这篇文章的描述,在此列举对我来说比较重要的部分。
新特性
原生 元素
对话框在平时开发中,使用较为频繁,HTML 5.2 规范提供了 元素来创建对话框。
元素默认是隐藏的。
添加 open 属性即可显示。

HTMLDialogElement 是 的底层元素表示,提供了 show() 、 close() 、 showModal() 方法,控制对话框的显隐。
show() 与 showModal() 不同之处在于, showModal() 创建是一个模态框,打开时默认不能操作背后页面里的内容;而 show() 是以弹框形式显示的。
allowpaymentrequest 属性
现在可以为 添加 allowpaymentrequest 属性的方式,允许 内部网页使用 Payment Request API 。
rel="apple-touch-icon"
我们使用 指定网页 icon,除此之外它还支持使用 sizes 属性,定义不同的尺寸的 icon,供浏览器在显示是择优显示。
HTML 5.2 之前,苹果 iOS 设备并不支持 的 sizes 属性,而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用(比如 PWA)时使用的 icon。
现在规范承认了 apple-touch-icon 这个 rel 值,并且支持在这个 上设置 sizes 属性。
新的有效实践
多个
HTML 5.2 之前,一个页面只能存在一个 标签,用来表示某个页面独一无二的主题内容。不过,从 HTML 5.2 版本开始,允许一个页面中同时存在多个 标签,不过只能有一个显示的,其他都要用 hidden 属性隐藏。
... ... ...
注意,其他不显示的 都要使用 hidden 属性隐藏,使用 display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。
内
之前都是只能在 内定义的,不过随着 component-ized 开发模式的增长,将组件样式就近写在组件结构旁边的模式开始流行起来。
HTML 5.2 允许在 内使用 标签,就近定义结构样式。
I’m cornflowerblue!
I’m cornflowerblue!
但最好还是不要这样做,把样式写在 中是更推荐的做法。规范中提到:
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.
即 内的 可能会导致之前元素的布局改变,令页面发生重绘。所以尽量避免使用。
用在 标签中作标题使用, 则用在 中,为表单域编组。
下面是一个例子:

HTML 5.2 之前, 中只能使用纯文本,HTML 5.2 开始,可以使用标题元素了。
移除特性
、和元素- 文本
的inputmode和dropzone属性 widow.showModalDialog()方法
新的无效实践
中的无效内容
以下三类元素不能作为 段落的内容。
- 行内块、表格元素(Inline blocks、inline tables)
- 浮动元素(floated)
- 定位元素(positioned block-level elements)
strict doctype
HTML4 和 XHTML1 的严格文档类型声明(strict doctype)不再是有效 HTML。
到此这篇关于详解HTML5.2版本带来的修改的文章就介绍到这了,更多相关HTML5.2版本内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- canvas绘制太极图的实现示例Canvas制作旋转的太极的示例HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
- HTML5 HTMLCollection和NodeList的区别详解html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5调用手机发短信和打电话功能html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- H5离线存储Manifest原理及使用利用Node实现HTML5离线存储的方法HTML5中的网络存储实现方式使用HTML5 IndexDB存储图像和文件的示例HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码
- HTML5中的网络存储实现方式利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用使用HTML5 IndexDB存储图像和文件的示例HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码
- HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题HTML5 图片预加载的示例代码Html5调用手机摄像头并实现人脸识别的实现html5调用摄像头功能的实现代码HTML5混合开发二维码扫描以及调用本地摄像头HTML实现海康摄像头实时监控功能在HTML里加载摄像头的方法
- 遮罩层 + Iframe实现界面自动显示的示例代码HTML实现遮罩层的方法 HTML中如何使用遮罩层弹出一个遮罩层有正在加载效果的文字DIV遮罩层如何实现div背景半透明,覆盖整个可视区域的遮罩层效果 div背景半透明 覆盖整个可视区域的遮罩层效果Html5页面点击遮罩层背景关闭遮罩层
- html5中使用hotcss.js实现手机端自适配的方法
- html5 canvas 实现光线沿不规则路径运动html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 基于HTML5+tracking.js实现刷脸支付功能HTML5仿微信支付页面代码详解Html5微信支付爬坑之路html5仿支付宝密码框的实现代码
