initial commit

1 files changed, 232 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/ol/index.html b/files/zh-cn/web/html/element/ol/index.html
new file mode 100644
index 0000000000..c5791a8322
--- /dev/null
+++ b/files/zh-cn/web/html/element/ol/index.html
@@ -0,0 +1,232 @@
+---
+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>