我正在尝试将HTML代码用作列表样式类型

在HTML中，列表是一种常用的元素，用于组织和展示数据。列表有两种主要类型：有序列表（Ordered List）和无序列表（Unordered List）。这两种列表都可以通过CSS来设置不同的样式类型。

基础概念

有序列表（<ol>）：使用数字或字母来标记列表项的顺序。 无序列表（<ul>）：使用圆点、方块或其他符号来标记列表项。

列表样式类型

CSS提供了几种不同的列表样式类型，可以通过list-style-type属性来设置：

disc（默认）：实心圆点。
circle：空心圆圈。
square：实心方块。
decimal：阿拉伯数字。
lower-alpha：小写字母。
upper-alpha：大写字母。
lower-roman：小写罗马数字。
upper-roman：大写罗马数字。
none：不显示任何列表项标记。

应用场景

导航菜单：通常使用无序列表来创建水平或垂直的导航菜单。
文章目录：有序列表适合用于文章的目录，显示章节顺序。
待办事项列表：无序列表常用于待办事项列表，以突出显示任务项。

示例代码

以下是一个简单的HTML和CSS示例，展示了如何设置不同的列表样式类型：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式示例</title>
<style>
  ul.disc-style {
    list-style-type: disc;
  }
  ul.circle-style {
    list-style-type: circle;
  }
  ul.square-style {
    list-style-type: square;
  }
  ol.decimal-style {
    list-style-type: decimal;
  }
  ol.lower-alpha-style {
    list-style-type: lower-alpha;
  }
  ol.upper-alpha-style {
    list-style-type: upper-alpha;
  }
  ol.lower-roman-style {
    list-style-type: lower-roman;
  }
  ol.upper-roman-style {
    list-style-type: upper-roman;
  }
</style>
</head>
<body>

<h2>无序列表样式示例</h2>
<ul class="disc-style">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<ul class="circle-style">
  <li>项目 A</li>
  <li>项目 B</li>
  <li>项目 C</li>
</ul>

<ul class="square-style">
  <li>项目 I</li>
  <li>项目 II</li>
  <li>项目 III</li>
</ul>

<h2>有序列表样式示例</h2>
<ol class="decimal-style">
  <li>章节 1</li>
  <li>章节 2</li>
  <li>章节 3</li>
</ol>

<ol class="lower-alpha-style">
  <li>部分 a</li>
  <li>部分 b</li>
  <li>部分 c</li>
</ol>

<ol class="upper-alpha-style">
  <li>部分 A</li>
  <li>部分 B</li>
  <li>部分 C</li>
</ol>

<ol class="lower-roman-style">
  <li>卷 i</li>
  <li>卷 ii</li>
  <li>卷 iii</li>
</ol>

<ol class="upper-roman-style">
  <li>卷 I</li>
  <li>卷 II</li>
  <li>卷 III</li>
</ol>

</body>
</html>