HTML 列表类型

HTML 列表类型

HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。列表项均使用 <li> 标签定义。

有序列表示例：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

无序列表示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

列表属性

有序列表属性：

• type：设置编号类型（如 1, A, a, I, i）。
• start：设置起始编号值。
• reversed：倒序排列（布尔属性）。

<ol type="A" start="3">
  <li>项目C</li>
  <li>项目D</li>
</ol>

无序列表样式： 通过 CSS 的 list-style-type 修改项目符号样式（如 disc, circle, square）。

<ul style="list-style-type: square;">
  <li>正方形符号</li>
</ul>

嵌套列表

列表可以多层嵌套，用于创建层级结构：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
    </ul>
  </li>
</ul>

定义列表

使用 <dl> 创建术语和描述的配对列表：

• <dt>：定义术语。
• <dd>：术语描述。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

实际应用场景

• 导航菜单：使用无序列表结合 CSS 实现。
• 步骤说明：有序列表适合流程展示。
• 数据分组：定义列表可用于键值对展示。

通过合理选择列表类型和属性，可以高效组织内容并提升可读性。