列表在我们生活中随处可见，HTML 中也提供了相应元素让我们创造列表，分别是 <ul> （unordered list 无序列表）、 <ol> （ordered list 有序列表）。

无序列表

当我们的排序不分先后时，我们便可以使用无序列表，比如以下的同学名单。

$$demo

<ul> <li>小樱</li> <li>鸣人</li> <li>佐助</li> </ul>

$$

无序列表的默认样式是在列表项前有一个小黑圆点。创建一个无序列表时，需要将 <ul> 作为父元素，并使用 <li> 列表项来包裹项目。

<ul>
    <li>小樱</li>
    <li>鸣人</li>
    <li>佐助</li>
</ul>

有序列表

当我们的列表项目需要区分前后顺序时，我们可以使用有序列表，比如喜欢吃的水果排名。

$$demo

<ol> <li>西瓜</li> <li>香蕉</li> <li>苹果</li> </ol>

$$

有序列表的默认样式是列表项前会有数字排序。使用 <ol> 创建无序列表，同样使用 <li> 来包裹列表项。

<ol>
    <li>喝牛奶</li>
    <li>做瑜伽</li>
    <li>苹果</li>
</ol>

起始计数

设置有序列表的 start 属性能控制列表的起始计数。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/VwrBjLM?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

反转计数

设定有序列表的 reversed 属性可以反转列表的计数。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/PoOBzPd?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

计数值

设置列表项的 value 属性可以设定计数值。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/XWzBKKK?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

嵌套的列表

列表可以相互嵌套，比如以下这个睡前安排。

$$demo

<ol> <li>喝牛奶</li> <li>做瑜伽</li> <li> <span>可选：</span> <ul> <li>看书</li> <li>看电影</li> </ul> </li> </ol>

$$

只需将列表作为列表项即可。

<ol>
    <li>喝牛奶</li>
    <li>做瑜伽</li>
    <li>
        <span>可选：</span>
        <ul>
            <li>看书</li>
            <li>看电影</li>
        </ul>
    </li>
</ol>

练习

1. 用无序列表写出你喜欢的动物。
2. 用有序列表写出你的周末安排。