HTML <ol> 标签

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>ol 元素</h1>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
</body>
</html>

运行一下

浏览器支持

元素
<ol>	Yes	Yes	Yes	Yes	Yes

所有主流浏览器都支持 <ol> 标签。

定义和用法

<ol> 标签定义有序列表。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，ol 元素的 "compact"、"start" 以及 "type" 属性是不建议使用的。

在 XHTML 1.0 Strict DTD 中，不支持 ol 元素的 "compact"、"start" 以及 "type" 属性。

提示和注释：

提示：请使用 CSS 来定义列表的类型。

属性

HTML5 中的新属性。

属性	值	描述
compact	compact	HTML5 中不支持。HTML 4.01 中不建议使用。规定列表呈现的效果比正常情况更小巧。
reversed	reversed	规定列表顺序为降序。(9,8,7…)
start	number	规定有序列表的起始值。
type	1 A a I i	规定在列表中使用的标记类型。

全局属性

<ol> 标签支持 HTML 中的全局属性。

事件属性

<ol> 标签支持 HTML 中的事件属性。

更多实例

不同的 list-style-type 属性下的 ol 样式

<!DOCTYPE html>
<html>
<head>
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
</head>
<body>
<h1>所有的 list-style-type 属性下的 ol 样式</h1>
<ol class="a">
  <li>Armenian</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="b">
  <li>Cjk-ideographic</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="c">
  <li>Decimal</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="d">
  <li>Decimal-leading-zero</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="e">
  <li>Georgian</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="f">
  <li>Hebrew</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="g">
  <li>Hiragana</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="h">
  <li>Hiragana-iroha</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="i">
  <li>Katakana</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="j">
  <li>Katakana-iroha</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="k">
  <li>Lower-alpha</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="l">
  <li>Lower-greek</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="m">
  <li>Lower-latin</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="n">
  <li>Lower-roman</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="o">
  <li>Upper-alpha</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="p">
  <li>Upper-latin</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="q">
  <li>Upper-roman</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="r">
  <li>None</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
<ol class="s">
  <li>inherit</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>
</body>
</html>