Thẻ danh sách HTML được sử dụng để tạo danh sách trên trang web. Nó có thể tạo ba loại danh sách:danh sách có thứ tự, danh sách không có thứ tự và danh sách mô tả.
Khi bạn đang xây dựng một trang web, bạn có thể muốn trình bày thông tin dưới dạng một danh sách được định dạng tốt. Ví dụ:bạn có thể có một danh sách tên sinh viên mà bạn muốn xuất hiện trong biểu mẫu danh sách hoặc bạn có thể có một loạt các bài đăng trên blog mà bạn muốn định dạng dưới dạng danh sách.
Trong HTML , có một chức năng tích hợp cho phép bạn tạo danh sách. Trong hướng dẫn này, chúng tôi sẽ đề cập đến HTML danh sách các loại và cách triển khai chúng vào một trang web.
Các loại danh sách HTML
Có ba loại danh sách trong HTML và mỗi cái có một mục đích và mã cụ thể. Những điều này như sau:
-
Ordered list:Được sử dụng để tạo danh sách các mục theo một thứ tự cụ thể. -
Unordered list:Được sử dụng để tạo danh sách các mặt hàng không có thứ tự. -
Description list:Được sử dụng để tạo danh sách các mục và mô tả.
Danh sách có thể xuất hiện trong bất kỳ phần nào của trang web, cho dù bạn đặt chúng bên trong văn bản, sau dấu ngắt dòng hay thậm chí bên trong một danh sách khác để tạo nested list . Hãy phân tích cách bạn có thể tạo ba loại danh sách này trong HTML .
Danh sách HTML:Có thứ tự
Ordered list được sử dụng trong HTML khi thứ tự của danh sách là cần thiết. Ví dụ:nếu bạn có một loạt các hướng dẫn cần thực hiện theo một thứ tự cụ thể, bạn sẽ muốn sử dụng một danh sách có thứ tự. Ordered list là danh sách được đánh số.
Ordered list sử dụng <ol> và mỗi mục trong danh sách sử dụng <li> nhãn. Dưới đây là một ví dụ về danh sách có thứ tự:
<ol> <li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li> <li>Leave the mix to rest for 30 minutes.</li> <li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li> <li>Pour batter mixture into the pan and cook on each side for one minute.</li> </ol>
Trong ví dụ trên, chúng tôi đã tạo một công thức cơ bản cho bánh kếp. Mỗi bước trong danh sách này phải diễn ra theo thứ tự, vì vậy chúng tôi đã chọn một danh sách có thứ tự. Đây là đầu ra của mã của chúng tôi:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ordered list bắt đầu với số một và đi theo thứ tự tăng dần. Tuy nhiên, nếu bạn muốn danh sách của mình bắt đầu bằng một số khác, bạn có thể sử dụng start thuộc tính như vậy:
<ol start="5"> <li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li> <li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li> <li>Enjoy your pancakes!</li> </ol>
Danh sách mới của chúng tôi xuất hiện như sau:
Danh sách HTML:Không có thứ tự
Nếu bạn muốn tạo danh sách các mục trong đó thứ tự của các mục trong danh sách không quan trọng, bạn có thể sử dụng HTML unordered thẻ danh sách. Chúng tôi có thể tạo unordered lists sử dụng <ul> và mỗi mục danh sách, giống như trong danh sách đã đặt hàng của chúng tôi, bắt đầu bằng <li> thẻ.
Đây là một ví dụ về unordered lists :
<ul> <li>Alex</li> <li>Carol</li> <li>Lucy</li> <li>Shawn</li> </ul>
Danh sách của chúng tôi xuất hiện như sau:
Danh sách HTML:Danh sách Mô tả
Khi viết danh sách, bạn có thể muốn đưa vào mô tả của từng mục trong danh sách của mình. Ví dụ:nếu bạn có một danh sách tên học sinh, bạn có thể muốn thêm điểm của họ, nhưng không phải là một phần của văn bản danh sách chính.
Đó là nơi description lists tham gia. Description list là danh sách các mục với mô tả của từng phần tử. Description list được tạo bằng <dl> , các phần tử chính trong danh sách sử dụng <dt> và các định nghĩa sử dụng <dd> thẻ.
Đây là ví dụ về description list trong HTML :
<dl> <dt>Economy Class</dt> <dd>Standard seats, no meal service.</dd> <dt>First Class</dt> <dd>Luxury seats, catered meal service.</dd> </dl>
Mã của chúng tôi trả về danh sách sau:
Như bạn có thể thấy, tên lớp máy bay xuất hiện ở định dạng danh sách và mô tả cho những tên đó xuất hiện dưới mỗi mục. Mỗi mô tả cũng được thụt lề, giúp phân biệt với mục danh sách.
Kết luận
Danh sách là một thẻ cần thiết trong HTML , cho phép các nhà phát triển trình bày thông tin theo cách định dạng tốt. Danh sách thường giúp người dùng đọc thoải mái hơn và việc sử dụng danh sách cũng cho phép nhà phát triển kiểm soát nhiều hơn đối với cấu trúc thông tin.
Trong hướng dẫn này, chúng tôi đã chia nhỏ danh sách trong HTML và cách tạo bất kỳ loại nào trong ba loại HTML danh sách:ordered (thẻ li ol), unordered (thẻ ul li) và description (các thẻ dt dd). Bây giờ bạn đang trên đường tạo danh sách trong HTML như một người chuyên nghiệp!