数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中指定详细信息对用户可见？
本文将介绍如何在 HTML 中指定详细信息对用户可见。
用户可以使用 `` 标签打开和关闭更多详细信息，该标签指定了详细信息。创建用户可以使用 `` 标签打开和关闭的交互式窗口小部件。窗口小部件默认处于关闭状态。当您打开它时，它会展开，显示内容。details 标签是任何类型内容的容器。
语法
以下是 `` 标签的语法
<details> <summary> Text content </summary> <div> Content . . . </div> </details>
让我们深入研究以下示例，以更深入地了解如何在 HTML 中指定详细信息对用户可见。
示例 1
在以下示例中，我们使用 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>
执行上述脚本后，它将生成一个包含交互式窗口小部件的输出，该窗口小部件允许用户打开或隐藏文本。
通过点击交互式窗口小部件，其内部的文本将显示给用户，并在需要时可以关闭它。
示例 2
考虑以下示例，其中我们使用 CSS 来设置 `` 和 `` 的样式。
<!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>
当脚本执行时，它将生成一个输出，显示脚本中使用的 `
标签。
更新于: 2022-12-15
183 次查看
广告