phần tử mặc dù, chúng thường được áp dụng cho phần tử cha Thẻ <li>
được đặt bên trong thẻ <ol>
hoặc thẻ <ul>
để đại diện cho từng mục riêng lẻ trong danh sách đó. Nó cũng có thể được sử dụng với thẻ <menu>
cho HTML 5. 1 và tài liệu HTML Living Standard
cú pháp
Thẻ <li>
được viết là <li>
</li>
với mục danh sách được chèn vào giữa thẻ bắt đầu và thẻ kết thúc. Phần tử phải được đặt bên trong thẻ <ol>
hoặc thẻ <ul>
để cung cấp từng mục danh sách riêng lẻ trong các phần tử đó
Thẻ <li>
cũng có thể được sử dụng bên trong phần tử <menu>
(chỉ khi phần tử ở trạng thái <li>
2), tuy nhiên, phần tử đó không được hỗ trợ bởi đặc tả HTML5 của W3C - nó hiện chỉ được hỗ trợ bởi HTML 5. 1 và Tiêu chuẩn Sống HTML WHATWG
Như thế này
ví dụ
Danh sách không có thứ tự
Đây là một ví dụ về việc sử dụng <li>
bên trong thẻ <ul>
để tạo một danh sách không có thứ tự
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Danh sách được yêu cầu
Đây là một ví dụ về việc sử dụng <li>
bên trong thẻ <ol>
để tạo một danh sách có thứ tự
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Thuộc tính <li>7
Bạn có thể sử dụng thuộc tính <li>
7 để chỉ định một số cho một mục danh sách. Bất kỳ mục danh sách tiếp theo nào cũng tăng giá trị của chúng từ giá trị ban đầu đó (trừ khi bạn ghi đè lên giá trị đó bằng một giá trị mới)
Lưu ý rằng bạn chỉ có thể sử dụng thuộc tính <li>
7 khi sử dụng phần tử <ol>
Cũng lưu ý rằng giá trị thứ tự của thuộc tính <li>
7 phải là một số nguyên hợp lệ
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Áp dụng kiểu
Bạn có thể sử dụng các thuộc tính CSS <ol>
2, <ol>
3, <ol>
4 và <ol>
5 để thay đổi kiểu của các phần tử <li>
Mặc dù bạn có thể áp dụng các thuộc tính này trực tiếp cho phần tử <li>
, nhưng chúng thường được áp dụng cho phần tử cha (sau đó được xếp tầng xuống phần tử <li>
)
Dưới đây là một số ví dụ
Chữ số La Mã
Ví dụ này sử dụng thuộc tính <ol>
5 để chỉ định các chữ số La Mã
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Đạn vuông
Ví dụ này sử dụng thuộc tính <ol>
5 để chỉ định các dấu đầu dòng vuông cho từng mục danh sách trong danh sách không có thứ tự
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Hình ảnh
Bạn có thể thay thế các gạch đầu dòng bằng một hình ảnh bằng cách sử dụng thuộc tính <ol>
3
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Vị trí của mục danh sách
Ví dụ này sử dụng thuộc tính <ol>
4 để chỉ định vị trí của các mục trong danh sách
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Tài sản <ol>
2
Thuộc tính <ol>
2 là thuộc tính phím tắt. Nó cho phép bạn áp dụng nhiều thuộc tính cho các mục trong danh sách của mình
Thí dụ
Chạy
Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp
Thuộc tính
Các thuộc tính có thể được thêm vào một phần tử HTML để cung cấp thêm thông tin về cách phần tử đó sẽ xuất hiện hoặc hoạt động
Phần tử <li>
chấp nhận các thuộc tính sau
AttributeDescription_______0_______7Chỉ định giá trị của mục danh sách. Giá trị phải là một số. Chỉ có thể được sử dụng nếu danh sách là một danh sách có thứ tự (i. e. <ol>
)Thuộc tính toàn cầu
Các thuộc tính sau là tiêu chuẩn trên tất cả các phần tử HTML. Do đó, bạn có thể sử dụng các thuộc tính này với thẻ <li>
, cũng như với tất cả các thẻ HTML khác
<ul>
9<menu>
0<menu>
1<menu>
2<menu>
3<menu>
4<menu>
5<menu>
6<menu>
7<menu>
8<menu>
9<li>
0<li>
1<li>
2<li>
3<li>
4<li>
5<li>
6<li>
7<li>
8<li>
9<li>
0<li>
1<li>
2
Để có giải thích đầy đủ về các thuộc tính này, hãy xem thuộc tính toàn cầu HTML 5
Trình xử lý sự kiện
Các thuộc tính nội dung của trình xử lý sự kiện cho phép bạn gọi một tập lệnh từ bên trong HTML của mình. Tập lệnh được gọi khi một "sự kiện" nhất định xảy ra. Mỗi thuộc tính nội dung xử lý sự kiện xử lý một sự kiện khác nhau
<li>
3<li>
4<li>
5<li>
6<li>
7<li>
8<li>
9</li>
0</li>
1</li>
2</li>
3</li>
4</li>
5</li>
6</li>
7</li>
8</li>
9<ol>
0<ol>
1<ol>
2<ol>
3<ol>
4<ol>
5<ol>
6<ol>
7<ol>
8<ol>
9<ul>
0<ul>
1<ul>
2<ul>
3<ul>
4<ul>
5<ul>
6<ul>
7<ul>
8<ul>
9<li>
00<li>
01<li>
02<li>
03<li>
04<li>
05<li>
06<li>
07<li>
08<li>
09<li>
10<li>
11<li>
12<li>
13<li>
14<li>
15<li>
16<li>
17<li>
18<li>
19<li>
20<li>
21<li>
22<li>
23<li>
24<li>
25<li>
26<li>
27<li>
28<li>
29
Hầu hết các thuộc tính nội dung của trình xử lý sự kiện có thể được sử dụng trên tất cả các phần tử HTML, nhưng một số trình xử lý sự kiện có các quy tắc cụ thể về thời điểm chúng có thể được sử dụng và chúng có thể áp dụng cho những phần tử nào
Li có phải là thẻ hoặc thuộc tính không?
Thẻ xác định mục danh sách. Thẻ
Li dùng để làm gì trong HTML?
Danh sách không có thứ tự ( UL ), danh sách có thứ tự ( OL ) và các mục trong danh sách ( LI )
Li có thuộc tính giá trị không?
Thuộc tính giá trị . Nó chỉ được áp dụng trên danh sách theo thứ tự. Giá trị thuộc tính. Thuộc tính này chứa một giá trị số được sử dụng để chỉ định giá trị của các mục trong danh sách.
Thẻ Li có phải là phần tử khối không?
Điều này chứng tỏ rằng thẻ li đang chiếm 100% chiều rộng có sẵn, chứng tỏ rằng li là phần tử cấp khối .