HTML5 details 標簽創(chuàng)建一個可展開的詳細信息部分，其中用戶可點擊標題以顯示或隱藏附加信息。這適用于顯示非必要或輔助性內(nèi)容，例如長文或技術(shù)細節(jié)。主要特性包括：1. 可點擊標題；2. 可展開的內(nèi)容；3. 交互行為（單擊標題展開/隱藏）。該標簽得到 Chrome、Firefox、Safari 和 Edge 等現(xiàn)代瀏覽器的廣泛支持。

HTML5 details 標簽的基礎(chǔ)知識

HTML5 details 標簽用于創(chuàng)建一個可展開的詳細信息部分，讓用戶可以點擊查看或隱藏附加信息。這對于顯示非必要或輔助性內(nèi)容非常有用，例如長文或技術(shù)細節(jié)。

語法

<details>
  <summary>可點擊的標題</summary>
  <p>可展開的內(nèi)容</p>
</details>

屬性

• open：布爾值，表示詳細信息是否默認展開。
• onToggle：當詳細信息被展開或隱藏時觸發(fā)的事件處理程序。

特性

• 可點擊標題：通過其 summary 元素，可以創(chuàng)建可點擊的標題以展開或隱藏詳細信息。
• 可展開的內(nèi)容：任何 HTML 元素都可以放置在 details 元素內(nèi)，以在展開時顯示。內(nèi)容通常以段落、列表或其他格式出現(xiàn)。
• 交互行為：單擊標題會展開或隱藏詳細信息。如果 open 屬性設(shè)置為 true，則詳細信息默認展開。

用法

HTML5 details 標簽通常用于以下情況：

• 顯示額外信息，如技術(shù)文檔或常見問題解答。
• 創(chuàng)建可折疊的部分，例如導(dǎo)航菜單或邊欄。
• 提供交互式內(nèi)容，如交互式教程或測驗。

瀏覽器支持

details 標簽得到所有現(xiàn)代瀏覽器的廣泛支持，包括 Chrome、Firefox、Safari 和 Edge。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

示例

以下是一個示例，創(chuàng)建一個默認展開的詳細信息部分：

<details open>
  <summary>動物王國</summary>
  <p>動物王國充滿著各種各樣的生物，從微小的昆蟲到龐大的鯨魚。</p>
</details>

以上就是HTML5 details標簽的基礎(chǔ)知識的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！