--- title:
    slug: Web/HTML/Element/ol tags: - Element - HTML - HTML grouping content - 'HTML:Flow content' - Reference - 元素 - 列表 - 参考 translation_of: Web/HTML/Element/ol ---
    {{HTMLRef}}

    HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。

    {{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}

    内容类别 Flow content, and if the <ol> element's children include at least one {{HTMLElement("li")}} element, palpable content.
    允许的内容 Zero or more {{ HTMLElement("li") }}, {{HTMLElement("script")}} and {{HTMLElement("template")}} elements.
    标签省略 {{no_tag_omission}}
    允许的父级 Any element that accepts flow content.
    隐含的 ARIA 角色 list
    允许的 ARIA 角色 {{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}
    DOM 接口 {{DOMxRef("HTMLOListElement")}}

    属性

    此元素支持全局属性。

    {{htmlattrdef("reversed")}}
    此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。
    {{htmlattrdef("start")}}
    一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 start="4"。
    Note: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
    {{htmlattrdef("type")}}
    设置编号的类型：
    • a 表示小写英文字母编号
    • A 表示大写英文字母编号
    • i 表示小写罗马数字编号
    • I 表示大写罗马数字编号
    • 1 表示数字编号（默认）

    编号类型适用于整个列表，除非在 <ol> 元素的 {{HTMLElement("li")}} 元素中使用不同的 {{HTMLAttrxRef("type", "li")}} 属性。

    Note: 这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS {{cssxref("list-style-type")}} 属性替代。

    使用备注

    通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

    <ol> 和 {{HTMLElement("ul")}} 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。

    <ol> 和 {{HTMLElement("ul")}} 元素都表示列表。区别在于，<ol> 元素的有序列表的顺序是有意义的。举一些例子：

    至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 {{HTMLElement("ol")}} 元素，否则使用 {{HTMLElement("ul")}} 更合适。

    译者注：“更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。
    如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。

    示例

    简单示例

    <ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

    以上 HTML 输出如下：

    {{EmbedLiveSample("Simple_example", 400, 100)}}

    使用小写罗马数字编号

    <ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>

    以上 HTML 输出如下：

    {{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}

    使用 start 属性

    <p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

    以上 HTML 输出如下：

    {{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}

    嵌套列表

    <ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

    以上 HTML 输出如下：

    {{EmbedLiveSample("Nesting_lists", 400, 150)}}

    嵌套有序列表和无序列表

    <ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

    以上 HTML 输出如下：

    {{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}

    规范

    规范 状态 备注
    {{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}} {{Spec2('HTML WHATWG')}} No change since last W3C snapshot, {{SpecName('HTML5 W3C')}}.
    {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} {{Spec2('HTML5 W3C')}} Added reversed and start attributed; un-deprecated type
    {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} {{Spec2('HTML4.01')}} Deprecated compact and type.

    浏览器兼容性

    {{Compat("html.elements.ol")}}

    相关