Thẻ HTML <li>
Định nghĩa và cách sử dụng thẻ <li>
Thẻ <li>
xác định một mục danh sách. Thẻ <li>
được sử dụng bên trong danh sách có thứ tự (<ol>
), danh sách không có thứ tự (<ul>
) và trong danh sách menu (<menu>
). Ví dụ,
một danh sách HTML có thứ tự (<ol>
) và một danh sách không có thứ tự (<ul>
):
<ol>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
<ul>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>
Trong <ul>
và <menu>
, những mục danh sách thường được hiển thị với các dấu đầu dòng.
Trong <ol>
, các mục danh sách thường được hiển thị bằng số hoặc chữ cái.
Mẹo: Hãy sử dụng CSS để tạo kiểu cho danh sách.
Hỗ trợ trình duyệt
Phần tử <li> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
value | number | Chỉ dành cho các danh sách <ol> . Chỉ định giá trị bắt đầu của một mục danh sách. Các mục danh sách sau đây sẽ tăng từ số đó |
Thuộc tính Global
Thẻ <li>
cũng hỗ trợ các thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <li>
cũng hỗ trợ thuộc tính sự kiện trong HTML.
Các ví dụ khác
Sử dụng thuộc tính value trong danh sách có thứ tự:
<ol>
<li value="100">Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
<li>Nước</li>
<li>Nước ép</li>
<li>Bia</li>
</ol>
Đặt các kiểu kiểu danh sách khác nhau (với CSS):
<ol>
<li>Cà phê</li>
<li style="list-style-type:lower-alpha">Trà</li>
<li>Sữa</li>
</ol>
<ul>
<li>Cà phê</li>
<li style="list-style-type:square">Trà</li>
<li>Sữa</li>
</ul>
Tạo danh sách bên trong danh sách (danh sách lồng nhau):
<ul>
<li>Cà phê</li>
<li>Trà
<ul>
<li>Trà đen</li>
<li>Trà xanh</li>
</ul>
</li>
<li>Sữa</li>
</ul>
Tạo một danh sách lồng nhau phức tạp hơn:
<ul>
<li>Cà phê</li>
<li>Trà
<ul>
<li>Trà đen</li>
<li>Trà xanh
<ul>
<li>Trung Quốc</li>
<li>Châu Phi</li>
</ul>
</li>
</ul>
</li>
<li>Sữa</li>
</ul>
Cài đặt CSS mặc định
Hầu hết mọi trình duyệt sẽ hiển thị phần tử <li>
với các giá trị mặc định sau:
li {
display: list-item;
}
Bạn nên đọc
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
2 cách lặp lại thanh tiêu đề trong Word cho bảng
Hôm qua -
Những status cảm động níu kéo người yêu cũ
2 ngày -
Cách chèn emoji vào ảnh trên iPhone cực đơn giản
Hôm qua -
Quay màn hình máy tính bằng OBS Studio, cách ghi màn hình laptop trên OBS
2 ngày -
46 câu ca dao hài hước, châm biếm hay nhất
2 ngày -
C++ Editor Online
Hôm qua -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
Code Hello Cafe VNG mới nhất và cách nhập code
2 ngày -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua