Thẻ <ol> HTML


Thí dụ

Hai danh sách có thứ tự khác nhau (danh sách đầu tiên bắt đầu từ 1 và danh sách thứ hai bắt đầu từ 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>

Thêm các ví dụ "Hãy tự mình thử" bên dưới.


Định nghĩa và Cách sử dụng

Thẻ <ol>xác định một danh sách có thứ tự. Một danh sách có thứ tự có thể là số hoặc theo thứ tự bảng chữ cái.

Thẻ <li> được sử dụng để xác định từng mục danh sách.

Mẹo: Sử dụng CSS để tạo kiểu cho danh sách .

Mẹo: Đối với danh sách không có thứ tự, hãy sử dụng thẻ <ul>


Hỗ trợ trình duyệt

Element
<ol> Yes Yes Yes Yes Yes


Thuộc tính

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

Thuộc tính toàn cầu

Thẻ <ol>cũng hỗ trợ Thuộc tính chung trong HTML .


Thuộc tính sự kiện

Thẻ <ol>cũng hỗ trợ Thuộc tính sự kiện trong HTML .


Các ví dụ khác

Thí dụ

Đặt các loại danh sách khác nhau (với 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>

Thí dụ

Hiển thị tất cả các loại danh sách khác nhau có sẵn với 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>

Thí dụ

Giảm và mở rộng chiều cao dòng trong danh sách (với 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>

Thí dụ

Lồng một danh sách không có thứ tự bên trong một danh sách có thứ tự:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>

Các trang liên quan

Hướng dẫn HTML: Danh sách HTML

Tham chiếu DOM HTML: Đối tượng Ol

Hướng dẫn CSS: Danh sách tạo kiểu


Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị <ol>phần tử với các giá trị mặc định sau:

Thí dụ

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