图文详解HTML中有序列表、无序列表和自定义列表的区别

yulia
发布: 2018-10-15 17:23:54
原创
23123人浏览过

在页面布局时,经常会用到列表,列表分为有序列表、无序列表和自定义列表,那你知道有序列表、无序列表和自定义列表之间的区别吗?这篇文章就给大家介绍有序列表、无序列表和自定义列表分别用什么标签,以及三者之间的区别,有一定的参考价值,感兴趣的朋友可以看看。

一、无序列表

    标签用来定义无序列表,将
      标签与
    • 标签一起使用,就可以创建无序列表。

      举例:用无序列表列举四大名著,代码如下:

      <ul>
         <li>红楼梦</li>
         <li>水浒传</li>
         <li>三国演义</li>
         <li>西游记</li>
      </ul>
      登录后复制

      效果图:

      立即学习前端免费学习笔记(深入)”;

      图片1.jpg

      无序列表属性type,默认的样式是小黑圆,就是disc,type属性有disc(实心圆默认)、circle(空心圆)、square(实心正方形)、none(取消前缀)。

       二、有序列表

        标签可以定义有序列表,将
          标签与
        1. 标签一起使用,就可以创建有序列表,列表排序以数字来显示。

          示范代码如下:

          <ol>
             <li>红楼梦</li>
             <li>水浒传</li>
             <li>三国演义</li>
             <li>西游记</li>
          </ol>
          登录后复制

          效果图:

          立即学习前端免费学习笔记(深入)”;

          图片2.jpg

          有序列表有两个属性,分别是type和start。 type有五个属性值:1、a、A、i、I(罗马数字),用来表示列表前缀的样式。start表示从type类型的第几个数字开始,比如当type=“a”,start=“4”,指选择的是小写字母类型,从第四个字母d开始列举。

          三、自定义列表

          标签可以定义描述列表,
          标签与
          一起使用,创建自定义列表(描述列表)。

          示范代码如下:

          <dl>
               <dt>中国四大名著</dt>
                 <dd>红楼梦</dd>
                <dd>西游记</dd>
                 <dd>水浒传</dd>
                 <dd>三国演义</dd>
          </dl>
          登录后复制

          效果图:

          立即学习前端免费学习笔记(深入)”;

          图片3.jpg

          自定义列表(描述列表)中,在dt和dd中有了一个缩进。

          有序列表、无序列表和自定义列表的区别:

          有序列表和无序列表都有前缀,但是有序列表是大写字母、小写字母、数字和罗马数字等,而无序列表的前缀是实心圆、空心圆、实心正方形。自定义列表与有序列表,无序列表的区别是它有缩进而没有前缀。

          【相关教程推荐】

          1. CSS3视频教程
          2. CSS在线手册
          3. bootstrap教程

以上就是图文详解HTML中有序列表、无序列表和自定义列表的区别的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号