HTML宝典(第 1 版)
2.2.7 列表元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

blockquote元素

figure元素

pre元素

hr元素

p元素

div元素

列表元素

HTML 包含专门用于创建列表的元素,共有 3 种类型的列表,分别是无序列表、有序列表、描述列表。

可以在一个列表中其他另外一个或者多个列表,并且,一种类型的列表可以与任意类型的列表相互嵌套。列表的表项可以与任何HTML元素(如段落、图片、链接等)交叉定义。

所有的列表都是由父元素和子元素构成,父元素用于指定要创建的列表类型,子元素用于指定要创建的列表项。

无序列表

无序列表,是指所有表项之间没有先后顺序的列表。如果列表项的顺序不太重要,就要使用无序列表。

无序列表的父元素为 ul(unorder list)元素,列表项为 li(list item)元素。如:

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

上述代码的运行结果如图 2‑13 所示:

无序列表
图2-13 无序列表

从上图可以看出,默认情况下,无序列表的项目符号为实心圆。不过,可以使用CSS的list-style-type属性来定义项目符号的样式。

有序列表

有序列表,是指所有表项之间有先后顺序的列表。如果列表项的顺序对于列表来说非常关键,那么这种情况有序列表就是恰当的选择。

使用有序列表的好处是,列表项的序号由浏览器自动维护,可以随意增删列表项,而不必担心序号发生混乱。

有序列表的父元素为 ol(order list)元素,列表项为 li 元素。在 ol 元素中,通过start属性指定列表项的起始编号;通过reversed属性指定列表项的序号是否倒序排列,该属性是布尔类型,如果设置,则会倒序排列。如:

<ol start = "3" reversed>
  <li>表项1</li>
  <li>表项2</li>
  <li>表项3</li>
</ol>

上述代码的运行结果如图 2‑14 所示:

有序列表
图2-14 有序列表

从上图可以看出,列表项的序号按3、2、1倒序排列。并且,默认情况下,有序列表的项目符号为数字1、2、3,也可以使用CSS的list-style-type属性定义项目符号的样式。

描述列表

描述列表,是指用于描述成组出现的名称或术语及其值的列表。可以创建由名称和值构成的组合,如术语和定义、元数据和值、问题和答案,以及任何其他的名/值组。

在HTML5中,把这种列表称作描述列表(description list),而在HTML的早期版本值则称为定义列表(definition list)。

描述列表的父元素为 dl元素,而其中的每个名/值组,则包含一个或多个dt(description title)元素,以及一个或多个dd(description description)元素。dt 元素用来定义名称或术语,dd元素用来定义名称或术语的值。如:

<dl>
  <dt>列表标题1:</dt>
      <dd>表项描述1-1</dd>
      <dd>表项描述1-2</dd>
      <dd>表项描述1-3</dd>
  <dt>列表标题2:</dt>
      <dd>表项描述2-1</dd>
       <dd>表项描述2-2</dd>
      <dd>表项描述2-3</dd>
</dl>

上述代码的运行结果如图 2‑15 所示:

描述列表
图2-15 描述列表

从上图可以看出,描述列表是没有项目符号的。虽然它也是列表,但不能使用CSS的list-style-type属性定义列表项目符号的样式。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验