path: root/files/zh-cn/web/html/element/ol/index.html

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

<p><strong>HTML <code>&lt;ol&gt;</code> 元素</strong>表示有序列表，通常渲染为一个带编号的列表。</p>

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

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, and if the <code>&lt;ol&gt;</code> element's children include at least one {{HTMLElement("li")}} element, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td>Zero or more {{ HTMLElement("li") }}, {{HTMLElement("script")}} and {{HTMLElement("template")}} elements.</td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父级</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">隐含的 ARIA 角色</th>
   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td>
  </tr>
  <tr>
   <th scope="row">允许的 ARIA 角色</th>
   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{DOMxRef("HTMLOListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>此元素支持<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

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

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

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

<h2 id="使用备注">使用备注</h2>

<p>通常，有序列表的条目会和它前面的编号<a href="/en-US/docs/Web/CSS/::marker">标记</a>一起显示，编号标记可以是数字或者字母。</p>

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

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

<ul>
 <li>烹饪食谱中的各个步骤</li>
 <li>指路时的各处转弯方向</li>
 <li>营养信息标签上 按含量排序的成分列表</li>
</ul>

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

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

<h2 id="示例">示例</h2>

<h3 id="简单示例">简单示例</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Fee&lt;/li&gt;
  &lt;li&gt;Fi&lt;/li&gt;
  &lt;li&gt;Fo&lt;/li&gt;
  &lt;li&gt;Fum&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>以上 HTML 输出如下：</p>

<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>

<h3 id="使用小写罗马数字编号">使用小写罗马数字编号</h3>

<pre class="brush: html">&lt;ol type="i"&gt;
  &lt;li&gt;Introduction&lt;/li&gt;
  &lt;li&gt;List of Greivances&lt;/li&gt;
  &lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt; </pre>

<p>以上 HTML 输出如下：</p>

<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p>

<h3 id="使用_start_属性">使用 <code>start</code> 属性</h3>

<pre class="brush: html">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;

&lt;ol start="4"&gt;
  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>以上 HTML 输出如下：</p>

<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p>

<h3 id="嵌套列表">嵌套列表</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
    &lt;ol&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>以上 HTML 输出如下：</p>

<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p>

<h3 id="嵌套有序列表和无序列表">嵌套有序列表和无序列表</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
    &lt;ul&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>以上 HTML 输出如下：</p>

<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change since last W3C snapshot, {{SpecName('HTML5 W3C')}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Added <code>reversed</code> and <code>start</code> attributed; un-deprecated <code>type</code></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Deprecated <code>compact</code> and <code>type</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("html.elements.ol")}}</p>

<h2 id="相关">相关</h2>

<ul>
 <li>其他列表相关的 HTML 元素: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} and the obsolete {{HTMLElement("dir")}};</li>
 <li>对 <code>&lt;ol&gt;</code> 元素常用的 CSS 属性：
  <ul>
   <li>the {{cssxref("list-style")}} 属性，有用的选择序数的显示方式，</li>
   <li><a href="/en-US/docs/CSS_Counters">CSS 计数器</a>, 用于处理复杂的嵌套列表，</li>
   <li>{{cssxref("line-height")}} 属性，可以模拟过时的 {{htmlattrxref("compact", "ol")}} 属性；</li>
   <li>{{cssxref("margin")}} 属性，用来控制列表的缩进。</li>
  </ul>
 </li>
</ul>