【HTML教程】HTML的summary標簽|html入門知識
時間: 2025-03-25 22:26:24 瀏覽次數：28
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了：【定義和用法】summary標簽為 details元素 定義了一個可見的標
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了：
【定義和用法】
summary標簽為 details元素 定義了一個可見的標題。點擊標題可以查看/隱藏詳細信息。
注意：summary元素應該是 details元素 的第一個子元素。
【實例】
例子 1
使用 summary元素：
<details> <summary>龍騰飛網絡科技</summary> <p>龍騰飛網絡科技致力于建立企業發展無縫對接的服務體系！</p></details>
例子 2
使用 CSS 設置 details和 summary的樣式：
<html><style>details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;}details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;}</style><body>
<details>
<summary>龍騰飛網絡科技</summary>
<p>龍騰飛網絡科技致力于建立企業發展無縫對接的服務體系！</p></details>
</body></html>【默認的 CSS 設置】
大多數瀏覽器將使用以下默認值顯示 summary元素：
summary {
display: block;}