DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> XHTML教程:dl,dt,dd定義列表類的標簽
XHTML教程:dl,dt,dd定義列表類的標簽
編輯:HTML和Xhtml     

我們在做列表的時候通常只會用到ul和li標簽,至於dl,dt,dd一般都很少用到,這三個標簽就是屬於定義列表類的標簽,下面園子給大家說一下大概的用法。先來分解一下這個列表的代碼:
1
2
3
4
<dl><!–Definition List (定義列表)–>
 <dt></dt><!–Definition Term (定義項)–>
 <dd></dd><!–Definition Description (定義描述)–>
</dl>

看上面這段代碼我們發現這裡並沒有出現<li>標簽,而是由DL、DT、DD三個標簽組成,根據外型以及之前的列表我們可以知道,DL是這個列表的一個容器,就像個箱子,不同的是這次箱子裡不只有統一標准的單個小盒子了。而是出現兩個不同的內容我們怎麼理解這個DT與DD呢?從語義上來講,DT是名稱,是標題,而DD是解釋,是內容。DT與DD都是盒子,DD只對應解釋他上面的一個DT,不能越級或是向下解釋。當DT不存在的時候那麼DD也就沒有存在的意義,而DT是否一定需要DD跟隨其後,這點上我還沒有找到確切的文獻可以說明這一點,但是以我對於定義列表的理解,我認為如果數據中只有DT沒有DD那麼這就一不能成為定義列表,直接用UL無序列表就可以了。但是當數據中只有某一個或是少數幾個沒有DD,而大部分都有DD,那麼園子認為這種形式是可以存在的。

再看個例子:

1
2
3
4
5
6
<dl>
 <dt>有序列表</dt>
 <dt>有序列表</dt>
 <dt>有序列表</dt>
 <dt>有序列表</dt>
</dl>

以上這種很明顯就不合適了,這樣的形式就是無序列表,何必要用定義列表呢,從語義上也說不通。

一個DT可以帶多個DD嗎?例:

1
2
3
4
5
6
7
8
<dl>
 <dt>國內電視台</dt>
 <dd>中央一套</dd>
 <dd>中央二套</dd>
 <dd>中央三套</dd>
 <dt>國外電視台</dt>
 <dd>美國在線</dd>
</dl>

上面這種形式則我個人認為是可行的。關於一個DT是否可以帶多個DD的問題,這點上我同樣沒有找到文獻說明不可以,並且在一些知名的網站中這種一個DT帶多個DD的依然很多。我對此的看法是,物殊情況下一個DT帶多個DD是可以的,但是一般情況上我認為這種做法還是有所欠缺。從解釋上來看,多個DD是否表明著多個解釋?或是解釋內容要分段也不需要讓DD來當這只抓耗子的狗。一個DD中完全可以內嵌很多個段落標簽。再則從樣式應用上來講,多個DD整體松散,其設計的擴展性不足。比如,當我們要做一個點擊DT隱藏對應的DD的效果時,這種多DD的做法就不那麼好實現了。所以在不是特殊用途情況下盡可能不要使用一個DT帶多個DD的做法,還是把內容放在DD裡,分段的就讓段落標簽去做,分列表的就讓有序或是無序列表去表現。您的意見呢?

最後給一個比較好的例子供大家參考:

1
2
3
4
5
6
7
8
<dl>
<dt >《千與千尋》</dt>
<dd>劇情說的是10歲的少女千尋與父母一起從都市搬家到了鄉下。沒想到在搬家的途中,一家人
發生了意外。他們進入了湯屋老板魔女控制的奇特世界——在那裡不勞動的人將會被變成動物。</dd>
<dt>《龍貓》</dt>
<dd>和爸爸一起搬到鄉下的兩姐妹,在家旁的一棵大樹下發現了只有好孩子才能看見的TOTORO。
其間發生了很多不可思議而有趣的故事。</dd>
</dl>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved