您如何使用＆lt;詳細信息＆gt; 和＆lt;摘要＆gt; 創建可折疊部分的元素？-html教學-PHP中文網

您如何使用和
元素來創建可折疊部分？

要在網頁上創建可折疊部分，您可以使用HTML5 <details></details>和<summary></summary>元素。 <details></details>元素表示用戶可以與之交互以獲取其他信息或控件的小部件。 <summary></summary>元素必須是<details></details>元素的直接子，為<details></details>元素指定摘要或標籤。

這是如何使用這些元素的基本示例：

 <code class="html"><details> <summary>Click to expand</summary> <p>This is the content that will be shown when the user expands the section.</p> </details></code>

登入後複製

在此示例中：

<details></details>元素創建可折疊的小部件。
<summary></summary>元素為小部件提供了標籤。單擊此標籤將切換<details></details>元素中內容的可見性。
當用戶與小部件交互時， <details></details>元素內的內容（ <summary></summary>元素）是隱藏或顯示的。

您可以將任何HTML內容放置在<details></details>元素中，從而在網頁上允許靈活且豐富的可折疊部分。

使用和
以獲得用戶體驗有什麼好處？

使用<details></details>和<summary></summary>元素可以通過多種方式顯著增強用戶體驗：

降低認知負載：通過允許用戶根據需要擴展和折疊內容，這些元素有助於管理信息超負荷。用戶可以專注於立即相關的內容，並以自己的節奏探索其他細節。
提高可訪問性：這些元素內置在HTML5中，並被屏幕讀取器和其他輔助技術所認可。 <details></details>元素上的open屬性也可以用於設置小部件的初始狀態，這可能對可訪問性有益。
更好的內容組織：可折疊部分有助於更有效地組織內容，從而使用戶更容易通過大量信息導航。這對於常見問題解答，文檔和其他內容豐富的頁面特別有用。
用戶控制：用戶可以控制自己看到的內容以及何時看到它，這可能會帶來更個性化和引人入勝的體驗。他們可以快速隱藏或顯示信息，而無需滾動瀏覽無關的內容。
無需JavaScript ：這些元素是HTML5的原生，這意味著您可以在不依賴JavaScript的情況下實現交互式內容，從而可以改善頁面加載時間並簡化開發。

和
是否可以使用CSS進行樣式，如果是，如何？

是的， <details></details>和<summary></summary>元素可以使用CSS進行樣式，從而可以高度自定義以匹配您的網站的設計。這是您可以設計這些元素的方式：

造型<details></details>元素：您可以使用CSS更改整個可折疊部分的外觀。例如，您可以設置邊框，背景顏色和填充：

 <code class="css">details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; } details[open] { padding: .5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em; }</code>

登入後複製

造型<summary></summary>元素：您可以修改摘要標籤的外觀。例如，您可以更改顏色，字體並添加圖標：

 <code class="css">summary { font-weight: bold; color: #333; } summary::marker { /* Hide default marker */ content: ""; } summary::before { /* Add custom marker */ content: "▶ "; font-size: .8em; } details[open] summary::before { content: "▼ "; }</code>

登入後複製

自定義標記::marker偽元素可用於樣式默認標記（通常是三角形），但瀏覽器支持受到限制。使用::before和::after偽元素可能是添加自定義標記的更一致的方法。
懸停和焦點狀態：您還可以為懸停狀態設計樣式，以改善用戶互動：

 <code class="css">summary:hover, summary:focus { color: #000; cursor: pointer; }</code>

登入後複製

請記住，儘管您可以設計這些元素，但一些瀏覽器可能具有默認樣式，您需要使用自定義CSS覆蓋這些樣式。

使用和
時，是否有瀏覽器兼容性問題需要考慮？

<details></details>和<summary></summary>是HTML5標準的一部分，但仍有一些瀏覽器兼容性問題要考慮：

較舊的瀏覽器：這些元素在Internet Explorer或其他瀏覽器的舊版本中不支持。如果您需要支持這些瀏覽器，則可能需要使用多填充或替代解決方案。
樣式：一些樣式功能，例如::marker偽元素，具有有限的瀏覽器支持。您可能需要使用替代方法，例如::before和::after ，以實現跨瀏覽器的一致樣式。
默認行為：某些瀏覽器可能針對這些元素具有不同的默認樣式和行為。例如，Safari不允許使用display: block進行<summary></summary> 。您可能需要使用CSS將這些差異歸一化。
JavaScript交互：如果您打算用JavaScript增強這些元素，請確保您的腳本與不同的瀏覽器處理這些元素的方式兼容。