STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách

    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh sách là những thẻ được sử dụng khá phổ biến trong một trang web ví dụ như tạo menu trang web, thể hiện danh sách có cùng tính chất.
    25/10/2015
    29/08/2020
    2 phút đọc
    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách

    Danh sách có thứ tự <ol>

    Danh sách có thứ tự (Ordered List) được định nghĩa bởi cặp thẻ đóng mở <ol>...</ol>. Mỗi phần tử trong <ol> được định nghĩa bởi thẻ <li></li> (List Item).

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Danh sách một số tác giả của STDIO</h3>
       <ol>
         <li>Nguyễn Nghĩa</li>
         <li>Hoàng Thái</li>
         <li>Phan Khôi Nguyên</li>
       </ol>
     </body>
    </html>
    Danh sách có thứ tự <ol>

    Mặc định các phần tử trong danh sách được sắp xếp theo số thứ tự tăng dần bắt đầu từ 1. Thẻ <ol> có một thuộc tính type giúp xác định danh sách sẽ được sắp xếp như thế nào. Chi tiết được mô tả ở bảng sau:

    Type Mô tả
    type="1" Các phần tử trong danh sách sẽ được sắp sếp theo thứ tự tăng dần (mặc định).
    type="A" Các phần tử trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết hoa.
    type="a" Các phần tử trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết thường.
    type="I" Các phần tử trong danh sách sẽ được sắp xếp theo kí tự La Mã viết in hoa.
    type="i"  Các phần tử trong danh sách sẽ được sắp xếp theo kí tự La Mã viết thường.

    Ví dụ với thuộc tính của <ol>type="a"

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Danh sách một số tác giả của STDIO</h3>
      <ol type="a">
         <li>Nguyễn Nghĩa</li>
         <li>Hoàng Thái</li>
         <li>Phan Khôi Nguyên</li>
       </ol>
     </body>
    </html>
    <ol> với type="a"

    Thử từng giá trị của type để hiểu rõ hơn.

    Danh sách không thứ tự <ul>

    Danh sách không có thứ tự (Unordered List) được định nghĩa bởi cặp thẻ đóng mở <ul></ul> với mỗi phần tử trong danh sách được định nghĩa bởi thẻ <li> (List Item).

    Ví dụ danh sách điện thoại

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Danh sách điện thoại</h3>
       <ul>
         <li>Apple iPhone X</li>
         <li>Google Pixel 4</li>
         <li>Samsung Gallaxy Note 10+</li>
       </ul>
     </body>
    </html>
    Danh sách không có thứ tự <ul>

    Danh sách lồng danh sách

    Mỗi <li> có thể chứa một danh sách <ol> hoặc <ul>.

    Ví dụ danh sách đào tạo cá nhânđào tạo doanh nghiệp.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <h3>Danh sách các đào tạo lập trình - STDIO Training</h3>
       <ol>
         <li>
           Đào tạo cá nhân
           <ul>
             <li>Front-end Web Cơ Bản và Nâng Cao với React.js</li>
             <li>Back-end với Node.js và MongoDB</li>
           </ul>
         </li>
         <li>
           Đào tạo doanh nghiệp
           <ul>
             <li>Advanced C++ Dành Cho Kỹ Sư và Doanh Nghiệp</li>
             <li>C# Advanced Windows Forms Application Cho Doanh Nghiệp</li>
             <li>Luyện - Thi Chứng Chỉ ISTQB</li>
           </ul>
         </li>
       </ol>
     </body>
    </html>
    Danh sách lồng danh sách với thẻ <ul> <ol> <li>

    Bài chung series

    0 Bình luận
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Đề xuất

    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...

    Khám phá

    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 7: Thẻ Table Trong HTML
    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    Định Dạng Ảnh Bitmap - Giới Thiệu và Các Thao Tác Cơ Bản
    Trong đời thường, bạn sẽ gặp các file ảnh có định dạng .PNG, .JPG, .TGA, ...
    Danh Sách Liên Kết Đơn
    Danh sách liên kết đơn với C++ cùng với code mẫu hiện thực các thao tác ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020