Html 5.2 的简单介绍及新增元素 dialog/dialog
html 5.2 已经于2017年12月 14 日发布, 以下是对html5.2的简单的介绍(注:本文笼统地整理了一部分Html5.2的改动,如有错误之处,敬请指正)。
进行的改动
- 从2016年1月12开始的所有更改细节都可以到Github上查看。不过这次改动很明显的是降低了商务应用的和风险以及提高残障人士的用户体验。
新增的特性
<dialog>
元素- 与
Es6
的模块系统进行整合 - 更新了
ARIA
使用参考至[wai-aria-1.1](提高新特性学习的简易型) - 处于资源安全策略
<link>
标签新增了nonce
属性 <iframe>
标签新增allowpaymentrequest
属性,sandbox
属性新增值allow-presentatioin
<link/>
标签新增nonce
属性,新增类型noreferrer
,原有的rel
属性新增值canonical以及apple-touch-icon
- 新增三个方法
- registerContentHandler()
- isContentHandlerRegistered()
isProtocolHandlerRegistered()
- 所有的
html
元素提供可计算的innerText
属性 - 为
MP4
格式的文件定义了about:html-kind URL
路径 - 整合了[CSP3] “出于安全策略元素是否应该事先被阻塞”
移除的特性
<keygen> <menu> <menuitem>
元素<input/>
元素的默认属性以及dropzone
属性showModalDialog
方法Plugin API
修复的bug以及改良适应性
- 阻止在无网络情况下请求媒体资源时对加载事件的延迟
- 更新了
<summary>
的渲染机制 HashChangeEvent
的URL使用USString
替代DomString
URL
被视作独立的资源- 部分原本可以使用的结构现在已经不合法
<body>
标签内包含<style>
标签<div>
标签作为<dl>
标签的子元素- 空的
<option>
作为<datalist>
的子元素
- 部分不支持的结构现在都可以使用
- 行内块,行内表格,浮动和定位的会计元素都可以作为
<p>
标签的子元素
- 行内块,行内表格,浮动和定位的会计元素都可以作为
当然,以上只是html5.2
的一部分内容。其中最让我感兴趣的是新增的<dialog>
元素,这个元素的出现,解决了开发过程中的很多问题,尤其是弹出框的实现,可以大大提高开发效率。
元素的简单介绍
<dialog>
是个块级元素,使用起来非常简单。
<dialog>这就是个简单的dialog元素
<dialog/>
当然,这段代码运行的时候,在浏览器界面上什么也看不到,因为<dialog>
元素默认是隐藏得,必须为它加上open
属性,那么就可以清楚地看到一个弹窗了。
<dialog open>这就是个可见的简单的dialog元素
<dialog/>
<dialog>
元素的默认背景是完全透明的白色背景,其中的样式可以进行修改,让弹出框更美观。
dialog{ width: 400px; height:300px; padding: 0; text-align: center; background: rgba(136, 201, 231, 0.3); color:rgb(6, 136, 243); border:1px dashed #ff3039;}dialog::backdrop { /* 弹窗的遮罩层 */ background-color: rgba(0, 0, 0, 0.4); }
对象方法
javascript
提供了几个方法操作<dialog>
元素:
close()
关闭对话show()
显示对话showModal()
显示对话,并使其成为top-most
型对话(即<dialog>
的层级最高)。
其中用的比较多的是showModal()
和 close()
。
<style> dialog{width: 400px; height:300px; padding: 0; text-align: center; background: rgba(136, 201, 231, 0.3); color:rgb(6, 136, 243); border:1px dashed #ff3039;
}
p{ width: 400px; height:400px; background: #ff3;position: absolute; z-index: 999; }
</style><body> <p>p标签</p><dialog > 这就是个可见的简单的dialog元素 <button>关闭弹窗</button> </dialog>
</body><script>
var p = document.querySelector('p');
var modal = document.querySelector('dialog');
var btn = document.querySelector('button');
p.onclick = function(){
modal.showModal(); //为<dialog>元素增加open属性
}btn.onclick = function(){modal.close();//为<dialog>元素移除open属性//close()方法允许传入一个返回值,在弹出框关闭的时候触发//modal.close('返回值'); // console.log('returnValue',modal.returnValue);
}
注:无法通过p元素触发modal对象的close事件,因为此时<dialog>元素的层级最高,简单地说,
如果不是<dialog>元素本身或者其子级或者后代元素,是无法触发其任何事件的。当然点击通过esc键
也可以关闭弹窗。
</script>
元素的兼容
该元素的目前的兼容性并不好。
此外,遮罩层背景的伪类选择器,在老一点的浏览器上并不生效。
dialog::backdrop {background-color: rgba(0, 0, 0, 0.4);
}
/*兼容老版本的浏览器*/
dialog + .backdrop {background-color: rgba(0, 0, 0, 0.4);
}
总的来说,当各浏览器都支持<dialog>元素的时候,工作开发的效率又可以有很大的提高,很期待!
参考:
[1] w3cSchool HTML5.2
[2] Meet the New Dialog Element HTML5.2
转载于:https://juejin.im/post/5af2a6e86fb9a07acc11b478
Html 5.2 的简单介绍及新增元素 dialog/dialog相关推荐
- WCF中绑定的简单介绍
绑定基本概念 绑定就是一个从通用基础类型派生出来的运行时类型.绑定中描述了传输协议,消息编码格式和其他的一些用于通信的通信协议. 绑定的种类介绍 类型名 配置文件使用名 描述 BasicHttpBin ...
- HDFS简单介绍及用C语言訪问HDFS接口操作实践
一.概述 近年来,大数据技术如火如荼,怎样存储海量数据也成了当今的热点和难点问题,而HDFS分布式文件系统作为Hadoop项目的分布式存储基础,也为HBASE提供数据持久化功能,它在大数据项目中有很广 ...
- salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
- python django框架分析_Django框架模型简单介绍与使用分析
本文实例讲述了Django框架模型简单介绍与使用.分享给大家供大家参考,具体如下: ORM介绍 ORM Object relational mapping 对象关系映射 把面向对象中的类和数据库表一一 ...
- canvas1:简单介绍、开始使用、画直线+虚线
目录 一.简单介绍 二.开始使用 三.画直线.虚线 3.1 画直线 1. 画直线的步骤: 2. 设置直线的样式 3. 绘制多条直线 3.2 画虚线 四.整理使用到的方法: 参考了廖雪峰老师的笔记. 一 ...
- mysql5.7参数简单介绍
以下my.cnf简单介绍了各个参数的作用,除了buffer_pool_size,server id等参数需要按照服务器配置修改,其余大部分参数不用修改,可以直接用于生产环境. [client] por ...
- python中len用法_简单介绍Python中的len()函数的使用
简单介绍Python中的len()函数的使用 函数:len() 1:作用:返回字符串.列表.字典.元组等长度 2:语法:len(str) 3:参数:str:要计算的字符串.列表.字典.元组等 4:返回 ...
- 6个越南主流社交媒体软件简单介绍
越来越多的小伙伴发现了东南亚市场的魅力,开始主攻东南亚跨境电商了.今天我们小编就来给大家简单介绍一下东南亚国家之一越南主流社交媒体平台,为大家开拓越南市场贡献一份力量. 6个越南主流社交媒体软件简单介 ...
- html作品简介代码,HTML5的标签的代码的简单介绍 HTML5标签的简介
HTML5的标签的代码的简单介绍 HTML5标签的简介 发布时间:2012-05-28 14:43:34 作者:佚名 我要评论 本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便 ...
最新文章
- Fedora和Fedora Core各个历史版本官方下载地址
- MFC中进度条控件的使用方法
- neo4j 4.1.8版本安装图算法包
- [Comet OJ - Contest #7 D][52D 2417]机器学习题_斜率优化dp
- 实时计算框架 Spark: Lightning-fast cluster computing
- 读我是一只IT小小鸟有感
- PyCharm黄色波浪线提示: Simplify chained comparison
- android 时间水印相机,水印相机时间打卡
- 用计算机修改图片或照片,【如何更改图片像素】电脑上如何改照片像素
- c语言程序答案PDF,C语言程序设计答案.pdf
- linux无线网卡ucod文件,基于Linux的无线网卡驱动程序
- 掌握Python核心编程的四大神兽,何尝拿不到高薪资
- vrp java_HCIA-VRP基础及操作
- 四象限工作法:四象限时间管理法则及四象限工作法软件
- LU分解法c语言程序设计,矩陣LU分解求逆详细分析与C语言实现.doc
- Shiro第十二章-与Spring集成、配置文件初解
- 天边一朵云-书画双绝
- Discover中英文显示问题
- 游戏美术设计从业者过了30岁后都是如何发展的?
- ToF技术的应用及产业链简述----​ToF技术系列(一)