从我注意WEB2.0开始,用更多HTML标签来布局格式时,我认识的第一个标签就是DL。很多朋友应该和我一样,如果将她做为一排两列来布局那么他是一个非常合适的标签,直到关注语义我才对他做个全新认识。(发现这一段有点拗口 😥 )

利用DL表达图文说明

<dl>
 <dt><a href="/guide/beijing/" target='_blank'><img src="/uppic/cityimages/53/x_200971317542346978.jpg" width="120" height="90" /></a></dt>
 <dd>  北京是中华人民共和国的首都,也是中国中央四个直辖市之一,是全国政治、文化中心。北京是中国陆空交通的总枢纽,也是最重要的国内国际交往中心。<br/>  今天的北京,是一座现代化的国际大都市。2008年,北京已经成功举办...
 <p style="height:22px; overflow:hidden;">推荐景点:<a href="/guide/beijing/2981/" target='_blank'>故宫博物院</a>&nbsp;&nbsp;<a href="/guide/beijing/2997/" target='_blank'>颐和园</a>&nbsp;&nbsp;<a href="/guide/beijing/3492/" target='_blank'>什刹海</a>&nbsp;&nbsp;<a href="/guide/beijing/12986/" target='_blank'>北京欢乐谷</a>&nbsp;&nbsp;</p>
 </dd>
 </dl>

以上是摘自住哪网首页的一段代码,也是大家用DL标签时最常用的做法。

什么是定义列表

我的理解是:对某种信息(文本、媒体等等)做详细解释或者描述,并且DT和DD是相互对应,就像这样:

<dl>
 <dt>HTML</dt>
 <dd>HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言</dd>
 <dt>图片</dt>
 <dd>这是一张上海东方明珠全景图</dd>
 </dl>

总结

我原本有很多话要说的,但是总觉得拿一个典型例子和我对定义列表的理解,已经足够说明我的意思。我对比了几个网站下来,我还是很中意淘宝网,哪怕是一排两列还是使用HTML为我们提供本来就是为了布局而设计的标签,对于为了布局而忽略语义是不可取的。