Danh sách dấu đầu dòng html mdn

Thẻ ul, ol và li là một trong các thẻ HTML cơ bản, thường xuyên được sử dụng. hôm nay Kiến càng sẽ hướng dẫn bạn cách sử dụng chúng

lục mục

#1. Danh sách dùng để làm gì?

Danh sách là những thứ có liên quan sách mật với nhau do có đặc điểm chung nào đó, chẳng hạn như danh sách học sinh trong một lớp, danh sách các công ty công ty trẻ nhất thế giới, danh sách các loại thực phẩm tốt cho vị trí

Khi bạn sử dụng thẻ danh sách, nghĩa là bạn thông báo cho người đọc cũng như các công cụ tìm kiếm biết sự liên quan của các phần tử nằm trong danh sách

#2. Sự khác nhau giữa ul và ol

Các danh sách không có thứ tự như thế này

Được tạo thành từ các thẻ ul và li

—

Còn lại danh sách được đánh theo thứ tự như thế này

1. Toán
2. Lý
3. Hóa

Is made to from the tag ol and li

#3. mẫu mã

Mẫu mã cho danh sách không có thứ tự ul li ở trên

<ul>
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>

Còn lại dưới đây là của danh sách thứ tự ol li

<ol>
<li>Toán</li>
<li>Lý</li>
<li>Hóa</li>
</ol>

Nhìn cả 2 danh sách chúng ta có thể thấy, danh sách có thứ tự và không có thứ tự đều cần đến thẻ <li></li> nằm giữa

Giải thích từ viết tắt. ul là viết tắt của từ tiếng Anh danh sách không có thứ tự (nghĩa là không có thứ tự), li là viết tắt của danh sách, còn ol là viết tắt của danh sách có thứ tự (nghĩa là có thứ tự)

To edit style for list you use CSS. Một bộ phận có thể bạn không đồng ý, đó là menu thường được viết bằng thẻ các thẻ ul và li để thể hiện các liên quan với nhau

#4. Change of the style of tag li

Thẻ li theo mặc định nếu ở trong thẻ ul sẽ có kiểu dấu tròn đậm, còn nếu trong thẻ ol sẽ có kiểu số như 1, 2, 3,…CSS cho phép chúng ta tùy biến kiểu này qua thuộc tính danh sách- . Sau đây là một số ví dụ

1. Kiểu chấm tròn

Code sample – bạn chú ý cái list-style-type

<ul style="list-style-type: circle;">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>

2. Kiểu chữ đậm nét

<ul style="list-style-type: square;">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>

Tất nhiên là bạn phải định kiểu cho ul trong tệp CSS riêng chứ không viết trực tiếp vào trong thẻ HTML as on, tôi viết ra thế để dễ quan sát và minh họa thôi

Nếu muốn hủy kiểu – tức là không tròn, chấm vuông hay số má gì hết thì bạn để kiểu kiểu danh sách. không có;

Có bạn hỏi thế nào mặc định list-style có tên là gì không, tôi xin nói luôn

• Kiểu dấu chấm tròn của ul là list-style-type. đĩa
• Còn style number of ol is list-style-type. số thập phân

Vì nó là kiểu mặc định rồi nên bạn không cần viết CSS thì nó vẫn hiện dấu chấm tròn và số tương ứng

3. Style is image

Cái này phải nói là rất hay, bạn không thể thích mấy cái chấm tròn, chấm vuông, số, ký tự…mà lại thích danh sách được đánh dấu bằng ảnh của riêng bạn, nó làm cho trang web trở nên cá tính hơn

• Táo
• Người đàn ông
• Đào

mẫu mã.  

<ul style="list-style-image: url('https://cdn.kiencang.net/wp-content/uploads/2021/02/bullet-yellow.png');">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>

Trong URL chính là đường dẫn của ảnh mà bạn muốn nó làm dấu đầu dòng. Nếu muốn bạn có thể tự vẽ ra viên đạn bằng công cụ đồ họa nào đó, hoặc cách nhanh hơn là lên trang IconFinder tìm thấy với từ khóa viên đạn rồi chọn cho mình một chú mang về – rất tiện mà còn đẹp nữa

4. Điều chỉnh vị trí của thẻ danh sách

Để điều chỉnh vị trí của danh sách chúng ta sử dụng thuộc tính list-style-position, thuộc tính này có 2 giá trị bên trong và bên ngoài, trong đó bên ngoài là giá trị mặc định. Dưới đây là các ví dụ để bạn thấy sự khác nhau giữa chúng

A. bên trong

ul {
list-style-position:inside;
}

• MỘT
• Hải
• Ba

B. ngoài

ul {
list-style-position:outside;
}

• MỘT
• Hải
• Ba

#5. Thưởng

Nếu bạn quan tâm đến việc trình bày danh sách sao cho hiệu quả, thu hút người dùng thì bài viết này nên đọc

Cuối cùng tôi tặng bạn danh sách 10 quốc gia đông dân nhất thế giới xếp hạng theo thứ tự giảm dần và được tạo bằng thẻ ol và li

1. CHND Trung Hòa
2. Ấn Độ
3. Hoa Kỳ
4. Indonesia
5. Brazil
6. Pa-ki-xtan
7. Ni-giê-ri-a
8. Băng-la-đét
9. Liên Băng Nga
10. nhật bản

Thông tin 10 quốc gia này được tham khảo từ Wikipedia Việt Nam – cũng theo đó Việt Nam đứng vị trí số 14 về dân số mà khổ nỗi diện tích nước mình bé đâm ra giá bất động sản lên cao quá (không liên quan gì . ))