HTML中DL、UL、OL用哪个比较好?


1.背景介绍

ul,ol,dl标签是CSS网页布局中常用的列表元素。

列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来

2.知识剖析

1.ul标签:无序列表始于 u l 标签。每个列表项始于l i标签,此列项目默认使用粗体圆点(典型的小黑圆圈)进行标记。

    无序列表

    无序列表

    无序列表

    无序列表

    2.ol标签:有序列表始于ol标签,每个列表项始于li标签,列表项目使用数字进行标记。

      有序列表

      有序列表

      有序列表

      有序列表

      3.dl标签:dl标签是定义列表,自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

      自定义列表

      自定义列表项

      自定义列表项

      自定义列表项

      注:以上所有的列表项内部都可以使用段落、换行符、图片、链接以及其他列表等。

      常见问题

      3.如何定义ul,ol,dl的样式?

      4.解决方案

      在样式表中用list-style定义

      disc实心圆,默认值

      circle空心圆

      square实心方块

      decimal阿拉伯数字

      lower-roman小写罗马数字

      upper-roman大写罗马数字

      lower-alpha小写英文字母

      upper-alpha大写英文字母

      注:也可以去掉默认样式,设置list-style:none,然后根据自己需要添加不同的样式,比如添加特殊背景图片,使列表显示不一样的风格。

      5.编码实战

      6.更多讨论

      什么情况下用ul,什么情况下用ol?

      ul经常用来实现轮播的小按钮,下拉菜单的各种要用来排列的列表,多个a标签排列等,实用范围非常广。

      而ol因为它的有序属性,用的范围就比较小了,不是一定要用有序来排列的情况下,一般都是用ul

      7.参考文献

      w3school

      http://www.w3school.com.cn/tags/tag_ul.asp


      最后编辑于
      ©著作权归作者所有,转载或内容合作请联系作者
      【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
      平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

      相关阅读更多精彩内容

      • 一,有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
        kingBirds阅读 4,251评论 0 0
      • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
        前端进阶之旅阅读 16,737评论 32 459
      • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
        hk_kh阅读 4,132评论 0 0
      • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
        米塔塔阅读 8,706评论 1 41
      • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
        鸿鹄飞天阅读 4,012评论 0 0

      友情链接更多精彩内容