💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Tạo danh sách
📌
Kết luận
Có thể tạo danh sách liệt kê bằng <ul> và <li>
📝 Mã thực tế tại đây
<ul>
<li>Táo</li>
<li>Cam</li>
<li>Nho</li>
</ul>Quan hệ cha con giữa ul và li
Danh sách được tạo ra bằng cách sử dụng một cặp thẻ đi cùng nhau.| Thẻ | Ý nghĩa | Vai trò |
|---|---|---|
<ul> | Danh sách không thứ tự (unordered list) | Khung bên ngoài của danh sách |
<li> | Mục trong danh sách (list item) | Từng mục nội dung |
<ul> là một chiếc "hộp" và <li> là các "đồ vật" bên trong. Thẻ <li> bắt buộc phải nằm bên trong thẻ <ul>.
Tại sao gọi là "không thứ tự"?
"Không thứ tự" có nghĩa là thứ tự của các mục không quan trọng. Ví dụ khi liệt kê các loại trái cây yêu thích, việc táo hay cam đứng trước đều không làm thay đổi ý nghĩa. Đó là lúc chúng ta dùng<ul>.
Ngược lại, khi thứ tự là quan trọng (ví dụ như các bước thực hiện), chúng ta sẽ dùng thẻ <ol> (ordered list - danh sách có thứ tự). Chúng tôi sẽ giải thích kỹ hơn ở các bài viết sau.
Các lỗi thường gặp
- Viết thẻ<li> bên ngoài thẻ <ul> → Sai quy tắc. Bắt buộc phải nằm trong <ul>.
- Chỉ viết <li> mà không có <ul> → Trình duyệt vẫn hiển thị nhưng bị coi là lỗi cú pháp.
- Quên thẻ đóng </li> → Thẻ đóng là bắt buộc để xác định kết thúc một mục.
Tổng kết
- Tạo danh sách liệt kê bằng cặp thẻ<ul> + <li>
- Thẻ <li> phải luôn nằm trong thẻ <ul>
- Dùng <ol> khi thứ tự các mục là quan trọng
Hãy thử trong phần bài tập
Hãy thử hiển thị danh sách 3 loại trái cây yêu thích của bạn nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy tạo một danh sách 3 loại trái cây bạn yêu thích bằng thẻ ul và li. Hãy thay thế phần ___ trong mã mẫu.
Gợi ý khi gặp khó khăn
ul là khung bên ngoài của danh sách, li là từng mục. Thẻ li phải nằm giữa <ul> và </ul>.