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

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

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

 <summary>标签的定义

<summary> 标签为 <details> 元素定义一个可见的标题,当用户点击该标题时会展开并显示出更多详细信息。

 <summary>标签必须包含在<details>和</details>之间;

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

浏览器支持情况

<summary>标签目前只有Chrome 和 Safari 6支持 。

<summary>标签的用法

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

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

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

未标题-1.gif

<summary>标签定义的标题是可见的,在默认情况下,不会显示<details>标签定义的其他内容,只有当用户点击标题后,才会显示除更多详细信息。



欢迎您发表评论或留言