HTML - Danh sách không thứ tự

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của HTML danh sách không thứ tự. Là người thầy máy tính gần gũi của bạn, tôi rất vui được hướng dẫn các bạn trong hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ tạo danh sách như một chuyên gia!

HTML - Unordered Lists

Danh sách không thứ tự là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu danh sách không thứ tự là gì. Trong HTML, danh sách không thứ tự là một bộ sưu tập các mục liên quan mà không có thứ tự cụ thể. Hãy tưởng tượng như một danh sách mua sắm - bạn không nhất thiết phải mua bánh mì trước sữa, hoặc táo trước chuối. Thứ tự không quan trọng, nhưng chúng đều là một phần của cùng một danh sách.

Trong HTML, chúng ta tạo danh sách không thứ tự bằng thẻ <ul>, và mỗi mục trong danh sách được bao bọc bởi thẻ <li>. Hãy nhìn vào một ví dụ đơn giản:

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

Mã này sẽ hiển thị như sau:

Táo
Chuối
Cam

Thấy dễ dàng phải không? Trình duyệt sẽ tự động thêm dấu chấm vào mỗi mục. Nhưng nếu bạn muốn thay đổi những dấu chấm đó thì sao? Đó là lúc phần tiếp theo của chúng ta phát huy tác dụng!

Danh sách không thứ tự HTML - Chọn dấu mục danh sách

Bây giờ, hãy làm cho mọi thứ trở nên thú vị hơn một chút. HTML cho phép chúng ta thay đổi phong cách của dấu chấm, hoặc như chúng ta gọi trong ngành, "dấu mục danh sách". Chúng ta có ba tùy chọn chính:

disc (mặc định)
circle
square

Để thay đổi dấu, chúng ta sử dụng thuộc tính type trong thẻ <ul>. Hãy xem cách này hoạt động:

<ul type="disc">
<li>Danh sách này sử dụng dấu disc mặc định</li>
</ul>

<ul type="circle">
<li>Danh sách này sử dụng dấu tròn</li>
</ul>

<ul type="square">
<li>Danh sách này sử dụng dấu vuông</li>
</ul>

Mã này sẽ hiển thị như sau:

• Danh sách này sử dụng dấu disc mặc định

○ Danh sách này sử dụng dấu tròn

■ Danh sách này sử dụng dấu vuông

Đẹp phải không? Đó như một cuộc làm mới nhỏ cho danh sách của bạn!

Ví dụ về danh sách không thứ tự

Bây giờ chúng ta đã hiểu được cơ bản, hãy nhìn vào một số ví dụ phức tạp hơn. Nhớ rằng, thực hành là chìa khóa để thành thạo, vì vậy hãy thoải mái sao chép các ví dụ này và thử chúng ra!

Danh sách không thứ tự嵌套

Đôi khi, bạn có thể muốn tạo một danh sách trong danh sách. Chúng ta gọi đó là danh sách嵌套. Dưới đây là cách bạn có thể làm điều đó:

<ul>
<li>Cà phê</li>
<li>Trà
<ul>
<li>Trà đen</li>
<li>Trà xanh</li>
<li>Trà thảo dược</li>
</ul>
</li>
<li>Sữa</li>
</ul>

Điều này sẽ hiển thị như sau:

Cà phê
Trà
Trà đen
Trà xanh
Trà thảo dược
Sữa

Chú ý cách danh sách嵌套 được thụt vào? Đó là cách HTML chỉ ra rằng các mục này là các phân mục của "Trà".

Danh sách không thứ tự với liên kết

Danh sách không chỉ dành cho văn bản đơn giản. Bạn có thể bao gồm các phần tử HTML khác trong mục danh sách. Ví dụ, hãy tạo một danh sách các trang web yêu thích:

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Điều này sẽ tạo ra một danh sách các liên kết có thể nhấp:

Danh sách không thứ tự với hình ảnh

Hãy làm cho danh sách của bạn trở nên lung linh hơn bằng cách thêm hình ảnh:

<ul>
<li><img src="apple.jpg" alt="Táo"> Táo</li>
<li><img src="banana.jpg" alt="Chuối"> Chuối</li>
<li><img src="orange.jpg" alt="Cam"> Cam</li>
</ul>

Mã này sẽ hiển thị một danh sách với hình ảnh nhỏ bên cạnh tên mỗi loại quả. Đây là một cách tuyệt vời để làm cho danh sách của bạn trở nên trực quan hơn!

Tóm tắt các phương pháp danh sách không thứ tự

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã học để tạo và tùy chỉnh danh sách không thứ tự:

Phương pháp	Cú pháp	Mô tả
Danh sách không thứ tự cơ bản	`<ul><li>Mục</li></ul>`	Tạo một danh sách không thứ tự cơ bản
Thay đổi dấu mục danh sách	`<ul type="circle">`	Thay đổi phong cách dấu mục danh sách
Danh sách嵌套	`<ul><li><ul><li>Mục嵌套</li></ul></li></ul>`	Tạo một danh sách trong danh sách
Danh sách với liên kết	`<ul><li><a href="url">Liên kết</a></li></ul>`	Tạo một danh sách các liên kết có thể nhấp
Danh sách với hình ảnh	`<ul><li><img src="image.jpg"> Mục</li></ul>`	Thêm hình ảnh vào mục danh sách

Và thế là bạn đã có tất cả các công cụ cần thiết để tạo và tùy chỉnh danh sách không thứ tự trong HTML. Nhớ rằng, chìa khóa để thành thạo là thực hành. Vậy hãy thử nghiệm với các ví dụ này và đừng ngại sáng tạo!

Khi kết thúc, tôi nhớ đến một câu đùa về lập trình: Tại sao nhà phát triển bỏ việc? Vì anh ấy không có mảng! ? Đừng lo lắng, chúng ta sẽ học về mảng vào một ngày khác. Hiện tại, hãy tiếp tục liệt kê và lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Danh sách

Hướng Dẫn Tiếp Theo:

HTML - Danh sách có thứ tự