HTML 列表


HTML 列表是显示信息的常用元素,它可以将有序的和无序的信息分类、展示,这给用户带来了便利。本文将介绍 HTML 中的三种列表:有序列表、无序列表和定义列表。

有序列表

有序列表用于递增的项目,其项目标志为数字。以下是创建有序列表的代码示例:

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

在此代码示例中,<ol> 表示有序列表的开始标志,</ol> 表示有序列表的结束标志,<li> 表示列表项的开始标志,</li> 表示列表项的结束标志。<ol> 标签可以包含多个 <li> 标签。上述代码将会输出以下结果:

  1. 第一项
  2. 第二项
  3. 第三项

有序列表还有一些属性可以使用,例如:

  • type:可以设置列表项的序号类型,可选值包括阿拉伯数字(默认值)、大写字母、小写字母、罗马数字等。
<ol type="A">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

将会输出以下结果:

A. 第一项 B. 第二项 C. 第三项

  • start:可以设置列表项的起始值。
<ol start="4">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

将会输出以下结果:

  1. 第一项
  2. 第二项
  3. 第三项

无序列表

无序列表用于不递增的项目,其项目标志为符号。以下是创建无序列表的代码示例:

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

在此代码示例中,<ul> 表示无序列表的开始标志,</ul> 表示无序列表的结束标志,<li> 表示列表项的开始标志,</li> 表示列表项的结束标志。<ul> 标签可以包含多个 <li> 标签。上述代码将会输出以下结果:

  • 第一项
  • 第二项
  • 第三项

无序列表也有一些属性可以使用,例如:

  • type:可以设置列表项的符号类型,可选值包括实心点(默认值)、实心圆、空心圆、空心正方形等。
<ul type="circle">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

将会输出以下结果:

○ 第一项 ○ 第二项 ○ 第三项

定义列表

定义列表用于将名称和值成对地展示,其项目标志为名称项。以下是创建定义列表的代码示例:

<dl>
  <dt>名称</dt>
  <dd>值</dd>
  <dt>名称</dt>
  <dd>值</dd>
</dl>

在此代码示例中,<dl> 表示定义列表的开始标志,</dl> 表示定义列表的结束标志,<dt> 表示名称项的开始标志,</dt> 表示名称项的结束标志,<dd> 表示值项的开始标志,</dd> 表示值项的结束标志。<dl> 标签可以包含多对 <dt><dd> 标签。上述代码将会输出以下结果:

名称

名称

定义列表还有一个属性 compact 可以使用,可将列表缩小,具体效果可以见实际效果。

以上就是 HTML 中的三种列表的介绍,适当使用列表可以使文档更加直观明了,为用户提供更好的浏览体验。