Các Thẻ Danh Sách Có Thứ Tự Và Không Có Thứ Tự - Học Web Chuẩn

Trang chủ » Thẻ Li Trong Html » Các Thẻ Danh Sách Có Thứ Tự Và Không Có Thứ Tự - Học Web Chuẩn

Có thể bạn quan tâm

Các thẻ danh sách có thứ tự và không có thứ tự
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học HTML/HTML5
  • Các thẻ danh sách có thứ tự và không có thứ tự

Danh sách có thứ tự và không có thứ tự

Định nghĩa danh sách trong HTML/HTML5 có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/HTML5.

Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

  • <ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự.
  • <li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách có thứ tự:

  1. 1. Cá lóc kho tiêu
  2. 2. Cá rô kho tộ
  3. 3. Cá thu chiên xoài bằm
  4. 4. Cá điêu hồng nấu ngót

Hoặc:

  1. a) Học HTML
  2. b) Học XHTML
  3. c) Học HTML5
  4. d) Học CSS2
  5. e) Học CSS3

HTML viết

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <ol> <li>Cá lóc kho tiêu</li> <li>Cá rô kho tộ</li> <li>Cá thu chiên xoài bằm</li> <li>Cá điêu hồng nấu ngót</li> </ol> </body> </html>

Hiển thị trình duyệt:

  1. 1. Cá lóc kho tiêu
  2. 2. Cá rô kho tộ
  3. 3. Cá thu chiên xoài bằm
  4. 4. Cá điêu hồng nấu ngót

Số thứ tự của danh sách trình duyệt sẽ tự thêm vào.

Xem thêm ví dụ

Danh sách không có thứ tự

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

  • <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự
  • <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách không có thứ tự:

  • Trang chủ
  • Giới thiệu
  • Sản phẩm
  • Dịch vụ
  • Liên hệ

Hoặc:

  • Học HTML
  • Học XHTML
  • Học HTML5
  • Học CSS2
  • Học CSS3

HTML viết

<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <ul> <li>Trang chủ</li> <li>Giới thiệu</li> <li>Sản phẩm</li> <li>Dịch vụ</li> <li>Liên hệ</li> </ul> </body> </html>

Hiển thị trình duyệt:

  • Trang chủ
  • Giới thiệu
  • Sản phẩm
  • Dịch vụ
  • Liên hệ

Xem thêm ví dụ

Cấu trúc thẻ danh sách có thứ tự và không có thứ tự

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.

Cấu trúc phải theo các nguyên tắc sau đây:

  • Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:

    • Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
    • Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.
  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.
  • Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/HTML5, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nên chứa như: <style></style>, <script></script>.

<ol> <li></li> <li></li> </ol>

<ul> <li></li> <li></li> </ul>

  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:

<ol> <h2></h2> <li></li> <li></li> </ol>

<ul> <li></li> <p></p> <li></li> </ul>

<ul> <li></li> <div> <li></li> </div> </ul>

Một số cấu trúc của danh sách có thứ tự và không có thứ tự

Cấu trúc <ol></ol> lồng bên trong <ol></ol>

HTML viết

<ol> <li><p>Cơm trưa</p> <ol> <li>Cơm chiên hải sản</li> <li>Cơm sườn non nấu cam</li> <li>Cơm canh chua cá lóc</li> </ol> </li> <li><p>Tráng miệng trái cây</p> <ol> <li>Nho tươi</li> <li>Chuối</li> <li>Mận</li> </ol> </li> </ol>

Hiển thị trình duyệt:

  1. Cơm trưa

    1. Cơm chiên hải sản
    2. Cơm sườn non nấu cam
    3. Cơm canh chua cá lóc

  2. Tráng miệng trái cây

    1. Nho tươi
    2. Chuối
    3. Mận

Cấu trúc <ul></ul> lồng bên trong <ul></ul>

HTML viết

<ul> <li><p>Cơm trưa</p> <ul> <li>Cơm chiên hải sản</li> <li>Cơm sườn non nấu cam</li> <li>Cơm canh chua cá lóc</li> </ul> </li> <li><p>Tráng miệng trái cây</p> <ul> <li>Nho tươi</li> <li>Chuối</li> <li>Mận</li> </ul> </li> </ul>

Hiển thị trình duyệt:

  • Cơm trưa

    • Cơm chiên hải sản
    • Cơm sườn non nấu cam
    • Cơm canh chua cá lóc

  • Tráng miệng trái cây

    • Nho tươi
    • Chuối
    • Mận

Cấu trúc <ul></ul> lồng bên trong <ol></ol>

HTML viết

<ol> <li><p>Cơm trưa</p> <ul> <li>Cơm chiên hải sản</li> <li>Cơm sườn non nấu cam</li> <li>Cơm canh chua cá lóc</li> </ul> </li> <li><p>Tráng miệng trái cây</p> <ul> <li>Nho tươi</li> <li>Chuối</li> <li>Mận</li> </ul> </li> </ol>

Hiển thị trình duyệt:

  1. Cơm trưa

    • Cơm chiên hải sản
    • Cơm sườn non nấu cam
    • Cơm canh chua cá lóc

  2. Tráng miệng trái cây

    • Nho tươi
    • Chuối
    • Mận

Vấn đề đặt ra là làm sao ta có thể thay đổi dạng của các số, VD đổi thứ tự 1,2,3,4,... sang I,II,III,IV,... hay đổi hình dạng tròn thành hình vuông,... những vấn đề này chúng ta có thể tham khảo thêm bên phần list-sytle của CSS.

Tham khảo thêm

  • <!Doctype>
  • <html></html>
  • <head></head>
  • <body></body>
  • <hx></hx>
  • <p></p>
  • <div></div>
  • <dl></dl>
  • <dt></dt>
  • <dd></dd>
  • <ul></ul>
  • <ol></ol>
  • <li></li>

Thẻ xác định danh sách

Thẻ <nav>

HỌC WEB CHUẨN

HƯỚNG DẪN HỌC

Hướng dẫn học XHTML & HTML5

  • Hướng dẫn học XHTML & HTML5
  • Giới thiệu về HTML
  • Cấu trúc cơ bản của HTML

  • Nhóm các thẻ block

    • <h1> - <h2> - <h3> - <h4> - <h5> - <h6>
    • <p>
    • <div>
    • <dl> - <dt> - <dd>
    • <ul> - <ol> - <li>
    • <nav>
    • <header>
    • <section>
    • <article>
    • <aside>
    • <footer>
    • <figure> - <figcaption>

  • Nhóm các thẻ inline

    • <a>
    • <img />
    • <br />
    • <span>
    • <strong>
    • <em>
  • Xem thêm ví dụ về HTML
  • Bài tập HTML & HTML5 cơ bản
  • Bài tập HTML & HTML5 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Thẻ Li Trong Html