HTML5与CSS3基础语法自学教程（二十）

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节主要讲解 HTML 中的列表元素，其中包含了什么是列表元素、有序列表、无序列表以及定义列表等内容。列表元素配合 CSS 样式可以实现各种各样的效果，例如页面的导航栏、文档的目录等。

什么是列表元素

编写文档时经常会使用列表方式呈现一系列平行的内容，在 HTML 页面中同样提供了列表元素来完成类似的功能，可以划分为如下 3 列表：

• 有序列表

• 无序列表

• 定义列表

如下图所示展示了有序列表和无序列表默认的效果：

01-01.png

如上图所示，左边是无序列表的效果，右边是有序列表的效果。

有序列表

HTML <ol> 元素表示有序列表，默认情况下使用数字作为列表编号。而 <li> 元素则表示列表项，定义在有序列表中。

如下示例代码展示了 HTML 中有序列表的用法：

<ol>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-02.png

<ol> 元素默认使用数字作为编号，可以通过 type 属性进行修改，该属性的值具有 5 种类型，如下所示：

• "a"：表示小写字母编号

• "A"：表示大写字母编号

• "i"：表示小写罗马数字编号

• "I"：表示大写罗马数字编号

• "1"：默认值，表示数字编号

type 属性的值默认情况下会作用到整个有序列表。

说明：type 属性在 HTML4 版本中被弃用，但在 HTML5 版本中被重新引入。如果不是为了元素的语义化的话，该属性可以使用 CSS 中的 list-style-type 属性进行替代。

除了 type 属性之外，在 HTML5 版本中新增了 2 个属性，如下所示：

• reversed：布尔值，设置列表采用倒序的方式。

注意：该属性只需要定义属性名即可，而不需要设置属性值。

如下示例代码展示了 reversed 属性的用法：

<ol reversed>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-03.png

• start：整数值，设置列表序号开始的值。

说明：该属性在 HTML4 版本中被弃用，在 HTML5 版本中被重新引入。

HTML <li> 元素也同样具有如下 2 个属性：

• value：整数值，设置当前列表项在有序列表的序号。

说明：该属性在 HTML4 版本中被弃用，在 HTML5 版本中被重新引入。

• type：设置有序列表的数字类型。

说明：该属性值会覆盖 <ol> 元素的 type 属性值。

由于 <li> 元素的 2 个属性，会导致两种比较特殊的情况出现：

• li 元素通过 value 属性设置了该元素在有序列表的序号，但与默认的序号是不同的。

如下示例代码展示了这种情况：

<ol>
  <li>iPhone手机</li>
  <li value="5">小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-04.png

• ol 元素通过 type 属性设置了数字类型，而 li 元素通过 type属性同样设置了数字类型。
  
  如下示例代码展示了这种情况：

<ol type="A">
  <li>iPhone手机</li>
  <li type="I">小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-05.png

无序列表

HTML <ul> 元素表示无序列表，默认情况下使用 disc 作为列表编号。而 <li> 元素则表示列表项，定义在无序列表中。

如下示例代码展示了 HTML 中无序列表的用法：

<ul>
  <li>iPhone手机</li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>

上述示例代码运行效果如下图所示：

01-06.png

<ul> 元素默认使用 disc 作为编号，可以通过 type 属性进行修改，该属性的值具有 3 种类型，如下所示：

• disc：默认值，表示实心圆

• circle：表示空心圆

• square：表示实心方块

说明：type 属性已经被弃用，建议使用 CSS 中的 list-style-type 属性进行替代。

HTML <li> 元素的 value 属性或 type 属性都是针对有序列表的，对无序列表是无效的。

列表嵌套

在一个有序列表或无序列表中定义另一个有序或无序列表作为子列表，这样就构成了列表嵌套。列表嵌套会有如下 4 种情况：

• 有序列表嵌套有序列表：父级和子级列表默认使用数字作为序号。

如下示例代码所示：

<ol>
  <li>iPhone手机
    <ol>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ol>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-07.png

• 有序列表嵌套无序列表：父级有序列表默认使用数字作为序号，子级无序列表默认使用 circle 作为序号。
  
  

如下示例代码所示：

<ol>
  <li>iPhone手机
    <ul>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ul>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ol>

上述示例代码运行效果如下图所示：

01-08.png

• 无序列表嵌套无序列表：父级无序列表默认使用 disc 作为序号，子级无序列表默认使用 circle 作为序号。

如下示例代码所示：

<ul>
  <li>iPhone手机
    <ul>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ul>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>

上述示例代码运行效果如下图所示：

01-09.png

• 无序列表嵌套有序列表：父级无序列表默认使用 disc 作为序号，子级有序列表默认使用数字作为序号。

如下示例代码所示：

<ul>
  <li>iPhone手机
    <ol>
      <li>iPhone 7</li>
      <li>iPhone 8</li>
      <li>iPhone X</li>
    </ol>
  </li>
  <li>小米手机</li>
  <li>华为手机</li>
</ul>

上述示例代码运行效果如下图所示：

01-10.png

定义列表

HTML <dl> 元素在 HTML4 版本中称为定义列表，在 HTML5 版本中称为描述列表。该元素是一个包含术语定义及描述的列表，其中术语定义使用的是 <dt> 元素，描述使用的是 <dd> 元素。该元素通常应用于例如词汇表、键值对列表等。

如下示例代码展示了定义列表的基本用法：

<dl>
  <dt>爱好</dt>
    <dd>抽烟</dd>
    <dd>喝酒</dd>
    <dd>烫头</dd>
  <dt>职业</dt>
    <dd>程序员</dd>
    <dd>讲师</dd>
    <dd>说书人</dd>
</dl>

上述示例代码运行效果如下图所示：

01-11.png

说明：不要将定义列表用来实现缩进效果，因为这样做法导致语义化不清晰。

总结

本小节讲解了有关 HTML 页面中的列表元素，其中包含了有序列表、无序列表、列表嵌套以及定义列表等内容。

• ol 元素表示有序列表，ul 元素表示无序列表，而 li 元素表示有序列表或无序列表的列表项。

• 列表嵌套可以划分为 4 种情况。

预告：下一节，我们将讲解有关列表样式的内容。

如要转载本文，请先加作者微信(2080954535，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！

作者二维码.png