码农教程 - 一技在手,衣食无忧! tools

HTML <ol> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

两个不同的有序列表（第一个列表从 1 开始，第二个列表从 50 开始）：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<ol>标签定义了一个有序列表。有序列表可以是数字的或字母的。

这个<li>标签用于定义每个列表项。

提示：使用 CSS 来样式列表。

提示：对于无序列表，请使用<ul>标签。

浏览器支持

Element
<ol> Yes Yes Yes Yes Yes

属性

Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)
start number Specifies the start value of an ordered list
type 1
A
a
I
i		 Specifies the kind of marker to use in the list

全局属性

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

事件属性

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

更多示例

示例

设置不同的列表类型（使用CSS）：

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
亲自试一试 »

示例

显示 CSS 可用的所有不同列表类型：

<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>
亲自试一试 »

示例

减少和扩大列表中的行高（使用 CSS）：

<ol style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
亲自试一试 »

示例

将无序列表嵌套在有序列表中：

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>
亲自试一试 »

相关页面

HTML 教程：HTML 列表

HTML DOM 参考：奥尔对象

CSS 教程：CSS 列表

默认 CSS 设置

大多数浏览器都会显示<ol>具有以下默认值的元素：

示例

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
亲自试一试 »


❮上一节 完整的 HTML参考 下一节❯