HTML5使用details標籤：展開/收縮信息

HTML5 的details 標籤用於展示可折疊信息，讓用戶按需查看詳情。語法為：

，包含

（可點擊標題）和要顯示/隱藏的內容。可以通過open 屬性在頁面加載時控制內容的初始顯示狀態。 details 標籤可使用CSS 進行樣式化。

HTML5 中的details 標籤：顯示和隱藏信息

HTML5 中的details 標籤提供了一種簡單的方法來顯示或隱藏特定信息。它非常適合用於在頁面上創建可折疊的部分，以便用戶可以按需查看詳細信息。

文法

<details> <summary>可点击的标题</summary>隐藏的内容</details>

屬性

• open：指定內容是否在初始加載時顯示。如果值為"open" ，則內容默認顯示；否則，則隱藏。

如何使用

1. 創建一個summary： summary 元素包含一個可點擊的標題，用於展開或折疊內容。
2. 添加要顯示/隱藏的內容：將要顯示或隱藏的內容放在details 標籤內，在summary 元素之後。

示例

<details open> <summary>关于我</summary>我是约翰·史密斯，是一名网页开发者。 </details>

樣式化

details 標籤可以使用CSS 進行樣式化，以定制其外觀和行為。例如：

 <code class="css">details { border: 1px solid #ccc; padding: 10px; margin: 10px; } details summary { cursor: pointer; font-weight: bold; }</code>

瀏覽器支持

details 標籤得到所有現代瀏覽器的支持。

以上是HTML5使用details標籤：展開/收縮信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！