📜  HTML列表(1)

📅  最后修改于: 2023-12-03 15:15:44.671000             🧑  作者: Mango

HTML列表

HTML列表用于展示一组有序或无序的项目。有序列表使用数字或字母来标识每个项目,而无序列表使用符号或图片来标识每个项目。HTML中有三种类型的列表:无序列表(<ul>),有序列表(<ol>)和定义列表(<dl>)。

无序列表

无序列表使用<ul>标签来创建。每个列表项使用<li>标签来标识。

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

这将会生成以下的列表:

  • 第一项
  • 第二项
  • 第三项
有序列表

有序列表使用<ol>标签来创建。每个列表项使用<li>标签来标识。不同的是,我们在<ol>标签中指定type属性来标识数字的格式,如1表示阿拉伯数字,A表示大写字母,a表示小写字母等。

<ol type="1">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

这将会生成以下的列表:

  1. 第一项
  2. 第二项
  3. 第三项
定义列表

定义列表使用<dl>标签来创建。每个列表项都由一个术语(<dt>标签)和一个定义(<dd>标签)组成。

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

这将会生成以下的列表:

HTML 超文本标记语言

CSS 层叠样式表

JS JavaScript

嵌套的列表

我们可以使用嵌套的列表将一个类型的列表作为另一个类型的列表项。

<ul>
  <li>第一项</li>
  <li>第二项
    <ol>
      <li>嵌套的第一项</li>
      <li>嵌套的第二项</li>
    </ol>
  </li>
  <li>第三项</li>
</ul>

这将会生成以下的列表:

  • 第一项
  • 第二项
    1. 嵌套的第一项
    2. 嵌套的第二项
  • 第三项

HTML列表在展示项目时非常有用。您可以使用HTML标签轻松创建有序,无序和定义列表,并使用嵌套的列表创建更复杂的列表。