Web Cơ Bản

Thẻ <li> trong HTML

- Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn nên xem qua thẻ <ul> và thẻ <ol>

1) Thẻ <li> trong HTML

- Thẻ <li> dùng để xác định một "danh mục" trong danh sách.

(nó có thể sử dụng cho cả danh sách có thứ tự & danh sách không có thứ tự)

- Thẻ <li> phải được đặt bên trong phần tử <ul> hoặc phần tử <ol>.

Ví dụ:

- Danh sách bên dưới có năm danh mục

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>MySQL</li>
   <li>PHP</li>
</ul>
Xem ví dụ

2) Thuộc tính type

- Thuộc tính type của thẻ <li> dùng để xác định "kiểu chỉ mục" của danh mục hiện tại.

- Thuộc tính type có tám giá trị cơ bản:

Giá trị Kiểu danh mục
1
  1. HTML
  2. CSS
  3. JavaScript
a
  1. HTML
  2. CSS
  3. JavaScript
A
  1. HTML
  2. CSS
  3. JavaScript
i
  1. HTML
  2. CSS
  3. JavaScript
I
  1. HTML
  2. CSS
  3. JavaScript
disc
  • HTML
  • CSS
  • JavaScript
circle
  • HTML
  • CSS
  • JavaScript
square
  • HTML
  • CSS
  • JavaScript
Ví dụ:
<ul>
   <li>HTML</li>
   <li type="a">CSS</li>
   <li>JavaScript</li>
   <li>MySQL</li>
   <li type="1">PHP</li>
   <li>jQuery</li>
   <li type="circle">Codeigniter</li>
</ul>
Xem ví dụ

- Ngoài việc sử dụng thuộc tính type của thẻ <li> xác định "kiểu chỉ mục" của danh mục hiện tại thì ta cũng có thể dùng thuộc tính list-style-type trong CSS để thay thế.

- Tuy nhiên, giá trị của thuộc tính list-style-type trong CSS tương đối khác so với giá trị của thuộc tính type trong thẻ <li>.

Giá trị Kiểu danh mục
decimal
  1. HTML
  2. CSS
  3. JavaScript
lower-alpha
  1. HTML
  2. CSS
  3. JavaScript
upper-alpha
  1. HTML
  2. CSS
  3. JavaScript
lower-roman
  1. HTML
  2. CSS
  3. JavaScript
upper-roman
  1. HTML
  2. CSS
  3. JavaScript
disc
  • HTML
  • CSS
  • JavaScript
circle
  • HTML
  • CSS
  • JavaScript
square
  • HTML
  • CSS
  • JavaScript
Ví dụ:
<ul>
   <li>HTML</li>
   <li style="list-style-type:lower-alpha">CSS</li>
   <li>JavaScript</li>
   <li>MySQL</li>
   <li style="list-style-type:decimal">PHP</li>
   <li>jQuery</li>
   <li style="list-style-type:circle">Codeigniter</li>
</ul>
Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <li> với định dạng CSS như sau:

li {
    display: list-item;
}