HTML 无序列表进阶教程：掌握高级技巧，提升网页表现力

嵌套列表

嵌套列表很像matryoshka，可以在列表中创建子列表。您可以通过在列表项中使用<ul>和<li>标签来创建嵌套列表。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橘子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>芹菜</li>
      <li>西兰花</li>
    </ul>
  </li>
</ul>

项目符号

您还可以使用不同的项目符号来使您的列表更有趣。HTML 提供了多种内置的项目符号，包括圆形、方形和数字。您可以在<ul>标签中使用type属性来指定项目符号的类型。

<ul type="circle">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

<ul type="square">
  <li>胡萝卜</li>
  <li>芹菜</li>
  <li>西兰花</li>
</ul>

<ul type="1">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

列表样式

除了项目符号之外，您还可以使用CSS来自定义列表的样式。您可以使用list-style-type属性来指定项目符号的类型，还可以使用list-style-position属性来指定项目符号的位置。

ul {
  list-style-type: none;
}

li {
  list-style-position: inside;
}

结论

HTML 无序列表是一个非常灵活的元素，可以帮助您轻松地将内容组织成易读的格式。通过使用嵌套列表、项目符号和列表样式，您可以创建出更有趣、更具吸引力的列表。