HTML5 details標(biāo)簽的基礎(chǔ)知識(shí)

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

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

定義和用法

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

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

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

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

另請(qǐng)參閱：

HTML DOM 參考手冊(cè)：Details 對(duì)象

瀏覽器支持

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

Chrome	Edge	Firefox	Safari	Opera
12.0	79.0	49.0	6.0	15.0

默認(rèn)的 CSS 設(shè)置

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

details {
  display: block;
}

屬性

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

實(shí)例

例子 1

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

<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>