HTML进阶：有序列表的使用技巧，让网页更美观

一、有序列表的基本语法

有序列表使用 <ol> 标签定义，其中的每个列表项使用 <li> 标签定义。例如，以下代码创建了一个简单有序列表：

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

这将生成以下列表：

1. 项目 1
2. 项目 2
3. 项目 3

二、有序列表的不同样式

你可以使用 CSS 来改变有序列表的样式。例如，以下代码将有序列表的项目符号从数字改为圆点：

ol {
  list-style-type: circle;
}

这将生成以下列表：

● 项目 1 ● 项目 2 ● 项目 3

三、嵌套有序列表

你可以将有序列表嵌套在其他有序列表中。例如，以下代码创建了一个嵌套有序列表：

<ol>
  <li>项目 1
    <ol>
      <li>子项目 1.1</li>
      <li>子项目 1.2</li>
      <li>子项目 1.3</li>
    </ol>
  </li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

这将生成以下列表：

1. 项目 1
   1. 子项目 1.1
   2. 子项目 1.2
   3. 子项目 1.3
2. 项目 2
3. 项目 3

四、使用有序列表进行导航

你可以使用有序列表来创建导航菜单。例如，以下代码创建了一个使用有序列表的导航菜单：

<nav>
  <ol>
    <li><a href="/">主页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ol>
</nav>

这将生成以下导航菜单：

• 主页
• 关于我们
• 联系我们

五、结论

有序列表是一种在网页中创建列表的简单方法。你可以使用不同的样式来改变有序列表的外观，也可以将有序列表嵌套在其他有序列表中。有序列表还可以用来创建导航菜单。