如果你是一名前端新手，不用擔心，HTML <details> 和 <summary> 元素是一種簡單而有用的工具，可以幫助你創建可展開和收縮(隱藏)的內容區塊，而無需深入的JavaScript知識。這個教學將介紹你如何使用這些元素，包括介紹、用法和範例。
介紹
HTML <details> 元素用於創建一個包裹內容的容器，這個容器可以隨時展開或收縮，用戶可以點擊一個摘要（<summary>）來切換內容的顯示和隱藏。這種功能常用於展示更多細節、FAQ（常見問題解答）部分、或者任何你希望保持初始頁面整潔的地方。
<details> 元素用於包裹要可展開或收縮的內容區塊。
<summary> 元素用於定義展開/收縮控制項的標題。
<details>
<summary>點擊以展開/收縮內容</summary>
<!-- 在這裡放置要隱藏或顯示的內容 -->
<p>這是可以展開或收縮的內容。</p>
</details>範例
以下是一個簡單的範例，演示如何使用 <details> 和 <summary> 元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details 和 Summary 元素範例</title>
</head>
<body>
<h1>關於我們</h1>
<details>
<summary>我們的使命</summary>
<p>我們的使命是提供高品質的產品和服務，滿足客戶的需求。</p>
</details>
<details>
<summary>我們的團隊</summary>
<p>我們的團隊由一群專業的人才組成，擁有多年的經驗。</p>
</details>
<details>
<summary>聯絡我們</summary>
<p>如果您有任何問題或建議，請隨時聯絡我們。</p>
</details>
</body>
</html>
在這個範例中，使用了 <details> 和 <summary> 元素創建了三個可展開/收縮的區塊，分別用來顯示使命、團隊和聯絡信息。
當您點擊每個區塊的標題時，相應的內容將展開或收縮，使用戶可以方便地瀏覽更多信息。這是一個用於提供更多內容的簡單而有用的技巧，可以提高網頁的互動性和可讀性。
發表迴響