2.4 列表 2.4.1 无序列表 2.4.1.1 在<ul>后指定符号的样式 2.4.1.2 在<li>后指定符号的样式 2.4.2 有序列表 2.4.3 定义列表 2.4.4 嵌套列表 详细补充以上内容html

在HTML中，列表是一种常用的元素用于组织信息，分为四种主要类型的列表：

**2.4 无序列表 (Unordered List)**
无序列表通常使用 `<ul>` 标签创建，并由一系列 `<li>`（list item，项目）标签组成，每个项目前会自动添加一个符号如`<li>*</li>` 或 `<li>-</li>`。要自定义列表符号的样式，可以使用CSS。例如，通过设置 `list-style-type` 属性，可以在 `<ul>` 上应用样式：

<ul class="custom-list">
  <li>项目1</li>
  <li>项目2</li>
</ul>

<style>
.custom-list {
  list-style-type: square; /* 更改符号，如disc（实心圆点），circle（空心圆圈）等 */
}
</style>

**2.4.1.1 在<ul>后指定符号样式**
通过类名或ID，可以直接在 `<ul>` 元素上定义样式，而不是每个 `<li>`：

<ul class="custom-square-list">
  <li>项目1</li>
  <li>项目2</li>
</ul>

<style>
.custom-square-list {
  list-style-type: square;
}
</style>

**2.4.1.2 在<li>后指定符号样式**
若想让每个项目的符号独立定制，可以在每个 `<li>` 内部添加自定义样式，如使用伪元素 `::before`：

<ul>
  <li><span class="custom-dot">.</span>项目1</li>
  <li><span class="custom-dot">.</span>项目2</li>
</ul>

<style>
.custom-dot {
  display: inline-block;
  content: '.';
  /* 颜色、大小等其他样式 */
}
</style>

**2.4 有序列表 (Ordered List)**
有序列表使用 `<ol>`，项目前有数字或字母编号，比如 `<ol type="1">` 可以显示一、二、三...。同样支持CSS样式调整。

**2.4.3 定义列表 (Definition List, dl)**
定义列表包含 `<dt>`（定义项，Definition Term）和 `<dd>`（定义描述，Definition Description）：

<dl>
  <dt>术语1</dt>
  <dd>这是关于术语1的解释。</dd>
</dl>

CSS也可以修改其外观。

**2.4.4 嵌套列表 (Nested Lists)**
列表可以嵌套在其他列表中，只需保持相同的结构即可：

<ul>
  <li>顶级项目
    <ul>
      <li>子项目1</li>
      <li>子项目2</li>
    </ul>
  </li>
</ul>

这会创建一个有层次感的列表结构。