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

發(fā)布時間：2024-11-03 12:39:54 作者：佚名

我要評論

本文介紹了HTML中的details標簽，包括其在實例中的應(yīng)用，瀏覽器的支持情況，定義與用法,此標簽在HTML5中新增，用于描述文檔或文檔部分的細節(jié),默認情況下，詳情是隱藏的，用戶點擊標題才能展開查看,

定義和用法

<details> 標簽規(guī)定用戶可以根據(jù)需要打開和關(guān)閉的其他詳細信息。

<details> 標簽通常用于創(chuàng)建用戶可以打開和關(guān)閉的交互式小部件。默認情況下，小部件是關(guān)閉的。打開時，它會展開并顯示其中的內(nèi)容。

任何類型的內(nèi)容都可以放在 <details> 標簽中。

提示：<summary> 標簽與 <details> 結(jié)合使用，可為詳細信息指定可見的標題。用戶點擊標題時，會顯示出 <details> 定義的內(nèi)容。

另請參閱：

HTML DOM 參考手冊：Details 對象

瀏覽器支持

表中的數(shù)字注明了首個完全支持該元素的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
12.0	79.0	49.0	6.0	15.0

默認的 CSS 設(shè)置

大多數(shù)瀏覽器將使用以下默認值顯示 <details> 元素：

details {
  display: block;
}

屬性

屬性	值	描述
open	open	規(guī)定詳細信息應(yīng)該對用戶可見（打開）。

實例

例子 1

定義用戶可以按需打開和關(guān)閉的詳細信息：

<details>
  <summary>腳本之家介紹</summary>
  <p>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料。</p>
</details>

效果

腳本之家介紹

腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料。

例子 2

使用 CSS 設(shè)置 <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>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料。</p>
</details>
</body>
</html>