資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
廣告