HTML无序列表

我们使用 HTML 无序列表来定义一个列表中各项顺序无关紧要的列表。我们可以使用无序列表来记录杂货、用品和随机物品。

在 HTML 中，我们使用 <ul> 标签来创建无序列表。例如，

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

浏览器输出

列表中的每一项都包含在 <li> 标签中，并由实心圆点符号表示。

默认情况下，HTML 中表示无序列表的符号是实心圆点，但我们可以根据自己的选择进行更改。

无序列表标记

我们使用 CSS 的 list-style-type 属性来更改标记列表项的符号。标记的有效选项有：

下面，我们可以看到所有标记类型的示例。

嵌套列表

在 HTML 中，我们可以通过在一个列表内部添加另一个列表来创建嵌套列表。例如，

 <ul>    
    <li>
      Coffee
      <ul>
        <li>Cappuccino</li>
        <li>Americano</li>
        <li>Espresso</li>
      </ul>
    </li>
    <li>
      Tea
      <ul>
        <li>Milk Tea</li>
        <li>Black Tea</li>
      </ul>
    </li>
    <li>Milk</li>
  </ul>

浏览器输出

在上面的示例中，您可以看到我们已经将无序列表添加到另一个无序列表内部。

在这种情况下，外部无序列表的第一项和第二项包含无序列表。

无序列表中的有序列表

同样，我们可以在嵌套时混合列表类型，并在无序列表内部添加有序列表。例如，

 <ul>
    <li>
      Coffee
      <ol>
        <li>Cappuccino</li>
        <li>Americano</li>
        <li>Espresso</li>
      </ol>
    </li>
    <li>
      Tea
      <ol>
        <li>Milk Tea</li>
        <li>Black Tea</li>
      </ol>
    </li>
    <li>Milk</li>
  </ul>

浏览器输出

无序列表的多级嵌套

在我们的示例中，我们将列表嵌套到单个级别，但是，我们也可以将列表嵌套到多个级别。这在创建像目录这样的列表时可能很重要。例如，