Thẻ <li> HTML

Định nghĩa và cách sử dụng

<li> Thẻ định nghĩa mục danh sách.

<li> Thẻ được sử dụng cho danh sách có thứ tự (<ol>)、danh sách không có thứ tự (<ul>) và danh sách menu (<menu>)

Trong <ul> và <menu>, các mục danh sách thường hiển thị dấu phẩy.

Trong <ol>, các mục danh sách thường hiển thị số hoặc chữ cái.

Lưu ý:Vui lòng sử dụng CSS đểĐặt kiểu dáng danh sách.

Xem thêm:

Giáo trình HTML:Danh sách HTML

Tài liệu tham khảo HTML DOM:Đối tượng Li

Giáo trình CSS:Đặt kiểu dáng danh sách

Thực例

Ví dụ 1

Một danh sách có thứ tự (<ol>) và danh sách không có thứ tự (<ul>) danh sách HTML:

<ol>
  <li>Cà phê</li>
  <li>茶</li>
  <li>Đường sữa</li>
</ol>
<ul>
  <li>Cà phê</li>
  <li>茶</li>
  <li>Đường sữa</li>
</ul>

Thử ngay

Ví dụ 2

Sử dụng thuộc tính value trong danh sách có thứ tự:

<ol>
  <li value="100">咖啡</li>
  <li>茶</li>
  <li>Đường sữa</li>
  <li>纯水</li>
  <li>果汁</li>
  <li>啤酒</li>
</ol>

Thử ngay

Ví dụ 3

Đặt kiểu dáng danh sách khác nhau (sử dụng CSS):

<ol>
  <li>Cà phê</li>
  <li style="list-style-type:lower-alpha">Trà</li>
  <li>Đường sữa</li>
</ol>
<ul>
  <li>Cà phê</li>
  <li style="list-style-type:square">Trà</li>
  <li>Đường sữa</li>
</ul>

Thử ngay

Ví dụ 4

Tạo một danh sách trong danh sách (danh sách lồng nhau):

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
    <ul>
      <li>Pu'er</li>
      <li>Trà xanh</li>
    </ul>
  </li>
  <li>Đường sữa</li>
</ul>

Thử ngay

Mẫu 5

Tạo một danh sách嵌套 phức tạp hơn:

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
    <ul>
      <li>Pu'er</li>
      <li>Trà xanh</li>
        <ul>
          <li>Bi Lo Chun</li>
          <li>Long Ching</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Đường sữa</li>
</ul>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
value Số Chỉ áp dụng cho danh sách <ol>. Định nghĩa giá trị bắt đầu của mục danh sách. Các mục danh sách tiếp theo sẽ tăng theo số này.

Thuộc tính toàn cục

<li> Nhãn này cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<li> Nhãn này cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ sử dụng giá trị mặc định sau để hiển thị <li> Thành phần:

li {
  display: list-item;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ