HTML 有序列表

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在 HTML 中,我们可以使用 <ol> 标签创建一个有序列表。有序列表是一个按特定顺序编号的项目列表。<ol> 标签用于创建有序列表,而 <li> 标签用于定义列表中的每个项目。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70806{{"`HTML 有序列表`"}} html/head_elems -.-> lab-70806{{"`HTML 有序列表`"}} html/lists_desc -.-> lab-70806{{"`HTML 有序列表`"}} html/doc_flow -.-> lab-70806{{"`HTML 有序列表`"}} html/inter_elems -.-> lab-70806{{"`HTML 有序列表`"}} end

设置 HTML 文件

在这一步中,我们将创建一个基本的 HTML 文件并设置 <ol> 标签。打开 "index.html" 文件并输入以下代码:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

向列表中添加更多项目

在这一步中,我们将向有序列表中添加更多项目。为此,只需在 <ol> 标签的开始和结束之间添加更多 <li> 标签:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

更改编号类型

在这一步中,我们将更改有序列表中使用的编号类型。默认情况下,有序列表使用十进制编号。然而,我们可以将其更改为其他编号类型,例如罗马数字或字母。要更改编号类型,请在 <ol> 标签中使用 type 属性。例如:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

在上面的代码中,我们将 type 属性设置为 I,表示大写罗马数字。

从特定数字开始编号

在这一步中,我们将更改有序列表项的起始编号。默认情况下,有序列表的第一项从 "1" 开始。然而,我们可以将其更改为从特定数字开始。要更改起始编号,请在 <ol> 标签中使用 start 属性。例如:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

在上面的代码中,我们将 start 属性设置为 3,这意味着有序列表的第一项将编号为 "3"。

总结

在本实验中,我们学习了如何使用 <ol> 标签在 HTML 中创建有序列表。我们还学习了如何向列表中添加项目、更改编号类型以及从特定数字开始编号。通过这些知识,我们可以在网页上创建具有专业外观的列表。

您可能感兴趣的其他 HTML 教程