数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在HTML中指定详细信息对用户可见？
本文将介绍如何在HTML中指定详细信息对用户可见。
用户可以使用``标签打开和关闭更多详细信息。创建用户可以使用``标签打开和关闭的交互式小部件。小部件默认处于关闭状态。打开时会展开，显示内容。``标签可以容纳任何类型的內容。
语法
以下是``标签的语法
<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
广告