博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html 5.2 的简单介绍及新增元素 <dialog></dialog>
阅读量:6865 次
发布时间:2019-06-26

本文共 2035 字,大约阅读时间需要 6 分钟。

html 5.2 已经于2017年12月 14 日发布, 以下是对html5.2的简单的介绍(注:本文笼统地整理了一部分Html5.2的改动,如有错误之处,敬请指正)。

进行的改动

  • 从2016年1月12开始的所有更改细节都可以到Github上查看。不过这次改动很明显的是降低了商务应用的和风险以及提高残障人士的用户体验。

新增的特性

  • <dialog>元素
  • Es6 的模块系统进行整合
  • 更新了ARIA使用参考至(提高新特性学习的简易型)
  • 处于资源安全策略<link>标签新增了nonce属性
  • <iframe>标签新增allowpaymentrequest属性,sandbox属性新增值allow-presentatioin

  • <link/> 标签新增nonce属性,新增类型noreferrer,原有的rel属性新增值canonical以及apple-touch-icon
  • 新增三个方法
    1.  
    2.   
  • 所有的html元素提供可计算的innerText属性
  • MP4格式的文件定义了about:html-kind URL路径
  • 整合了 “出于安全策略元素是否应该事先被阻塞”

移除的特性

  • <keygen> <menu> <menuitem> 元素
  • <input/>元素的默认属性以及dropzone属性
  • showModalDialog 方法
  •  Plugin API

修复的bug以及改良适应性

  • 阻止在无网络情况下请求媒体资源时对加载事件的延迟
  • 更新了<summary>的渲染机制
  • HashChangeEvent 的URL使用USString 替代DomString
  • URL被视作独立的资源
  • 部分原本可以使用的结构现在已经不合法
    1. <body>标签内包含<style>标签
    2. <div>标签作为<dl>标签的子元素
    3. 空的<option>作为<datalist>的子元素
  • 部分不支持的结构现在都可以使用
    1. 行内块,行内表格,浮动和定位的会计元素都可以作为<p>标签的子元素

当然,以上只是html5.2的一部分内容。其中最让我感兴趣的是新增的<dialog>元素,这个元素的出现,解决了开发过程中的很多问题,尤其是弹出框的实现,可以大大提高开发效率。

元素的简单介绍

<dialog>是个块级元素,使用起来非常简单。

这就是个简单的dialog元素
复制代码

当然,这段代码运行的时候,在浏览器界面上什么也看不到,因为<dialog>元素默认是隐藏得,必须为它加上open属性,那么就可以清楚地看到一个弹窗了。

这就是个可见的简单的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()

       

p标签

这就是个可见的简单的dialog元素
复制代码

元素的兼容

该元素的目前的兼容性并不好。

此外,遮罩层背景的伪类选择器,在老一点的浏览器上并不生效。

dialog::backdrop {  background-color: rgba(0, 0, 0, 0.4);}/*兼容老版本的浏览器*/dialog + .backdrop {  background-color: rgba(0, 0, 0, 0.4);}复制代码

总的来说,当各浏览器都支持<dialog>元素的时候,工作开发的效率又可以有很大的提高,很期待!

参考:

[1]  HTML5.2

[2] HTML5.2

转载于:https://juejin.im/post/5af2a6e86fb9a07acc11b478

你可能感兴趣的文章
学习webpack4 - 样式处理
查看>>
nextjs踩坑
查看>>
TiKV 源码解析系列文章(二)raft-rs proposal 示例情景分析
查看>>
153. Find Minimum in Rotated Sorted Array
查看>>
让移动开发更轻松 闲鱼基于Flutter构建跨端APP应用实践
查看>>
Python爬虫 --- 2.3 Scrapy 框架的简单使用
查看>>
【每日一包0023】concat-stream
查看>>
Metricbeat 参考指南(步骤2:配置Metricbeat)
查看>>
doodoo.js快速入门教程
查看>>
XXL-EXCEL v1.1.1 发布,Java对象和Excel转换工具
查看>>
elasticsearch 自动删除索引脚本
查看>>
NLP入门(五)用深度学习实现命名实体识别(NER)
查看>>
js 排序算法之快速排序
查看>>
边缘计算ENS:拓展云的边界
查看>>
从0开发豆果美食小程序——搜索组件
查看>>
cordova 远程h5页面调用本地js
查看>>
巨杉数据库多活架构实践
查看>>
使用机器学习预测电子竞技游戏《守望先锋》的胜负
查看>>
即将到来的java11的新特性
查看>>
React基础再回顾
查看>>