列表标签的介绍

列表标签的介绍

        使用场景：在网页中按照 行 展示关联性的内容。如新闻列表、排行榜、账单等

        特点；按照行的方式，整齐显示内容

        种类：无序列表、有序列表、自定义列表

    1 无序列表

        使用场景：在网页中表示一组无顺序之分的列表。如新闻列表

        代码：

                    <ul>

                        <li></li>

                        <li></li>

                        <li></li>

                    </ul>

            ul 表示无序列表的整体，用于包裹li标签

            li 表示无序列表的每一项，用于包含每一行的内容

        显示特点：列表的每一项前默认显示圆点标识

        注意：

            1 ul标签只包含li标签

            2 li标签可以包含任意内容

        例题：

    <p>无序列表ul</p>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>香蕉</li>
    </ul>

        效果图：

 

    2 有序列表

        使用场景：在网页中表示一组有顺序之分的列表。如排行榜

        代码：

                    <ol>

                        <li></li>

                        <li></li>

                        <li></li>

                    </ol>

            ol 表示有序列表的整体，用于包裹li标签

            li 表示有序列表的每一项，用于包含每一行的内容

        显示特点：列表的每一项前默认显示序号标识

        注意：

            1 ol标签只包含li标签

            2 li标签可以包含任意内容

        例题：  

    <p>有序列表ol</p>
    <ol>
        <li>张三 100分</li>
        <li>李四 90分</li>
        <li>王五 60分</li>
    </ol>

     效果图：

 

    3 自定义列表

        使用场景：在网页的底部导航栏中通常会使用自定义列表实现

        代码：

                    <dl>

                        <dt></dt>

                        <dd></dd>

                    </dl>

            dl 表示自定义列表的整体，用于包裹dd/dt标签

            dt 表示自定义列表的主题

            dd 表示自定义列表的针对主题的每一项内容

        显示特点：dd前会默认显示缩进效果

        注意：

            1 dl标签只允许包含dd/dt标签

            2 dd/dt标签可以包含任意内容

        例题：

    <p>自定义列表dl</p>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>

     效果图：

---

 以上是作者学习总结，分享所学，共同进步。如若哪处有误，感谢指出！