您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-10 5729人已围观

简介 之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局，最近在研究DEDECMS的默认模板时，也发现该模板在大量的地方使用<dl></dl>标签对来完成页面的布局，比如模板首页的栏目循环以及侧边栏的栏目都是用<dl></dl>标签对来实


之前就见过很多网站在侧边栏上使用
标签对来完成侧边栏栏目的布局，最近在研究DEDECMS的默认模板时，也发现该模板在大量的地方使用
标签对来完成页面的布局，比如模板首页的栏目循环以及侧边栏的栏目都是用
标签对来实现的。而在研究全球使用数最多的博客程序Wordpress时，发现它的侧边栏却是使用的是最常见的
    列表来实现的。
    同样的布局
    与
      都可以实现，并且就最终的表现来看并不存在区别，那么这两者之间到底有什么区别呢？或者说使用哪一个来完成布局才更为合理呢？
        与
          是最常见两种列表表现形式，这两种列表最本质上的区别就是
            指的是无序列表而
              指的是有序列表。最常见的两种不同表现是：平常所见的新闻标题列表基本上都是由
                来完成布局的，而很多网站的侧边栏上会有一些新闻点击数排行榜之类的列表，这个时候就需要使用到有序列表
                  ，因为可以很容易的通过
                    标注出排行顺序来。

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



                    • 栏目标题一



                      • 新闻标题一

                        • …
                      • 新闻标题N



                      • …

                    • 栏目标题N



                      • 新闻标题一

                        • …
                      • 新闻标题N





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

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

                        标签来显示栏目标题，

                        标签应该是用在日志标题上的）。
                        很多使用
                        来布局的网站的结构代码如下：



                        栏目标题一



                        • 新闻标题一

                          • …
                        • 新闻标题N



                        …
                        栏目标题N



                        • 新闻标题一

                          • …
                        • 新闻标题N





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

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



                        标题一

                        内容一

                        …
                        内容N

                        …
                        标题N

                        内容一

                        …
                        内容N



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


                        我的照片

                        作者：摄氏度

                        相机：佳能400D

                        我的博客

                        作者：摄氏度

                        程序：wordpress


                        于是我们可以理解为：
                        标签结构更多的是表现一种描述性的列表，它本身并不具备做为列表显示的意义。当
                        与
                          或是
                            标签结构组合起来使用时，才能更好的表现出描述列表的作用。
                            之前的那个被指为不符合标签语义的试验《使用UL进行宽度固定的多行多列布局》，现在换成
                            标签来做是否就适合标签语义化了呢？

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

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

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网