Hướng dẫn chi tiết về HTML Lists cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của HTML lists. Là người dạy máy tính gần gũi của bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Lists giống như những người hùng vô danh trong thiết kế web - chúng mang lại sự ngăn nắp và giúp thông tin dễ tiêu hóa hơn. Vậy, hãy撸 lên tay áo và bắt đầu tạo list nào!

Lists trong HTML

Lists là một phần cơ bản của việc tổ chức thông tin trên các trang web. Chúng giúp cấu trúc nội dung theo cách dễ dàng cho người dùng đọc và hiểu. Trong HTML, chúng ta có ba loại list chính:

1. Unordered Lists (ul)
2. Ordered Lists (ol)
3. Description Lists (dl)

Hãy cùng tìm hiểu chi tiết từng loại này.

Unordered Lists

Unordered lists giống như danh sách mua sắm của bạn - thứ tự không quan trọng, nhưng các mục thì có. Chúng thường được hiển thị với các dấu chấm tròn.

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

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

• Táo
• Chuối
• Cherry

Thẻ <ul> tạo danh sách không theo thứ tự, trong khi mỗi thẻ <li> đại diện cho một mục danh sách.

Ordered Lists

Ordered lists giống như một bộ hướng dẫn - thứ tự rất quan trọng. Chúng thường được hiển thị với số.

<ol>
<li>Thức dậy</li>
<li>Chải răng</li>
<li>Ăn sáng</li>
</ol>

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

1. Thức dậy
2. Chải răng
3. Ăn sáng

Thẻ <ol> tạo danh sách theo thứ tự, và một lần nữa, các thẻ <li> được sử dụng cho mỗi mục.

Description Lists

Description lists giống như một từ điển - chúng ghép cặp các thuật ngữ với định nghĩa của chúng.

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

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

HTML : HyperText Markup Language

CSS : Cascading Style Sheets

Ở đây, <dl> tạo danh sách mô tả, <dt> xác định thuật ngữ, và <dd> cung cấp mô tả.

Ví dụ về HTML Lists

Bây giờ chúng ta đã覆盖 các kiến thức cơ bản, hãy cùng xem một số ví dụ để củng cố hiểu biết.

Danh sách công việc cần làm

<h2>Danh sách công việc cần làm của tôi</h2>
<ul>
<li>Hoàn thành hướng dẫn HTML</li>
<li>Thực hành lập trình</li>
<li>Nghỉ cà phê</li>
<li>Bắt đầu hướng dẫn CSS</li>
</ul>

Điều này tạo ra một danh sách công việc đơn giản sử dụng danh sách không theo thứ tự. Nó hoàn hảo cho khi bạn không cần một thứ tự cụ thể cho các nhiệm vụ của mình.

Hướng dẫn làm bánh mì sandwich PB&J

<h2>Làm thế nào để làm bánh mì sandwich PB&J</h2>
<ol>
<li>Lấy hai lát bánh mì</li>
<li>Phết bơ đậu phộng lên một lát</li>
<li>Phết jelly lên lát còn lại</li>
<li>Đặt hai lát lại với nhau</li>
<li>Thưởng thức bánh sandwich của bạn!</li>
</ol>

Danh sách này rất phù hợp cho các hướng dẫn từng bước nơi thứ tự rất quan trọng.

HTML Nested Lists

Đôi khi, bạn cần tạo danh sách trong danh sách. Đây là nơi các danh sách嵌套 rất hữu ích.

<h2>Đường dẫn học phát triển web</h2>
<ol>
<li>Học HTML
<ul>
<li>Thẻ</li>
<li>Thuộc tính</li>
<li>Danh sách</li>
</ul>
</li>
<li>Học CSS
<ul>
<li>Chọn</li>
<li>Thuộc tính</li>
<li>Box Model</li>
</ul>
</li>
<li>Học JavaScript</li>
</ol>

Điều này tạo ra một cấu trúc嵌套 nơi các chủ đề chính nằm trong danh sách theo thứ tự, và các chủ đề phụ nằm trong danh sách không theo thứ tự trong các mục danh sách chính.

Nhóm với thẻ <div>

Thẻ <div> là một容器 linh hoạt có thể được sử dụng để nhóm và định dạng các danh sách cùng với các yếu tố khác.

<div class="list-container">
<h3>Quả yêu thích của tôi</h3>
<ul>
<li>Dừa</li>
<li>Dâu tây</li>
<li>Dứa</li>
</ul>
</div>

Điều này nhóm tiêu đề và danh sách lại với nhau, giúp dễ dàng hơn trong việc định dạng hoặc manipulates chúng như một đơn vị.

Áp dụng CSS cho HTML Lists

CSS có thể thay đổi ngoại hình của danh sách của bạn. Dưới đây là một ví dụ nhanh:

<style>
ul.fancy {
list-style-type: square;
color: blue;
}
ol.fancy {
list-style-type: upper-roman;
color: green;
}
</style>

<ul class="fancy">
<li>Mục không theo thứ tự 1</li>
<li>Mục không theo thứ tự 2</li>
</ul>

<ol class="fancy">
<li>Mục theo thứ tự 1</li>
<li>Mục theo thứ tự 2</li>
</ol>

CSS này thay đổi kiểu chấm của danh sách không theo thứ tự thành hình vuông và danh sách theo thứ tự thành số La Mã viết hoa, trong khi cũng thay đổi màu sắc của chúng.

Loại dấu trong HTML Lists

HTML cung cấp nhiều loại dấu cho danh sách. Dưới đây là bảng tóm tắt:

Loại danh sách	Thuộc tính dấu	Mô tả
Unordered	disc	Mặc định. Hình tròn đầy
Unordered	circle	Hình tròn rỗng
Unordered	square	Hình vuông đầy
Ordered	decimal	Mặc định. Số (1, 2, 3)
Ordered	lower-alpha	Chữ cái viết thường (a, b, c)
Ordered	upper-alpha	Chữ cái viết hoa (A, B, C)
Ordered	lower-roman	Số La Mã viết thường (i, ii, iii)
Ordered	upper-roman	Số La Mã viết hoa (I, II, III)

Bạn có thể áp dụng chúng bằng CSS như sau:

<style>
ul.custom { list-style-type: square; }
ol.custom { list-style-type: lower-roman; }
</style>

<ul class="custom">
<li>Mục không theo thứ tự</li>
</ul>

<ol class="custom">
<li>Mục theo thứ tự</li>
</ol>

Và thế là xong, các bạn! Chúng ta đã cùng hành trình qua thế giới của HTML lists, từ cơ bản đến một số phong cách样式 hóa. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các loại danh sách và phong cách样式 hóa khác nhau. Ai biết được? Bạn có thể trở thành Michelangelo của HTML lists!

Chúc các bạn lập trình vui vẻ, và mong rằng danh sách của bạn luôn được inden chính xác!

Credits: Image by storyset