html5中details標(biāo)簽的作用是什么

發(fā)布時(shí)間：2020-10-15 19:01:41 來源：億速云閱讀：294 作者：小新欄目：web開發(fā)

小編給大家分享一下html5中details標(biāo)簽的作用是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html5 <details>標(biāo)簽的定義及使用說明：

HTML5 中新增的<details>標(biāo)簽允許用戶創(chuàng)建一個(gè)可展開折疊的元件，讓一段文字或標(biāo)題包含一些隱藏的信息。

<details> 標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。

<details> 標(biāo)簽規(guī)定了用戶可見的或者隱藏的需求的補(bǔ)充細(xì)節(jié)。

<details> 標(biāo)簽用來供用戶開啟關(guān)閉的交互式控件。任何形式的內(nèi)容都能被放在 <details> 標(biāo)簽里邊。

<details> 元素的內(nèi)容對(duì)用戶是不可見的，除非設(shè)置了 open 屬性。

html5 <details>標(biāo)簽的使用方法：

一般情況下，details用來對(duì)顯示在頁面的內(nèi)容做進(jìn)一步驟解釋。其展現(xiàn)出來的效果和jQuery手風(fēng)琴插件差不多。

其大致寫法如下：

<details>
<summary>Google Nexus 6</summary>
<p>商品詳情：</p>
<dl>
<dt>屏幕</dt>
<dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
<dt>電池</dt>
<dd>3220 mAh</dd>
<dt>相機(jī)</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>處理器</dt>
<dd>Qualcomm? Snapdragon? 805 processor</dd>
</dl>
</details>

首先是<details>標(biāo)簽，里面接著是標(biāo)題<summary>，這里面的內(nèi)容一般簡(jiǎn)短，具有總結(jié)性，會(huì)展示在頁面。接著可以跟任意類型的HTML元素作為詳情內(nèi)容，這些內(nèi)容需要在點(diǎn)擊<summary>才會(huì)呈現(xiàn)。

details是h6新增的交互元素，details與 summary 標(biāo)簽配合使用可以為 details 定義標(biāo)題。默認(rèn)情況下，不顯示 details 標(biāo)記中的內(nèi)容。當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details。

details標(biāo)簽的出現(xiàn)，為我們帶來了更好的用戶體驗(yàn)，不必為這種收縮展開的效果再編寫JS來實(shí)現(xiàn)。

details有一個(gè)新增加的子標(biāo)簽——summary，當(dāng)鼠標(biāo)點(diǎn)擊summary標(biāo)簽中的內(nèi)容文字時(shí)，details標(biāo)簽中的其他所有元素將會(huì)展開或收縮。

html5 detalis標(biāo)簽實(shí)例1：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一練之details標(biāo)簽的應(yīng)用</title> 
    </head>     
    <body> 
        <details> 
                <summary>HTML5|CSS3|PHP | 億速云(php.cn)!</summary> 
                <p>億速云,WEB前端開發(fā)論壇,教程資源完全免費(fèi)PHP網(wǎng)站，打造最好的編程網(wǎng)站</p> 
        </detalis> 
    </body> 
</html>

如果details中不存在summary標(biāo)簽會(huì)怎樣呢，其實(shí)當(dāng)details元素內(nèi)沒有summary標(biāo)簽的時(shí)候，瀏覽器在解析的時(shí)候會(huì)提供一個(gè)默認(rèn)的文字，比如“查看詳細(xì)”諸如此類的本地化文字，瀏覽器同樣再會(huì)提供一個(gè)諸如上下箭頭之類的圖標(biāo)。比如下面的案例2就是一個(gè)不存在summary子標(biāo)簽的例子：

實(shí)例2：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一練之details展開收縮標(biāo)簽的應(yīng)用</title> 
    </head> 
    <body> 
        <details> 
                <p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發(fā)論壇,教程資源完全免費(fèi)的CSS論壇，打造最好的HTML5/CSS3論壇</p> 
        </details> 
    </body> 
</html>

有的時(shí)候，我們需要detalis中的內(nèi)容默認(rèn)為展開狀態(tài)怎么辦？

其實(shí)HTML5也已經(jīng)為我們想到了，如果有著方面的需求，我們只需要加入一個(gè)屬性即可，如案例3。

html5 details標(biāo)簽的作用之Open屬性的用法：

將案例1的代碼修改后如下：

實(shí)例3：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>HTML5每日一練之details展開收縮標(biāo)簽的應(yīng)用</title> 
    </head> 
    <body> 
        <details open> 
                <summary>HTML5|CSS3|論壇 | 前端開發(fā)網(wǎng)(W3Cfuns.com)!</summary> 
                <p>HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發(fā)論壇,教程資源完全免費(fèi)的CSS論壇，打造最好的HTML5/CSS3論壇</p> 
        </details> 
    </body> 
</html>

由此可見，HTML5為我們的確帶來了很大方便。

html5 details標(biāo)簽的作用之details標(biāo)簽的常用屬性的用法：

open:值為open，功能是定義details是否可見。

subject:值為sub_id，功能是設(shè)置元素所對(duì)應(yīng)項(xiàng)目的ID號(hào)。

draggable:值為true或false,功能是設(shè)置是否可以拖動(dòng)元素，默認(rèn)值是false。

簡(jiǎn)單的details示例：

html5中details標(biāo)簽的作用是什么

目前只有 Chrome 和 Safari 6 支持 <details> 標(biāo)簽。

以上是html5中details標(biāo)簽的作用是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

html5中details標(biāo)簽的作用是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽