导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 有序列表零八年最新整理的Editplus的剪辑库 »

定义列表

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什么意思,但是这两篇重要的地方就在于要读者加入自己的思考。有序无序单标签很简单,只要知道用法就行,但是关键点我认为不在于知道这个标签长什么样,重点是在于什么样的数据适合使用什么样的列表。什么样的数据是有序的,什么样的数据是无序的?阅读完要思考,这样才能学到东西,知识才能是自己的。

定义列表其形式特别,用法也很特别,相比较无序列表来说用到定义列表的就少很多。也有很多朋友还没有开始使用这个列表,那么下面就来分解一下这个列表的代码:

  1. <dl>
  2.  <dt></dt>
  3.  <dd></dd>
  4. </dl>

看上面这段代码我们发现这里并没有出现<li>标签,而是由DL、DT、DD三个标签组成,根据外型以及之前的列表我们可以知道,DL是这个列表的一个容器,就像个箱子,不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢?从语义上来讲,DT是名称,是标题,而DD是解释,是内容。DT与DD都是盒子,DD只对应解释他上面的一个DT,不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义,而DT是否一定需要DD跟随其后,这点上我还没有找到确切的文献可以说明这一点,但是以我对于定义列表的理解,我认为如果数据中只有DT没有DD那么这就一不能成为定义列表,直接用UL无序列表就可以了。但是当数据中只有某一个或是少数几个没有DD,而大部分都有DD,那么我认为这种形式是可以存在的。

  1. <dl>
  2.  <dt>有序列表</dt>
  3.  <dt>有序列表</dt>
  4.  <dt>有序列表</dt>
  5.  <dt>有序列表</dt>
  6.  </dl>
以上这种很明显就不合适了,这样的形式就是无序列表,何必要用定义列表呢,从语意上也说不通。
  1. <dl>
  2.  <dt>有序列表</dt>
  3.  <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
  4.  <dt>有序列表</dt>
  5.  <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
  6.  <dt>这一句没有解释</dt>
  7.  <dt>有序列表</dt>
  8.  <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd>
  9. </dl>

 上面这种形式则我个人认为是可行的。那么一个DT是否可以带多个DD呢?这点上我同样没有找到文献说明不可以,并且在一些知名的网站中这种一个DT带多个DD的依然很多。我对此的看法是,物殊情况下一个DT带多个DD是可以的,但是一般情况上我认为这种做法还是有所欠缺。从释上来看,多个DD是否表明着多个解释?或是解释内容要分段也不需要让DD来当这只抓耗子的狗。一个DD中完全可以内嵌很多个段落标签。再则从样式应用上来讲,多个DD整体松散,其设计的扩展性不足。比如,当我们要做一个点击DT隐藏对应的DD的效果时,这种多DD的做法就不那么好实现了。所以在不是特殊用途情况下尽可能不要使用一个DT带多个DD的做法,还是把内容放在DD里,分段的就让段落标签去做,分列表的就让有序或是无序列表去表现。

还是开始讲的,标签本身没什么,重点要思考如何应用。下面给一张图大家看一下是否应该使用自定义列表。一起讨论一下。 

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 1.LanEast
  • http://blog.laneast.cn
  • 我一开始也是想到了用有序列表或者无序列表来表示多个定义, 但是, 后来想想又觉得不对, 一个列表本身有一个整体的感觉, 如果用一个列表来表示多个定义的话, 感觉倒更像是一个定义有几个方面的内容, 而不是几个不同的定义了.

    至于那个图...我还以为是广告呢, 汗一个.

    我觉得, 那个"教育"和下面的内容, 就没有定义的关系, 下面只是一个无序列表, 当然, 如果那个东西有排名先后的话, 就是有序列表了. 而"教育", "培训", "招生" 等, 只不过是一个类别的标题, 或者是分类的名称, 感觉用不同的块, 然后在里面用标题, 下面用列表比较合适吧?
  • 2008-8-2 16:03:06 回复该留言
  • quote 4.wxycool
  • 截图的DT是无序,DD是有序~呵呵~

    毅的博客又开张了,赞个~
  • 2008-8-6 12:23:38 回复该留言
  • quote 7.振之
  • http://andymao.com/
  • @hkwharf,你的问题表达得不是很清楚,有序列表有两上标签,一个是UL一个是LI。那么他们都是块级元素,你只是把他们当作是盒子就可以。

    @kuge,DL是最外层的标签,DT是标题,DD是内容。至于有什么关联,请仔细看一下上面的内容。
  • 2008-8-15 14:27:49 回复该留言
  • quote 9.何为
  • http://hewei.org
  • 代码语义化是非常重要的,初学者都是div,只有研究到了一个阶段就会慢慢把代码写出语义化,在我看来,手写代码能很好的提升能力。

    关于有序还有一种就是需要出来1、2、3序号的时候,用ol更好。
  • 2008-8-22 23:04:59 回复该留言
  • quote 19.alice
  • 最后那个图,用dl,dt,dd,语义上是很明显。但是样式怎么写?谁写出来给我瞧瞧
  • 2008-10-22 11:46:49 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接

  • 欢迎资助毅博客
    请直接发邮件给我,不要加我QQ
    maozhenzhi@gmail.com
    maozhenzhi@163.com