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

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

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

更新於：2022年12月15日

瀏覽量：183