Thẻ ol trong HTML dùng để hiện một danh sách với các con số, con chữ làm số thứ tự ở đầu thẻ li, áp dụng cho các danh sách cần đánh số thứ tự, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ ol trong HTML

Chức năng của Thẻ ol trong HTML

Thẻ ol trong HTML dùng để hiện một danh sách với các con số, con chữ làm số thứ tự ở đầu thẻ li, áp dụng cho các danh sách cần đánh số thứ tự.

Code Thẻ ol trong HTML

Thẻ ol mặc định trong HTML

<!--Mặc định sử dụng css list-style-type là decimal-->
<ol>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>
<!--Chọn con số bắt đầu-->
<ol start="21">
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

Chạy Thử

Css list-style-type khác cho thẻ ol trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Css list-style-type khác cho thẻ ol trong HTML</title>
<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>Css list-style-type khác cho thẻ ol trong HTML</h1>
<ol class="a">
  <li>Armenian type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="b">
  <li>Cjk-ideographic type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="c">
  <li>Decimal type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="d">
  <li>Decimal-leading-zero type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="e">
  <li>Georgian type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="f">
  <li>Hebrew type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="g">
  <li>Hiragana type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="h">
  <li>Hiragana-iroha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="i">
  <li>Katakana type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="j">
  <li>Katakana-iroha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="k">
  <li>Lower-alpha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="l">
  <li>Lower-greek type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="m">
  <li>Lower-latin type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="n">
  <li>Lower-roman type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="o">
  <li>Upper-alpha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="p">
  <li>Upper-latin type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="q">
  <li>Upper-roman type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="r">
  <li>None type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="s">
  <li>inherit type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ ol trong HTML.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thẻ ol trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn