[Học HTML] Tạo danh sách (List) [NEW]

Phần tử danh sách được sử dụng rất thường xuyên trong tài liệu web HTML. Trong một trang web, người ta thường sử dụng nhiều phần tử danh sách, chẳng hạn như menu, danh sách thông tin nào đó,… tất cả đều được tạo bởi các thẻ tạo danh sách trong HTML.

Có ba loại danh sách trong HTML: danh sách có thứ tự, danh sách không có thứ tự và danh sách mô tả. Đặc biệt:

  • Loại sắp xếp (Danh sách được yêu cầu): Hiển thị danh sách có các mục con được sắp xếp theo thứ tự số hoặc theo bảng chữ cái.
  • Loại không được phân loại (Danh sách không có thứ tự): Một kiểu hiển thị danh sách mà các mục con sẽ không được sắp xếp mà chỉ được đánh dấu bằng một ký tự đặc biệt.
  • Loại mô tả (Danh sách mô tả): Hiển thị danh sách mà các mục con sẽ không được sắp xếp theo thứ tự, nhưng sẽ kèm theo mô tả.

Dưới đây là hình ảnh về sự khác biệt giữa ba kiểu danh sách được W3School mô tả:

[Học HTML] Tạo danh sách (List) [NEW]

Danh sách được yêu cầu

Để khai báo danh sách có kiểu đã sắp xếp, bạn phải bắt đầu bằng một cặp thẻ <ol> </ol>. Bên trong cặp thẻ này sẽ là danh sách các mục con, mỗi mục sẽ được đặt trong một cặp thẻ <li> </li>xem ví dụ bên dưới.

Xem ví dụ: http://codepen.io/thachpham92/pen/QwPewe/

Thẻ <ol> cũng hỗ trợ thêm một thuộc tính có têntype, thuộc tính này dành cho bạn để thiết lập sắp xếp các mục con bên trong danh sách. Giá trị của thuộc tính type là 1, i, I, a, A.

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

Giống như Danh sách có thứ tự, loại Danh sách không có thứ tự sẽ bắt đầu bằng một cặp thẻ <ul> </ul> và bên trong nó, các mục con sẽ được khai báo với cặp thẻ <li> </li>.

Xem ví dụ: http://codepen.io/thachpham92/pen/wBZVvO/

Bạn cũng có thể thay đổi kiểu hiển thị của thẻ <ol> bằng cách thêm thuộc tính style với thuộc tính CSS là list-style-type và giá trị làdisc,square, circlenone.

Danh sách mô tả

Với loại danh sách này, cách viết thẻ sẽ khác một chút, đó là nó sẽ bắt đầu danh sách bằng một cặp thẻ. <dl> </dl>trong đó tên của mỗi mục con được khai báo bằng một cặp thẻ <dt> </dt> và mô tả cho tiểu mục sẽ được khai báo bằng một cặp thẻ <dd> </dd>.

Xem ví dụ: http://codepen.io/thachpham92/pen/zxXgxo/

Danh sách xếp chồng

Trong HTML, bạn có thể xếp một danh sách thành nhiều lớp bằng cách lồng một danh sách khác vào một cặp thẻ <li> </li> của mục phụ mà bạn muốn thêm tầng, như ví dụ bên dưới.

Xem ví dụ: http://codepen.io/thachpham92/pen/ogOKgo/

Phần kết

Quá dễ dàng để khai báo một phần tử danh sách trong HTML phải không? HTML luôn dễ dàng như vậy. Nào, chỉ cần một vài yếu tố quan trọng nữa và bạn sẽ trở thành một chuyên gia HTML.

4.7 / 5 – (3 phiếu bầu)

Tiếp tục đọc trong bộ truyện