Thẻ <ol> HTML

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

<ol> Thẻ định nghĩa danh sách có thứ tự. Danh sách có thứ tự có thể là số hoặc chữ cái.

<li> Thẻ được sử dụng để định nghĩa mỗi mục danh sách.

Lưu ý:Hãy sử dụng CSS để đặt phong cách danh sách.

Lưu ý:Đối với danh sách không có thứ tự, hãy sử dụng <ul> thẻ.

Xin xem thêm:

Giáo trình HTML:Danh sách HTML

Tài liệu tham khảo HTML DOM:Đối tượng Ol

Giáo trình CSS:Đặt phong cách danh sách

Mô hình

Ví dụ 1

Hai danh sách có thứ tự khác nhau (danh sách đầu tiên bắt đầu từ 1, danh sách thứ hai bắt đầu từ 50):

<ol>
  <li>cà phê</li>
  <li>trà</li>
  <li>milk</li>
</ol>
<ol start="50">
  <li>cà phê</li>
  <li>trà</li>
  <li>milk</li>
</ol>

Thử ngay

Ví dụ 2

Đặt loại danh sách khác nhau (sử dụng CSS):

<ol style="list-style-type:upper-roman">
<li>cà phê</li>
<li>trà</li>
<li>milk</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>cà phê</li>
<li>trà</li>
<li>milk</li>
</ol>

Thử ngay

Ví dụ 3

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

ví dụ 4

Giảm và tăng chiều cao dòng trong danh sách (sử dụng CSS):

<ol style="line-height:80%">
  <li>cà phê</li>
  <li>trà</li>
  <li>milk</li>
</ol>
<ol style="line-height:180%">
  <li>cà phê</li>
  <li>trà</li>
  <li>milk</li>
</ol>

Thử ngay

ví dụ 5

Đặt danh sách không có thứ tự trong danh sách có thứ tự:

<ol>
  <li>cà phê</li>
  <li>trà</li>
    <ul>
      <li>long ching</li>
      <li>bảo bối</li>
    </ul>
  </li>
  <li>milk</li>
</ol>

Thử ngay

thuộc tính

thuộc tính giá trị mô tả
đảo ngược đảo ngược Định nghĩa danh sách cần được đảo ngược theo thứ tự (9,8,7...).
bắt đầu số Định nghĩa giá trị bắt đầu của danh sách có thứ tự.
loại
  • 1
  • A
  • a
  • I
  • i
 Định nghĩa loại ký hiệu cần sử dụng trong danh sách.

Thuộc tính toàn cục

<ol> Nhãn này cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<ol> Nhãn này cũng hỗ trợ Thuộc tính sự kiện trong HTML.

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

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

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

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ