隨著2021年的來臨，我們的網站設計也變得越來越重要，展現更好的用戶體驗和交互。其中一個經典的Web元素是點擊展開/收起剩余部分功能，它可以避免頁面太長和節約用戶時間。

HTML中，展開剩余部分最常用的標簽是div和span標簽，我們可以通過設置這些標簽的display屬性來控制它們的可見性。但是，這種方法存在以下問題：

<div id="more-text" style="display:none">
<p>隱藏的內容...</p>
</div>
<a href="#" onclick="document.getElementById('more-text').style.display='block'">展開>>></a>

1.展開/收起部分僅能通過JavaScript完成

2.該方法不能完美地適應不同的頁面布局

3.調整顯示/隱藏內容時，整個頁面需要重新加載，影響性能。

為了解決這些問題，HTML5中提供了新的標簽——details和summary。這是一對元素，details標簽用于包含展開和收起塊的主體，而summary標簽用于準確地描述展開塊的內容。

<details>
<summary>展開</summary>
<p>隱藏的內容...</p>
</details>

使用上述代碼，我們只需要像通常一樣編寫HTML，瀏覽器會自動在summary下面添加一個“+”或“-”圖標，并在點擊時展開或收起主體部分。

總之，使用details和summary標簽，可以大大簡化我們的代碼，增強性能和交互性，提高用戶體驗。