如何在 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>

當指令碼執行時,它將生成一個輸出,顯示指令碼中使用的 `` 標籤內容以及應用的 CSS。如果使用者點選詳細資訊框,則網頁上提到的 `

` 標籤中的內容以及應用的 CSS 將顯示。

標籤。

更新於: 2022-12-15

183 次檢視