html中details标签的详细介绍

原创 国哥笔记  2019-04-20 20:34  阅读 242 views 次

本篇将介绍的是html中<details>标签的用法,感兴趣的朋友可以一起学习!

在html5版本中新增了很多实用的新标签,今天要介绍的就是其中一个,即<details>标签。

“details”作为英文单词有“细节”的意思,那它在html中作为标签又有什么意思呢?接下来我们一起来看看吧!

一、<details>标签定义及用法

在html中,<details>标签是html5版本新增的标签,是用来描述文档或文档某个部分的细节,目前只有 Chrome 和 Safari 6 浏览器支持该标签;

<details>标签中的内容默认是不可见的,需要设置open属性才可见。

<details>标签通常和<summary>标签一起使用,通过<summary>标签来定义details内容的可见标题,点击标题显示details内容(详情见实例)。

二、<details>标签语法格式

<details open = "open">details内容</details>

说明:details内容可以是任何形式的内容,内容默认不可见,需设置open属性才可见,通常用来实现开启关闭的交互式控件。

三、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中details标签的详细介绍</title>
</head>
<body bgcolor="burlywood">
<details>
<summary>编程的乐趣</summary>
<p>编程的乐趣是一个专注于分享编程相关知识的百家号</p>
</details>
</body>
</html>

运行结果:

details演示

好了,关于html5新增标签<details>的介绍就结束了,希望能帮助大家!

本文地址:https://www.ggbiji.com/html-details-2.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情