前面的话

  HTML5不仅新增了语义型区块级元素及表单类元素,也新增了一些其他的功能性元素,这些元素由于浏览器支持等各种原因,并没有被广泛使用

文档描述

  <details>主要用于描述文档或文档某个部分的细节,与<summary>配合使用可以为<details>定义标题。标题是可见的,用户点击标题时,显示出details

  [注意]这两个标签只有chrome和opera支持

<details>

  该标签仅有一个open属性,用来定义details是否可见(默认为不可见状态)

<details>
<summary>Copyright .</summary>
<p>小火柴的蓝色理想</p>
</details>

对话框

  <dialog>标签用来定义对话框或窗口,且该对话框位于窗口的水平居中位置

<dialog>

  该标签只有一个open属性,用来定义对话框是否可见(默认为不可见)

  [注意]只有chrome和opera支持

<button>显示对话框</button>
<dialog>我是对话框的内容</dialog>
<script>
var oBtn = document.getElementsByTagName('button')[];
var oDia = document.getElementsByTagName('dialog')[];
oBtn.onclick = function(){
console.log(oDia.getAttribute('open'))
if(!oDia.getAttribute('open')){
oDia.setAttribute('open','open');
this.innerHTML ='隐藏文本框';
}else{
oDia.removeAttribute('open');
this.innerHTML = '显示文本框';
}
}
</script>

三个不常用的HTML元素:<details>、<summary>、<dialog>的更多相关文章

  1. Java程序员的现代RPC指南(Windows版预编译好的Protoc支持C++,Java,Python三种最常用的语言,Thrift则支持几乎主流的各种语言)

    Java程序员的现代RPC指南 1.前言 1.1 RPC框架简介 最早接触RPC还是初学Java时,直接用Socket API传东西好麻烦.于是发现了JDK直接支持的RMI,然后就用得不亦乐乎,各种大 ...

  2. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

  3. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  4. Jmeter Web 性能测试入门 (三):Jmeter 常用组件说明

    线程组:用来设置并发的数量和模式.是用来模拟用户并发的组件.JMeter 的每个任务都是用线程来处理的. 线程数:要并发的请求数量. Ramp-Up Period: 在多次时间内把这些并发的请求发送完 ...

  5. Linux学习笔记 一 第三章 Linux常用命令

    第三章Linux常用命令 一.文件处理命令 1.命令格式 2.目录处理命令:ls 3.目录处理命令:mkdir 4.文件处理命令: touch

  6. H5系列之常用的语义元素

    H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...

  7. html5-新增表单的小结details summary

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. bootstrap4 Reboot details summary 美化(点选禁止选中文本,单行隐藏角标,多行后移)

    bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML <details> & ...

  9. h5交互元素details标签

    details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...

随机推荐

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. .NET跨平台之旅:将示例站点升级至 ASP.NET Core 1.1

    微软今天在 Connect(); // 2016 上发布了 .NET Core 1.1 ,ASP.NET Core 1.1 以及 Entity Framework Core 1.1.紧跟这次发布,我们 ...

  3. AutoMapper

    什么是AutoMapper? AutoMapper是一个对象和对象间的映射器.对象与对象的映射是通过转变一种类型的输入对象为一种不同类型的输出对象工作的.让AutoMapper有意思的地方在于它提供了 ...

  4. 【.net 深呼吸】程序集的热更新

    当一个程序集被加载使用的时候,出于数据的完整性和安全性考虑,程序集文件(在99.9998%的情况下是.dll文件)会被锁定,如果此时你想更新程序集(实际上是替换dll文件),是不可以操作的,这时你得把 ...

  5. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  6. python与c互相调用

    虽然python开发效率很高,但作为脚本语言,其性能不高,所以为了兼顾开发效率和性能,通常把性能要求高的模块用c或c++来实现或者在c或c++中运行python脚本来处理逻辑,前者通常是python中 ...

  7. SDWebImage源码解读 之 UIImage+GIF

    第二篇 前言 本篇是和GIF相关的一个UIImage的分类.主要提供了三个方法: + (UIImage *)sd_animatedGIFNamed:(NSString *)name ----- 根据名 ...

  8. 开源免费且稳定实用的.NET PDF打印组件itextSharp(.NET组件介绍之八)

    在这个.NET组件的介绍系列中,受到了很多园友的支持,一些园友(如:数据之巅. [秦时明月]等等这些大神 )也给我提出了对应的建议,我正在努力去改正,有不足之处还望大家多多包涵.在传播一些简单的知识的 ...

  9. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

  10. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...