Xem thêm

Thẻ ul li css: Hướng dẫn tạo danh sách đơn giản nhất trong HTML

Huy Erick
Danh sách là một khái niệm không còn xa lạ với bất kỳ ai. Chúng ta có thể thấy danh sách ở khắp mọi nơi trong cuộc sống hàng ngày, từ danh sách sinh viên,...

Danh sách là một khái niệm không còn xa lạ với bất kỳ ai. Chúng ta có thể thấy danh sách ở khắp mọi nơi trong cuộc sống hàng ngày, từ danh sách sinh viên, danh sách sản phẩm cho đến danh sách các công ty công nghệ... Đơn giản nhất, danh sách là một tập hợp nhiều danh mục, được đánh số thứ tự bằng các chỉ mục.

Khi sử dụng thẻ danh sách trong HTML, bạn đang tạo một liên kết giữa các phần tử trong danh sách, giúp người dùng hiểu được sự liên quan giữa chúng.

Các loại danh sách trong HTML

Trong HTML, danh sách được chia thành hai loại chính: danh sách có thứ tự và danh sách không có thứ tự.

Danh sách có thứ tự

Danh sách có thứ tự trong HTML được sắp xếp theo thứ tự tăng dần của các chỉ mục. Ví dụ dưới đây cho thấy danh sách có thứ tự:

Danh sách có thứ tự

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

Danh sách không có thứ tự trong HTML sử dụng chung một kiểu ký tự cho tất cả các chỉ mục danh mục, thay vì sử dụng thứ tự. Dưới đây là ví dụ về danh sách không có thứ tự:

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

Hướng dẫn cách tạo danh sách trong HTML bằng thẻ ul li css

Ở phần này, chúng ta sẽ hướng dẫn cách tạo danh sách trong HTML bằng cách sử dụng thẻ style list.

Tạo danh sách có thứ tự

Để tạo danh sách có thứ tự, bạn cần sử dụng cú pháp sau:

`

  1. Chỉ mục 1
  2. Chỉ mục 2
  3. Chỉ mục 3
`

Ví dụ sau đây minh họa cách tạo danh sách có thứ tự:

  1. Chỉ mục 1
  2. Chỉ mục 2
  3. Chỉ mục 3

Kết quả thu được:

Danh sách có thứ tự

Một số thuộc tính mà bạn có thể sử dụng với thẻ

    bao gồm:

    • Type: tùy chỉnh kiểu chỉ mục của danh mục (ví dụ: 1, 2, 3...; a, b, c...; I, II, III...)
    • Start: xác định thứ tự bắt đầu của danh mục
    • Reversed: đảo ngược thứ tự chỉ mục của danh mục

    Tạo danh sách không có thứ tự

    Để tạo danh sách không có thứ tự, bạn có thể sử dụng cú pháp sau với thẻ

      :

      `

      • Mục 1
      • Mục 2
      • Mục 3
      `

      Ví dụ sau đây cho thấy cách tạo danh sách không có thứ tự:

      • Mục 1
      • Mục 2
      • Mục 3

      Kết quả:

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

      Khi tạo danh sách không có thứ tự, mặc định là sử dụng dấu chấm tròn màu đen làm chỉ mục của danh mục. Bạn có thể thay đổi kiểu chỉ mục bằng thuộc tính type với các giá trị như:

      • Disc: dấu chấm tròn màu đen (kiểu mặc định)
      • Circle: dấu chấm tròn màu trắng với viền màu đen
      • Square: ô vuông màu đen
      • None: không hiển thị chỉ mục

      Danh sách hai cấp

      Danh sách hai cấp là khái niệm mở rộng từ danh sách thông thường. Khi bạn có một danh sách và bên trong danh sách đó lại có một danh sách khác, thì đó là danh sách hai cấp.

      Ví dụ dưới đây cho thấy danh sách hai cấp. Trong danh mục "CSS", chúng ta có hai danh mục con là "Ajax" và "JQuery":

      Danh mục hai cấp

      Để tạo danh sách hai cấp, bạn chỉ cần chèn cú pháp danh sách cấp hai vào vị trí phù hợp trong danh sách cấp một. Ví dụ:

      1. Mục 1
        1. Mục con 1
        2. Mục con 2
      2. Mục 2

      Kết quả:

      Danh sách hai cấp

      Tương tự, bạn có thể tạo danh sách có nhiều cấp bằng cách sử dụng thẻ ul li css. Cú pháp để tạo danh sách nhiều cấp như sau:

      1. Mục cấp 1
        1. Mục cấp 1.1
        2. Mục cấp 1.2
        3. Mục cấp 1.3
      2. Mục cấp 2

      Kết quả:

      Danh sách nhiều cấp

      Danh sách nằm ngang

      Để tạo một danh sách nằm ngang, bạn có thể sử dụng cú pháp sau:

      • Mục 1
      • Mục 2
      • Mục 3

      Kết quả:

      Danh sách nằm ngang

      Lời kết

      Với thẻ ul li css, chúng ta đã tìm hiểu cách tạo danh sách trong HTML. Hy vọng bài viết này sẽ giúp bạn nắm vững kiến thức và kinh nghiệm áp dụng thẻ ul li css trong lập trình website.

      Nguồn ảnh: ICANTECH

1