首页 » 编程语言 » html » 正文

HTML5元素details标签的使用方法及作用

HTML5元素details标签的使用方法及作用详解如下:

<details>标签的定义

<details> 标签用来定义用户可见的或者隐藏的相关信息;

<details> 标签用来供用户开启关闭的交互式控件,任何形式的内容都能被放在<details>标签里边;

<details> 标签的内容对用户是不可见的,除非设置了open属性;

<details>标签是HTML5中的新标签

浏览器支持情况

 <details>标签目前只被Chrome和Safari 6支持 。

<details>标签的用法

<details>标签经常配合<summary>标签一起使用,且<summary>标签要放在<details>标签的第一个子标签位置,二者经常同时出现在页面中。

<details>
<summary>刘代码博客简介</summary>
<p>刘代码博客建于2019年,是一个分享和学习HTML、CSS、php、js等众多网络程序语言的网站</p>
</details>

以上代码在Chrome 和 Safari 6浏览器中显示效果如下:

未标题-1.gif

在默认情况下,<summary>标签定义的标题是可见的,而<details>标签定义的其他内容是不可见的,是需要当用户点击<summary>标签定义的标题后,才会显示除不可见的<details>元素的详细内容。

如果想要<details>标签的内容对用户是可见的,就需要设置open属性;

<details open="open">
<summary>刘代码博客简介</summary>
<p>刘代码博客建于2019年,是一个分享和学习HTML、CSS、php、js等众多网络程序语言的网站</p>
</details>

<details>标签设置open属性后,其元素内容就变为可见,当再次点击标题后,就可以隐藏该内容了!

<details>标签的属性

属性描述
openopen规定 details 是否可见。

<details>标签与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details标签定义的详细内容!



欢迎您发表评论或留言