在页面中, 我们经常会有需要列出一系列内容的时候, 这些内容之间彼此是一种并列关系, 比如列出你喜欢的水果: 苹果, 香蕉, 橘子等.

考虑到HTML的语义性, 用HTML提供的列表可以满足我们的需求.

HTML给我们提供了 3 种列表: <ul>(无序列表), ol(有序列表), <dl>(定义列表).

每种列表的语义之间是有差别的.

先学习无序列表.

一. 无序列表的基本使用

无序列表, 代表多项的无序列表, 即多个列表项之间是没有排序要求的, 且他们在列表中的排序是没有任何的意义的.

每个列表项用<li>标签来包裹, 所有的列表项一起用<ul>来包裹.

<h1>我喜欢上的明星, 排名不分先后</h1>
<ul>
    <li>林志玲</li>
    <li>刘亦菲</li>
    <li>凤姐</li>
    <li>张柏芝</li>
    <li>阿娇</li>
</ul>

说明

• ul是单词unordered list的首字母的缩写, li是单词list的缩写.

• 每一个项用一个<li>来表示, <li>是一个容器级标签, 可以在<li>内放任何元素, 即使再放<ul>也是合理的.

• 理论上, <ul>内应该只直接嵌套<li>, 不应该嵌套其他任何元素, 虽然即使你嵌套了其他元素也不会出现语法上的错误.

• 关于每个列表项前的小圆点, 仅仅是浏览器的默认显示样式而已, 实际开发中我们并不关注, 而且绝大部分情况都会使用样式重置去除掉浏览器的默认样式.

• 如果仅仅是为了添加小圆点, 而语义上并没有列表的语义, 万不可使用列表.

二. 无序列表的实际使用场景

在 3 种列表中, 无序列表的使用时最广泛和普遍的.

比如: 绝大部分网站的导航都用到了无序列表. 只是样式均做了优化而已, 后期我们学习CSS会了解更深.

京东首页导航

华为官网首页导航

三. 列表的嵌套

通过前面的学习我们已经了解到, <li>是容器级标签, 可以嵌套任何元素, 所以当然也可以嵌套<ul>, 这就叫列表的嵌套.

<h1>我喜欢上的明星</h1>
<ul>
    <li>
        <h3>女明星</h3>
        <ul>
            <li>林志玲</li>
            <li>刘亦菲</li>
            <li>李易峰</li>
            <li>鹿晗</li>
        </ul>
    </li>
    <li>
        <h3>男明星</h3>
        <ul>
            <li>郭德纲</li>
            <li>小岳岳</li>
            <li>李宇春</li>
        </ul>
    </li>
</ul>