之前就見過很多網站在側邊欄上使用<dl />標簽對來完成側邊欄欄目的布局,最近在研究DEDECMS的默認模板時,也發現該模板在大量的地方使用<dl></dl>標簽對來完成頁面的布局,比如模板首頁的欄目循環以及側邊欄的欄目都是用<dl></dl>標簽對來實現的。而在研究全球使用數最多的博客程序Wordpress時,發現它的側邊欄卻是使用的是最常見的<ul></ul>列表來實現的。
同樣的布局<dl />與<ul />都可以實現,并且就最終的表現來看并不存在區別,那么這兩者之間到底有什么區別呢?或者說使用哪一個來完成布局才更為合理呢?
<ul />與<ol />是最常見兩種列表表現形式,這兩種列表最本質上的區別就是<ul />指的是無序列表而<ol />指的是有序列表。最常見的兩種不同表現是:平常所見的新聞標題列表基本上都是由<ul />來完成布局的,而很多網站的側邊欄上會有一些新聞點擊數排行榜之類的列表,這個時候就需要使用到有序列表<ol />,因為可以很容易的通過<ol />標注出排行順序來。
回過頭來我們看Wordpress側邊欄的結構代碼:
<div id=”sidebar”>
<ul>
<li><h2>欄目標題一</h2>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題N</li>
</ul>
</li>
…
<li><h2>欄目標題N</h2>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題N</li>
</ul>
</li>
</ul>
</div>
很顯然,這是一個<ul />嵌套<ul/>的結構,通過<h2 />去顯示欄目標題(補充一點:對于博客來說,就頁面中的內容重要程度而言,這里并不適合使用<h2 />標簽來顯示欄目標題,<h2 />標簽應該是用在日志標題上的)。
很多使用<dl />來布局的網站的結構代碼如下:
<div id=”sidebar”>
<dl>
<dt>欄目標題一</dt>
<dd>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題N</li>
</ul>
</dd>
…
<dt>欄目標題N</dt>
<dd>
<ul>
<li>新聞標題一</li>
…
<li>新聞標題N</li>
</ul>
</dd>
</dl>
</div>
這是一個復雜表現上的定義列表,與上一個結構代碼的最大的區別是使用<dt />來替代<h2 />標簽。簡單意義上的定義列表結構如下:
<div id=”sidebar”>
<dl>
<dt>標題一</dt>
新聞熱點
疑難解答