我们在本文中要执行的任务是如何在HTML中指定细节对用户可见。
用户可以使用<details>标签打开和关闭更多细节，该标签指定了它们。通过使用<details>标签，创建用户可以打开和关闭的交互式小部件。小部件默认处于关闭状态。当您打开它时，它会展开并显示内容。details标签是任何类型内容的容器。
以下是<details>标签的语法
<details> <summary> Text content </summary> <div> Content . . . </div> </details>
让我们深入以下示例，了解如何在HTML中指定将详细信息显示给用户。
在下面的示例中，我们使用details元素来创建一个交互式小部件。
<!DOCTYPE html>
<html>
<head>
<style>
summary {
font-size:40px;
color:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<details>
<summary>TUTORIALSPOINT</summary>
<p>A computer science portal for eveyone</p>
<div>It is a computer science portal where you
can learn programming.</div>
</details>
</body>
</html>
执行上述脚本后，它将生成一个包含交互式小部件的输出，允许用户打开或隐藏文本。
通过点击交互式小部件，其中的文本将显示给用户，当需要时可以关闭它。
考虑下面的示例，我们使用CSS来样式化<details>和<summary>。
<!DOCTYPE html>
<html>
<head>
<style>
summary {
padding: 4px;
width: 200px;
background-color: #A3E4D7 ;
border: none;
box-shadow: 1px 1px 2px #A569BD ;
cursor: pointer;
}
p {
background-color: #85929E ;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px#A569BD;
}
</style>
</head>
<body>
<details>
<summary>MS DHONI</summary>
<p>Mahendra Singh Dhoni is an Indian former international cricketer
who was captain of the Indian national cricket team in limited-overs
formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p>
</details>
</body>
</html>
当脚本被执行时，它将生成一个输出，显示应用了CSS的脚本中使用的<detail>标签内容。如果用户点击详细框，网页上的</p>标签中提到的内容以及应用的CSS将被显示出来。
