Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Cách sử dụng HTML Lists (<ul>, <ol>, <dl>)

Trong HTML có 3 loại phần tử danh sách:

  • Danh sách không thứ tự (phổ biến nhất)
  • Danh sách có thứ tự
  • Danh sách mô tả

Danh sách không thứ tự

Danh sách không thứ tự dùng <ul> và mỗi mục dùng <li>:

<ul> <li>Táo</li> <li>Chuối</li> <li>Cam</li> </ul>

Kết quả:

  • Táo
  • Chuối
  • Cam

Mặc định, danh sách không thứ tự có dấu chấm tròn, có thể tùy chỉnh CSS.

Danh sách có thứ tự

Danh sách có thứ tự dùng <ol> và mỗi mục <li>:

<ol> <li>Táo</li> <li>Chuối</li> <li>Cam</li> </ol>

Kết quả:

  1. Táo
  2. Chuối
  3. Cam

Mặc định, hiển thị số thứ tự, có thể tùy chỉnh CSS.

Danh sách mô tả

Danh sách mô tả hoạt động khác hẳn so với hai loại trên.

Cách hoạt động:

  • <dl> định nghĩa danh sách mô tả (phần tử cha).
  • <dt> định nghĩa thuật ngữ (tên) trong danh sách mô tả (con của <dl>).
  • <dd> cung cấp mô tả, định nghĩa, hoặc giá trị cho thuật ngữ <dt> ngay trước (cũng con của <dl>).

Ví dụ:

<dl> <dt>Voi châu Phi</dt> <dd>Động vật sống trên cạn lớn nhất thế giới.</dd> <dt>Hươu cao cổ</dt> <dd>Động vật cao nhất Trái Đất.</dd> <dt>Cá voi xanh</dt> <dd>Động vật lớn nhất từ trước tới nay (theo chúng ta biết).</dd> </dl>

Kết quả:

Voi châu Phi
Động vật sống trên cạn lớn nhất thế giới.
Hươu cao cổ
Động vật cao nhất Trái Đất.
Cá voi xanh
Động vật lớn nhất từ trước tới nay (theo chúng ta biết).

Danh sách mô tả hiếm dùng trong HTML hiện đại. Trường hợp thường thấy là tạo từ điển thuật ngữ hoặc hiển thị metadata — tuy nhiên có nhiều cách khác làm điều đó trong HTML.