定义和用法
<details>
标签规定用户可以根据需要打开和关闭的其他详细信息。
<details>
标签通常用于创建用户可以打开和关闭的交互式小部件。默认情况下,小部件是关闭的。打开时,它会展开并显示其中的内容。
任何类型的内容都可以放在 <details>
标签中。
提示:<summary> 标签 与 <details>
结合使用,可为详细信息指定可见的标题。用户点击标题时,会显示出 <details>
定义的内容。
另请参阅:
HTML DOM 参考手册:Details 对象
浏览器支持
表中的数字注明了首个完全支持该元素的浏览器版本。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示 <details>
元素:
details { display: block; }
属性
实例
例子 1
定义用户可以按需打开和关闭的详细信息:
<details> <summary>酷瑞百科介绍</summary> <p>酷瑞百科是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p> </details>
效果
酷瑞百科介绍
酷瑞百科是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。
例子 2
使用 CSS 设置 <details> 和 <summary> 的样式:
<html> <style> details > summary { padding: 4px; width: 200px; background-color: #eeeeee; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; } details > p { background-color: #eeeeee; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #bbbbbb; } </style> <body> <details> <summary>酷瑞百科介绍</summary> <p>酷瑞百科是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p> </details> </body> </html>
details与summary标签
一,details标签
用于描述文档或文档某个部分的内容
二,summary标签
与details配合使用,可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
具体的案例可以参考这篇文章:https://www.jb51.net/javascript/3299227n6.htm
到此这篇关于HTML5 details标签的基础知识的文章就介绍到这了,更多相关HTML5 details内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章,希望大家以后多多支持酷瑞百科!