direktori cari
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
watak

HTML <ol>元素代表项目,通常呈现为编号列表的有序列表。

内容类别

Flow content, and if the <ol> element's children include at least one <li> element, palpable content.

允许的内容

一个或多个<li>元素。这些<li>元素可以再包含嵌套的<ol><ul>元素。

标签省略

不允许,开始标签和结束标签都不能省略。

允许的父元素

Any element that accepts flow content.

允许的 ARIA 角色

directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation

DOM 接口

HTMLOListElement

属性

这个元素包含全局属性。

compact 这个布尔属性暗示列表应该以紧凑的风格呈现。该属性的解释取决于用户代理,并且不适用于所有浏览器。

注: 不要使用这个属性,这个属性已经过时:<ol>元素的样式应当使用CSS 来控制,想要获得和这个属性相似的效果,使用 CSS 属性 line-height并设置值为 80%

reversed HTML5 这个布尔属性规定了列表的条目采用倒序,即最不重要的条目放在列表第一个位置。

start HTML5 这是整数属性,规定了列表得条目序号的开始的值。尽管列表条目的序号可能是罗马字母顺序,如 XXXI, 或者字母,这个开始的顺序总是使用数字表示。比如想要元素序号从字母 “C” 开始,使用 <ol start="3">。

注:这个属性在 HTML4 中弃用,但是在 HTML5 中被重新引入。

type 指示编号类型:

  • 'a'表示小写字母编号,

  • 'A' 表示大写字母编号,

  • 'i' 表示小写罗马数字编号,

  • 'I' 表示大写罗马数字编号,

  • '1' 表示数字编号(默认值)。

这个类型集用于整个列表,除非type在封闭<li>元素中使用了不同的属性。

注意:此属性在 HTML4 中已被弃用,但在 HTML5 中重新引入。除非清单号码的价值很重要(例如,在法律或技术文件中的项目将通过其号码/字母引用),则list-style-type应该使用 CSS 属性。

使用说明

  • 通常,有序列表条目和它前面的编号一起显示,它的编号可以是任何形式,如数字、字母或者罗马数字,甚至可以是小子弹。而这种样式(小子弹)并没有在 HTML 页面内定义,而是在其关联的 CSS 中,使用了 list-style-type 属性。

  • HTML 并没有对 <ol><ul> 元素的深度和反复使用次数(overlap)作出限制。

  • <ol><ul> 都是列表项。它们的不同点在于 <ol> 元素里条目的顺序是有意义的。 对于该选择哪一个去使用下面有个建议:尝试去更改列表项的顺序,如果其含义改变了,那么应该使用 <ol> 元素,否则使用 <ul> 更合适。

示例

简单示例

<ol>  
    <li>first item</li>  
    <li>second item</li>  
    <li>third item</li>
</ol>

在 HTML 上方输出:

  1. first item

  2. second item

  3. third item

使用罗马数字类型

<ol type="i">  
    <li>foo</li>  
    <li>bar</li>  
    <li>spam</li>
</ol>

上面的 HTML 将输出

i. foo

ii. bar

iii. spam

使用start属性

<ol start="7">  
    <li>first item</li>  
    <li>second item</li>  
    <li>third item</li>
</ol>

在 HTML 上方输出:

  1. first item

  2. second item

  3. third item

嵌套列表

<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 上方输出:

  1. first item

  2. second item

    1. second item first subitem

    2. second item second subitem

    3. second item third subitem

  3. third item

嵌套 <ol> 和 <ul>

<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 上方输出:

  1. first item

  2. second item

    • second item first subitem

    • second item second subitem

    • second item third subitem

  3. third item

规范

Specification

Status

Comment

HTML Living StandardThe definition of '<ol>' in that specification.

Living Standard

No change since last W3C snapshot, HTML5.

HTML5The definition of 'HTMLOListElement' in that specification.

Recommendation

Added reversed and start attributed; un-deprecated type

HTML 4.01 SpecificationThe definition of '<ol>' in that specification.

Recommendation

Deprecated compact and type.

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

compact

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

reversed

18

?

18

No

(Yes)

5.2

start

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

type

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

compact

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

reversed

(Yes)

(Yes)

?

18

No

(Yes)

(Yes)

start

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

type

(Yes)

(Yes)

(Yes)

1

(Yes)

(Yes)

(Yes)

Artikel sebelumnya: Artikel seterusnya: