昨天和同事Toepy讨论了几个问题，其中提到了ul和dl这两个东西的用法。今天仔细想了一下他们语义上的细节差别，说一下个人的理解和发现。
当时的题设是这样的：
这样的列表，应该使用什么结构来写？
看上去简单得很，我想一般都会直接使用
[code]
FTP下载
- ...
- ...
- ...
- ...
BT下载
-
...
分段更新包下载
-
...
[/code]
可是当对方问：那用
当时我的大脑用了4分之1根烟的时间（囧），飞快地转了一下：dl？啊，定义项目列表！表达一些从属关系应该特别适用。恩，那么把标题放在dt里，然后把这个标题下所包含的下载地址们放在其后的dd中，这样四个列表块依次写开，从结构上看，每个列表块都摆明了是从属于相应的标题dt中的，意义也很清晰，嘿，看上去好像也不错嘛：
[code]
- FTP下载
- ...
- ...
- ...
- ...
- BT下载
- ...
- ...
- ...
- ...
- 分段更新包下载
- ...
- ...
- ...
[/code]
可是总感觉哪里有点别扭，有点牵强。到底是哪里别扭和牵强呢？
又四分之一根烟的时间……
我们都知道，dl的本意是定义一组“定义列表”，什么是定义列表？首先，他是对事物的定义和解释；其次，他的组织形式是一个列表；连起来，也就是对若干事物的定义和解释所形成的一个列表。例如这样：
[code]
- 低成本
- 这个产品新版本所花费的成本要远远小于旧的版本
- 更易用
- 我们改变了产品设计使它更容易使用
- 适合儿童
- 本产品和孩子同处一室，你也可以安心的离开，因为它不会让孩子受伤
（描述若干特性） From w3.org
[/code]
或者引申为这样：
[code]
- 张三
- 男
- 30岁
- 已婚
- 王二麻子
- 不男不女
- 40岁
- 二婚
（描述若干人物）
[/code]
这样也可以：
[code]
- 主题：上班
- 时间：9点半
- 地点：华星时代广场
- 过程：边干边偷懒
- 结果：啥也没干好
- 主题：吃午饭
- 时间：12点半
- 地点：外婆家
- 过程：胡吃海喝
- 结果：吃多了
（描述若干事情）
[/code]
通过和之前下载地址的ul列表的对比，可以发现一些有意思的细节。
首先，dl列表中的“描述”、“解释”和“补充”意义较ul列表更为明显，dd中的内容对dt而言，可以是dt的一个分支、补充修饰和阐述，dd和dt之间有明显的逻辑联系：dd是从属于dt的，并且一个dt下的多个dd仅从属于这个dt；而li本身很单纯，只是展示和呈现数据列表，它对于hX标题，虽然可以视为hX所代表内容的一部分，但是没有dd的“描述”“解释”等意味，并且li对于hX标题没有严格的逻辑联系和从属关系，li甚至可以不需要标题去对应（例如某导航）。
其次，dd之间虽然是平行关系，但并不是像li那种单纯的“同维度”关系，例如上例中的“时间”，“地点”，“经过”，“结果”等，都是用“不同维度”的关系来描述一个事物；而li之间则是很“纯洁”的并行关系，例如题目中的“下载地址1”“下载地址2”，都是属于“同一维度”，这个维度的可以看做“内容”的维度。
再举更明显一点的例子来说明此处“维度”的含义：
[code]
例1
下载这个文件
- 下载地址1
- 下载地址2
- 下载地址3
[/code]
[code]
例2
- 下载这个文件
- 文件大小
- 更新时间
- 下载地址
[/code]
这下明显了，例1中的li都是属于同一个维度（“下载地址”）的，其他的维度还包括“文件大小”，“更新时间”等。由此可见，同样是描述一个主题，用ul和dl却有着这些很细微的差别。
最后再总结一下我对ul和dl之间语义细节差别的理解：[size=10][b]
1.逻辑关系：dd和dt之间有明显的相对应的逻辑从属关系，而ul中几乎没有这些逻辑关系。
2.语义差别：
(1).dd对dt有比较强烈的“描述”、“解释”和“补充”等多种意味，而li本身是将列表内容单纯的“展示”和“呈现”，li对hX几乎没有意味或仅是很弱的单一意味。
(2).dd之间是多维度的关系，而li之间单维度关系更为适合。[/b][/size]
那么回头再看一下开头的题目，我们可以发现，用dl去设计这个下载列表，除了语义上可以让dd和dt之间形成逻辑联系（让标题和下载列表之间联系的更为紧密）这一个特点外，其它地方并不适合，因为下载地址仅仅是将内容“展示和呈现”，没有“解释”“补充”等含义，也没有其他维度呈现。况且，设计所传达的意义并不是以“描述”、“解释”和“补充”为主。所以，在权衡以上各点之后，还是用hX+ul组合更为恰当。
=================快要结束的分隔线=================
引申话题：
这样的列表，你会用什么结构实现？
期待讨论！[F17]
Comments