HTML/CSS | Thẻ danh sách - Tóm tắt chương

Học HTML, CSS từ Zero Tới Hero

Tóm tắt

  • Thẻ ul (unordered list, ý nghĩa: “danh sách không có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó không quan trọng.
  • Thẻ ol (ordered list, ý nghĩa: “danh sách có thứ tự”) dùng để thể hiện một danh sách mà số thứ tự trong đó mang lại ý nghĩa, hoặc có quan trọng số thứ tự.
  • Thẻ li (list item, ý nghĩa: “mục trong danh sách”) được dùng làm thẻ con trong thẻ <ul> hoặc <ol>.
  • CSS có thể thay đổi styles của thẻ <ul> và <ol> từ danh sách “có thứ tự” có thể trở thành “không có thứ tự” và ngược lại. Chúng ta phải cân nhắc nên dùng thẻ nào bởi vì yếu tố ngữ nghĩa.
  • Những tình huống sử dụng danh sách lồng nhau thường gặp: menu đa cấpdàn ýmục lục, v.v.
  • Các danh sách có thể lồng nhau kết hợp nhiều cấp. Tuy nhiên, để đảm bảo mặt thẩm mỹ và giúp nội dung dễ đọc bạn chỉ nên dùng từ 1 - 3 cấp.
  • Các loại danh sách có thể kết hợp với nhau theo nhiều cách như: ul với ulul với ol, v.v. Để quyết định dùng loại danh sách nào chúng ta sẽ dựa vào ý nghĩa nội dung mà chúng thể hiện.
  • Khi sử dụng danh sách lồng nhau cần đảm bảo danh sách con luôn nằm trong một thẻ <li>.
  • Mặc định các trình duyệt sẽ thêm một khoảng đệm vào bên trái các danh sách.
    • Điều này có tác dụng giúp cho danh sách được hiển thị thụt vào một chút so với nội dung các đoạn văn.
    • Trong trường hợp các thẻ danh sách lồng nhau, tính chất này giúp các danh sách con được thụt lề hơn so với danh sách cha.
  • Cũng giống như thẻ <p>, trình duyệt cũng mặc định thêm vào trên và dưới thẻ danh sách một khoảng trống (margin trong CSS). Bạn sẽ thấy rõ điều này khi để từ 2 danh sách nối đuôi nhau.
  • Marker là điểm dùng để đánh dấu các đầu mục trong danh sách, chúng ta có thể thay đổi được styles này trong CSS.

Nhận xét

Mới hơn Cũ hơn