HTML - Danh sách có thứ tự: Hướng dẫn cho người mới bắt đầu

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 thú vị của danh sách có thứ tự trong HTML. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo danh sách có thứ tự như một chuyên gia!

Danh sách có thứ tự là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ danh sách có thứ tự là gì. Hãy tưởng tượng bạn đang viết các bước để làm một sandwich. Bạn không muốn làm rối loạn thứ tự, phải không? Đó là khi danh sách có thứ tự phát huy tác dụng. Chúng hoàn hảo cho bất kỳ nội dung nào cần phải theo một 序列 cụ thể.

Cú pháp: Những viên gạch xây dựng của danh sách có thứ tự

Bây giờ, hãy cùng làm quen với một chút mã. Dưới đây là cú pháp cơ bản để tạo một danh sách có thứ tự trong HTML:

<ol>
<li>Item đầu tiên</li>
<li>Item thứ hai</li>
<li>Item thứ ba</li>
</ol>

Hãy phân tích nó:

• <ol> có nghĩa là "danh sách có thứ tự". Nó giống như một容器 chứa tất cả các mục trong danh sách của bạn.
• <li> có nghĩa là "mục danh sách". Mỗi thẻ <li> đại diện cho một mục trong danh sách của bạn.

Khi bạn chạy mã này, nó sẽ trông etwas như thế này:

1. Item đầu tiên
2. Item thứ hai
3. Item thứ ba

Đẹp phải không? Trình duyệt sẽ tự động đánh số các mục cho bạn!

Định nghĩa danh sách có thứ tự: Thể hiện sự sáng tạo

Bây giờ chúng ta đã nắm vững cơ bản, hãy làm cho mọi thứ trở nên thú vị hơn một chút. HTML cung cấp một số thuộc tính hữu ích để tùy chỉnh danh sách có thứ tự của bạn.

Thuộc tính 'start'

Nếu bạn muốn danh sách của mình bắt đầu với một số khác ngoài 1, đó là lúc thuộc tính 'start' được sử dụng:

<ol start="5">
<li>Đây sẽ là mục số 5</li>
<li>Đây sẽ là mục số 6</li>
<li>Đây sẽ là mục số 7</li>
</ol>

Nó sẽ hiển thị như sau:

5. Đây sẽ là mục số 5
6. Đây sẽ là mục số 6
7. Đây sẽ là mục số 7

Thuộc tính 'reversed'

Muốn đếm ngược? Hãy thử thuộc tính 'reversed':

<ol start="5" reversed>
<li>Đây sẽ là mục số 5</li>
<li>Đây sẽ là mục số 4</li>
<li>Đây sẽ là mục số 3</li>
</ol>

Nó sẽ hiển thị như sau:

5. Đây sẽ là mục số 5
6. Đây sẽ là mục số 4
7. Đây sẽ là mục số 3

Ví dụ về danh sách có thứ tự trong HTML: Kết hợp tất cả

Hãy nhìn vào một ví dụ phức tạp hơn. Giả sử chúng ta đang tạo công thức cho sandwich mà chúng ta đã đề cập trước đó:

<h2>Cách làm sandwich PB&J</h2>
<ol>
<li>Chuẩn bị nguyên liệu:
<ul>
<li>2 lát bánh mì</li>
<li>Bơ đậu phộng</li>
<li>Siro</li>
</ul>
</li>
<li>Phết bơ đậu phộng lên một lát bánh mì</li>
<li>Phết siro lên lát bánh mì còn lại</li>
<li>Đặt hai lát bánh mì lại với nhau</li>
<li>Thưởng thức sandwich của bạn!</li>
</ol>

Nó sẽ hiển thị như sau:

Cách làm sandwich PB&J

1. Chuẩn bị nguyên liệu:

• 2 lát bánh mì
• Bơ đậu phộng
• Siro

2. Phết bơ đậu phộng lên một lát bánh mì
3. Phết siro lên lát bánh mì còn lại
4. Đặt hai lát bánh mì lại với nhau
5. Thưởng thức sandwich của bạn!

Chú ý rằng chúng ta đã nhúng một danh sách không có thứ tự (<ul>) trong danh sách có thứ tự của chúng ta? Đó là vẻ đẹp của HTML - bạn có thể kết hợp và tạo ra các cấu trúc phức tạp!

Thuộc tính 'type' của danh sách có thứ tự: Thay đổi phong cách đánh số

Bây giờ, hãy nói về thuộc tính 'type'. Thuộc tính nhỏ bé này cho phép bạn thay đổi phong cách đánh số của danh sách. Dưới đây là các tùy chọn:

Giá trị Type	Mô tả
1	Mặc định. Số thập phân (1, 2, 3, 4)
A	Chữ cái viết hoa (A, B, C, D)
a	Chữ cái viết thường (a, b, c, d)
I	Số La Mã viết hoa (I, II, III, IV)
i	Số La Mã viết thường (i, ii, iii, iv)

Hãy xem chúng trong hành động:

<ol type="A">
<li>Đây sẽ là A</li>
<li>Đây sẽ là B</li>
<li>Đây sẽ là C</li>
</ol>

<ol type="i">
<li>Đây sẽ là i</li>
<li>Đây sẽ là ii</li>
<li>Đây sẽ là iii</li>
</ol>

Nó sẽ hiển thị như sau:

A. Đây sẽ là A B. Đây sẽ là B C. Đây sẽ là C

i. Đây sẽ là i ii. Đây sẽ là ii iii. Đây sẽ là iii

Đó có phải là điều tuyệt vời không? Bạn có thể sử dụng các phong cách khác nhau để phù hợp với phong cách và mục đích của nội dung của bạn.

Kết luận

Và thế là bạn đã có nó, các bạn! Bạn vừa bước vào thế giới của danh sách có thứ tự trong HTML. Nhớ rằng, chìa khóa để thành thạo điều này (hoặc bất kỳ khái niệm mã hóa nào khác) là thực hành. Hãy thử tạo các danh sách khác nhau, nhúng chúng vào nhau, chơi với các thuộc tính. Càng thực hành, bạn sẽ càng thoải mái hơn.

Trong những năm dạy học của tôi, tôi đã thấy rằng sinh viên tiếp cận mã hóa với sự tò mò và sự sẵn sàng mắc lỗi học nhanh nhất. Vậy đừng sợ làm hỏng thứ gì - thường đó là cách chúng ta học hỏi nhiều nhất!

Tiếp tục mã hóa, tiếp tục học hỏi, và trước khi bạn biết, bạn sẽ tạo ra các trang web đẹp và có cấu trúc tốt. Đến gặp lại lần sau, chúc các bạn vui vẻ với danh sách của mình!

Credits: Image by storyset