您现在的位置是：网站首页>列表内容

描述性列表UL和DL的表现形式_CSS教程_CSS_网页制作_

2021-09-10 08:12:06 3771人已围观

简介 之前就见过很多网站在侧边栏上使用

标签对来完成侧边栏栏目的布局，最近在研究DEDECMS的默认模板时，也发现该模板在大量的地方使用

标签对来完成页面的布局，比如模板首页的栏目循环以及侧边栏的栏目都是用

标签对来实

之前就见过很多网站在侧边栏上使用

标签对来完成侧边栏栏目的布局，最近在研究DEDECMS的默认模板时，也发现该模板在大量的地方使用

标签对来完成页面的布局，比如模板首页的栏目循环以及侧边栏的栏目都是用

标签对来实现的。而在研究全球使用数最多的博客程序Wordpress时，发现它的侧边栏却是使用的是最常见的

列表来实现的。
同样的布局

与

都可以实现，并且就最终的表现来看并不存在区别，那么这两者之间到底有什么区别呢？或者说使用哪一个来完成布局才更为合理呢？

与
是最常见两种列表表现形式，这两种列表最本质上的区别就是
指的是无序列表而
指的是有序列表。最常见的两种不同表现是：平常所见的新闻标题列表基本上都是由
来完成布局的，而很多网站的侧边栏上会有一些新闻点击数排行榜之类的列表，这个时候就需要使用到有序列表
，因为可以很容易的通过
标注出排行顺序来。

回过头来我们看Wordpress侧边栏的结构代码：










• 栏目标题一

  
  
  
  
  • 新闻标题一
  
  …
  
  • 新闻标题N
  
  
  
  

…


• 栏目标题N

  
  
  
  
  • 新闻标题一
  
  …
  
  • 新闻标题N
  
  
  
  







很显然，这是一个
嵌套
的结构，通过

去显示栏目标题（补充一点：对于博客来说，就页面中的内容重要程度而言，这里并不适合使用

标签来显示栏目标题，

标签应该是用在日志标题上的）。
很多使用

来布局的网站的结构代码如下：










栏目标题一









• 新闻标题一

…

• 新闻标题N







…


栏目标题N









• 新闻标题一

…

• 新闻标题N













这是一个复杂表现上的定义列表，与上一个结构代码的最大的区别是使用

来替代

标签。简单意义上的定义列表结构如下：










标题一




内容一


…


内容N


…


标题N




内容一


…


内容N








这种结构的代码也可以表现出列表的形式，但事实上这种结构并不太适合做为一个列表来使用，这种简单的

更适合做为不同内容段的描述。比如：







我的照片




作者：摄氏度




相机：佳能400D




我的博客




作者：摄氏度




程序：wordpress





于是我们可以理解为：

标签结构更多的是表现一种描述性的列表，它本身并不具备做为列表显示的意义。当

与

或是
标签结构组合起来使用时，才能更好的表现出描述列表的作用。
之前的那个被指为不符合标签语义的试验《使用UL进行宽度固定的多行多列布局》，现在换成

标签来做是否就适合标签语义化了呢？

转载：感谢您对网站平台的认可，以及对我们原创作品以及文章的青睐， 非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处。

上一篇：不要使用的HTML标签(WEB标准网页布局)_CSS布局实例_CSS_网页制作_

下一篇：css教程：网页字体及字体大小的设计_CSS教程_CSS_网页制作_