圆月山庄资源网

描述性列表UL和DL的表现形式
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

之前就见过很多网站在侧边栏上使用<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>
<dd>内容一</dd>
…
<dd>内容N</dd>
…
<dt>标题N</dt>
<dd>内容一</dd>
…
<dd>内容N</dd>
</dl>
</div>

这种结构的代码也可以表现出列表的形式，但事实上这种结构并不太适合做为一个列表来使用，这种简单的<dl />更适合做为不同内容段的描述。比如：

<dl>
<dt>我的照片</dt>
<dd>作者：摄氏度</dd>
<dd>相机：佳能400D</dd>
<dt>我的博客</dt>
<dd>作者：摄氏度</dd>
<dd>程序：wordpress</dd>
</dl>

于是我们可以理解为：<dl />标签结构更多的是表现一种描述性的列表，它本身并不具备做为列表显示的意义。当<dl />与<ul />或是<ol />标签结构组合起来使用时，才能更好的表现出描述列表的作用。
之前的那个被指为不符合标签语义的试验《使用UL进行宽度固定的多行多列布局》，现在换成<dl />标签来做是否就适合标签语义化了呢？
标签：
网页制作,网页,教程,描述,<,/>,使用,标签,/li>
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接