HTML 列表的终极资源：一个包含所有你需要知道的知识宝库

不同类型的 HTML 列表

• 无序列表（
  ）：显示项目符号（•、- 或 *）前的项目列表。
  • 有序列表（
    ）：显示数字符号前的项目列表。
    1. 定义列表（

       ）：显示术语和定义对。

  列表属性

  • type：指定列表的类型（ul、ol 或 dl）。
  • start：用于有序列表，指定列表中第一个项目的起始编号。
  • reversed：反向有序列表中项目的顺序。
  • compact：创建紧凑列表，项目之间没有垂直空间。

  列表项属性

  • value：指定有序列表中项目的编号。
  • type：指定无序列表中项目的项目符号类型（圆点、连字符或方块）。

  列表用法

  • 创建菜单、导航和目录。
  • 列出产品或服务的功能。
  • 显示步骤说明。
  • 定义术语和概念。

  示例代码

  无序列表：

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

  有序列表：

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

  定义列表：

  <dl>
    <dt>术语 1</dt>
    <dd>定义 1</dd>
    <dt>术语 2</dt>
    <dd>定义 2</dd>
  </dl>

  嵌套列表

  您可以将列表嵌套在其他列表中，以创建分层结构：

  <ul>
    <li>项目 1
      <ul>
        <li>子项目 1.1</li>
        <li>子项目 1.2</li>
      </ul>
    </li>
    <li>项目 2</li>
  </ul>

  样式化列表

  可以使用 CSS 对列表进行样式化，例如更改项目符号、编号或列表项的间距：

  ul {
    list-style-type: square;
    padding: 0;
  }
  
  ol {
    list-style-position: inside;
    margin-left: 1em;
  }

  HTML 列表的优势

  • 清晰度：列表有助于组织和清晰地显示信息。
  • 可读性：项目符号和编号使列表更易于浏览。
  • 灵活性：您可以根据需要使用不同类型的列表和属性。
  • 可扩展性：列表可以嵌套以创建复杂的分层结构。
  • 可访问性：屏幕阅读器可以轻松识别和导航列表。

  掌握 HTML 列表将使您能够创建美观且用户友好的网页。通过利用其多样性、属性和样式选项，您可以以多种方式有效地组织和显示您的内容。