HTML有序列表

2024-04-12 23:50:03 144

示例

可以使用<ol>标记创建有序列表，并且可以使用标记创建每个列表项<li>，如下例所示：

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

这将产生一个编号列表（这是默认样式）：

项目
另一个项目
另一个项目

有几种方法可以使数字显示在有序列表的列表项中。第一种方法是使用start属性设置起始号码。该列表将从此定义的数字开始，然后像往常一样继续增加一。

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

这将产生一个编号列表（这是默认样式）：

项目
其他一些项目
另一个项目

您还可以将某个列表项显式设置为特定编号。具有指定值的一个之后的其他列表项将继续从该列表项的值开始加一，而忽略父列表的位置。

<li value="7"></li>

还值得注意的是，通过value直接在列表项上使用属性，您可以通过以较低的值重新开始编号来覆盖有序列表的现有编号系统。因此，如果父列表已经达到值7，并且遇到了值为4的列表项，则该列表项仍将显示为4并从该点继续计数。

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

因此，上面的示例将产生一个遵循5、6、4、5、6编号模式的列表-再次从比前一个数字低的数字开始，并复制列表中的数字6。

注：该start和value属性只接受一个数字-即使有序列表设置为显示为罗马数字或字母。

您可以通过添加扭转编号reversed在你的ol元素：

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

如果您要不断添加到列表（例如新的Podcast情节或演示文稿），并且希望最新的项目优先出现，则反向编号会很有用。

您可以使用type属性轻松更改列表项标记中显示的数字类型

<ol type="1|a|A|i|I">

类型描述例子1默认值-十进制数1,2,3,4a按字母顺序排列（小写）ABCDA按字母顺序排列（大写）ABCDi罗马数字（小写）i，ii，iii，ivI罗马数字（大写）一，二，三，四

您应该使用ol来显示项目列表，这些项目已被有意订购，并且应强调订购。如果更改项目的顺序不会使列表不正确，则应使用<ul>。