From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/ol/index.html | 232 +++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 files/zh-cn/web/html/element/ol/index.html (limited to 'files/zh-cn/web/html/element/ol/index.html') 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:
    +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")}}

    + +

    相关

    + + -- cgit v1.2.3-54-g00ecf