gogogo免费高清视频3,丁香五月缴情在线,99久久99久久久精品齐齐

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

html5 details標(biāo)簽的作用是什么？<details>標(biāo)簽的使用方法介紹(附使用實例)

尋∝夢

發(fā)布： 2018-08-22 13:58:57

原創(chuàng)

10059人瀏覽過

html5 details標(biāo)簽的作用以及

標(biāo)簽的使用方法都有哪些？詳細(xì)的內(nèi)容就讓我們看看本篇文章為大家介紹的關(guān)于html details標(biāo)簽的定義和使用說明，還有關(guān)于html5 details標(biāo)簽的具體使用方法

html5

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

HTML5 中新增的

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

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

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

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

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

標(biāo)簽里邊。

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

html5

標(biāo)簽的使用方法：

一般情況下，details用來對顯示在頁面的內(nèi)容做進一步驟解釋。其展現(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>相機</dt>
<dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
<dt>處理器</dt>
<dd>Qualcomm? Snapdragon? 805 processor</dd>
</dl>
</details>

登錄后復(fù)制

首先是

標(biāo)簽，里面接著是標(biāo)題

，這里面的內(nèi)容一般簡短，具有總結(jié)性，會展示在頁面。接著可以跟任意類型的HTML元素作為詳情內(nèi)容，這些內(nèi)容需要在點擊

才會呈現(xiàn)。

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

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

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

html5 detalis標(biāo)簽實例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中文網(wǎng)(php.cn)!</summary> 
                <p>PHP中文網(wǎng),WEB前端開發(fā)論壇,教程資源完全免費PHP網(wǎng)站，打造最好的編程網(wǎng)站</p> 
        </detalis> 
    </body> 
</html>

登錄后復(fù)制

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

實例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ā)論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇</p> 
        </details> 
    </body> 
</html>

登錄后復(fù)制

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

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

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

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

實例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ā)論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇</p> 
        </details> 
    </body> 
</html>

登錄后復(fù)制

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

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

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

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

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

簡單的details示例：