HTML - 有序列表

原创

admin 4个月前 (08-07) 阅读数 17 #HTML

HTML - 有序列表

有序列表是由<ol>标签定义的，其中所有列表项都被标记为有序列表。

HTML有序列表

有序列表是一组具有特定顺序或序列的项目集合。HTML有序列表通过<ol>标签创建，其中每个列表项由<li>标签定义。

这种类型的有序列表用于显示列表项，它们被标记为有序编号列表，例如食谱的步骤、排行榜的排名或事件的顺序，如下图所示：

创建有序列表

要在HTML中创建有序列表，我们使用<ol>标签并在其中嵌套<li>标签。每个<li>元素代表列表中的一个项目。编号从1开始，对于每个连续的<li>标记的有序列表元素，编号递增1。与无序列表一样，它也允许我们使用<ol>元素的type属性更改编号样式。

示例

以下示例演示了如何在HTML中创建有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <ol>
      <li>甜菜根</li>
      <li>生姜</li>
      <li>土豆</li>
      <li>萝卜</li>
   </ol>
</body>
</html>

如果您点击编辑并运行，上面的示例将显示一个有序列表。

HTML有序列表 - type属性

type属性用于指定HTML中有序列表的标记类型。默认情况下，列表编号类型是从1、2、3等开始的数字。您可以使用以下任何值更改数字类型：

序号	值和描述
1	1 这是默认的标记类型。
2	I 列表项将显示罗马数字标记。
3	A 它将标记设置为大写字母。
4	a 它将标记设置为小写字母。

带数字的有序列表

以下示例演示了带数字类型标记的有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <p>带计数数字的有序列表：</p>
   <ol type="1">
      <li>甜菜根</li>
      <li>生姜</li>
      <li>土豆</li>
      <li>萝卜</li>
   </ol>
</body>
</html>

带大写罗马数字的有序列表

以下示例演示了带大写罗马数字类型标记的有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <p>带大写罗马数字的有序列表：</p>
   <ol type="I">
      <li>阿曼</li>
      <li>维韦克</li>
      <li>施雷伊</li>
      <li>安什</li>
   </ol>
</body>
</html>

带小写罗马数字的有序列表

以下示例演示了带小写罗马数字类型标记的有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <p>带小写罗马数字的有序列表：</p>
   <ol type="i">
      <li>阿曼</li>
      <li>维韦克</li>
      <li>施雷伊</li>
      <li>安什</li>
   </ol>
</body>
</html>

带大写字母的有序列表

以下示例演示了带大写字母类型标记的有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <p>带大写字母的有序列表：</p>
   <ol type="A">
      <li>巴士</li>
      <li>火车</li>
      <li>飞机</li>
      <li>船</li>
   </ol>
</body>
</html>

带小写字母的有序列表

以下示例演示了带小写字母类型标记的有序列表：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <p>带小写字母的有序列表：</p>
   <ol type="a">
      <li>巴士</li>
      <li>火车</li>
      <li>飞机</li>
      <li>船</li>
   </ol>
</body>
</html>

上面的示例显示了带计数数字、罗马数字和字母的有序列表。

HTML有序列表 - start属性

默认情况下，编号从1开始，但您可以使用start属性与<ol>标签一起更改它。该属性定义有序列表的起始数字。

语法

以下是定义数字类型和有序列表初始（起始）数字的不同语法（用例）：

<ol type="1" start="4"> - 数字从4开始。
<ol type="I" start="4"> - 数字从IV开始。
<ol type="i" start="4"> - 数字从iv开始。
<ol type="a" start="4"> - 字母从d开始。
<ol type="A" start="4"> - 字母从D开始。

示例

以下是我们使用<ol type="i" start="4">的示例：

<!DOCTYPE html>
<html>
<head>
   <title>HTML有序列表</title>
</head>
<body>
   <ol type="i" start="4">
      <li>甜菜根</li>
      <li>生姜</li>
      <li>土豆</li>
      <li>萝卜</li>
   </ol>
</body>
</html>

样式化HTML有序列表

使用CSS样式化有序列表可以自定义外观，以匹配网站的设计偏好。CSS样式可以同时针对列表本身（<ol>）和列表项（<li>）。

示例

以下是包含有序列表所有CSS样式的程序示例：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>样式化有序列表</title>
   <style>
      /* 基本样式 */
      ol {
         color: navy;
         font-family: 'Arial', sans-serif;
         margin-left: 20px;
      }
      li {
         font-size: 16px;
         margin-bottom: 8px;
      }
      /* 更改编号样式 */
      ol.roman {
         list-style-type: upper-roman;
      }
      ol.letters {
         list-style-type: upper-alpha;
      }
      /* 添加计数器 */
      ol.counter-list {
         counter-reset: my-counter;
      }
      ol.counter-list li {
         counter-increment: my-counter;
      }
      ol.counter-list li::before {
         content: counter(my-counter) '. ';
      }
      /* 悬停时更改文本颜色 */
      li.hover-effect:hover {
         color: #e44d26;
      }
   </style>
</head>
<body>
   <h1>样式化有序列表示例</h1>
   <h2>基本样式</h2>
   <ol>
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
   </ol>
   <h2>更改编号样式</h2>
   <ol class="roman">
      <li>罗马数字I</li>
      <li>罗马数字II</li>
      <li>罗马数字III</li>
   </ol>
   <ol class="letters">
      <li>字母A</li>
      <li>字母B</li>
      <li>字母C</li>
   </ol>
   <h2>添加计数器</h2>
   <ol class="counter-list">
      <li>项目</li>
      <li>项目</li>
      <li>项目</li>
   </ol>
   <h2>悬停时更改文本颜色</h2>
   <ol>
      <li class="hover-effect">悬停效果1</li>
      <li class="hover-effect">悬停效果2</li>
      <li class="hover-effect">悬停效果3</li>
   </ol>
</body>
</html>

该程序创建了一个带有有序列表的样式化HTML文档。它包括基本样式，将编号样式更改为罗马数字和字母，为项目添加计数器，并在悬停时更改文本颜色。

嵌套有序列表

HTML允许嵌套列表；您可以创建嵌套有序列表，在外部列表元素的项内显示项目列表。

注意：您还可以更改外部或内部列表的类型。在下面的示例中，主列表使用十进制数字，第二个列表项使用小写罗马数字，第三个列表项使用大写罗马数字。您还可以根据需要定义起始数字。

示例

以下示例演示了嵌套有序列表的使用：

<!DOCTYPE html>
<html>
<head>
  <title>嵌套有序列表</title>
</head>
<body>
<h2>嵌套有序列表示例</h2>
<ol>
  <li>水果
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ol>
  </li>
  <li>蔬菜
    <ol type="i">
      <li>胡萝卜</li>
      <li>西兰花</li>
      <li>菠菜</li>
    </ol>
  </li>
  <li>乳制品
    <ol type="I">
      <li>牛奶</li>
      <li>奶酪</li>
      <li>酸奶</li>
    </ol>
  </li>
</ol>
</body>
</html>