html列表标签详细说明以及案例

HTML 提供了多种列表标签，主要用于创建有序、无序和定义列表。以下是详细的说明及案例：

1. 无序列表 (<ul>)

无序列表用于显示一组没有特定顺序的项目，每个项目前通常带有圆点（默认样式）。

语法：

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

案例：

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

2. 有序列表 (<ol>)

有序列表用于显示一组有特定顺序的项目，每个项目前通常带有数字（默认样式）。

语法：

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

案例：

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

3. 定义列表 (<dl>)

定义列表用于显示术语及其定义，通常包含术语 (<dt>) 和描述 (<dd>)。

语法：

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>

案例：

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

4. 嵌套列表

列表可以嵌套使用，即在列表项中再包含一个列表。

案例：

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

5. 自定义列表样式

通过 CSS 可以自定义列表的样式，例如更改列表项的标记符号。

案例：

<style>
  ul.custom {
    list-style-type: square;
  }
  ol.custom {
    list-style-type: upper-roman;
  }
</style>
 
<ul class="custom">
  <li>项目1</li>
  <li>项目2</li>
</ul>
 
<ol class="custom">
  <li>项目1</li>
  <li>项目2</li>
</ol>

这些是 HTML 中常用的列表标签及其使用方式。

本篇文章内容来源于：html列表标签详细说明以及案例