【html列表】

文章目录

• 前言
• 一、列表分类
• 二、
  • 1.有序列表
  • 2.无序列表
  • 3.定义列表
• 总结

---

前言

记录学习列表的一些知识点

---

一、 列表分类：有序列表 无序列表 定义列表

有序列表：有一定的顺序

         标签：

             ol 划分有序列表的范围

              li 定义项

         属性：

           start="num" 默认从num开始排序

           type：设置列表样式类型

无序列表

         标签：

             ul 划分无序列表的范围

              li 定义项

         属性

            type 设置列表样式类型

                square 实心矩形

                circle 空心圆

                disc 默认值 实心圆

定义列表：

         标签:

           dl 划分定义列表的范围

           dt 定义项

           dd 解释项 解释说明定义项

使用场景

          无序列表用的更多，导航，侧导航和内容结构相似

          有序列表一般用于排序，用的比较少

          定义列表底部导航

二、

1.有序列表

代码如下（示例）：

<ol start="5" type="I">
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <li>lorem4</li>
    </ol>

2. 无序列表

代码如下（示例）：

<ul type="square">
        <li>无序列表1
            <ul>
                <li>lorem1</li>
                <li>lorem2</li>
            </ul>
        </li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

3. 定义列表

代码如下（示例）：

<dl>
        <dt>蔬菜</dt>
        <dd>白菜</dd>
        <dd>黄瓜</dd>
        <dd>西红柿</dd>
     </dl>
     <dl>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>西瓜</dd>
        <dd>荔枝</dd>
     </dl>

---

总结

使用场景

          无序列表用的更多，导航，侧导航和内容结构相似

          有序列表一般用于排序，用的比较少

          定义列表底部导航