Danh Sách - HTML

Danh Sách Sắp Xếp Thứ Tự

Một danh sách sắp xếp thứ tự được tạo ra nhờ sử dụng thẻ <ol>.

<ol>
...
</ol>

Thẻ <ol> sẽ chỉ tạo ra một danh sách rỗng. Để thêm các hạng mục vào trong danh sách, bạn cần sử dụng thêm thẻ <li>:

<ol>
    <li>HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
</ol>

Đoạn mã trên sẽ hiển thị kết quả như sau:

1. HTML
2. JavaScript
3. CSS

Thay Đổi Số Thứ Tự Của Hạng Mục

Sử dụng thuộc tính start để thay đổi số thứ tự của hạng tử đầu tiên trong danh sách:

<ol start="3">
    <li>HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
</ol>

Kết quả hiển thị:

3. HTML
4. JavaScript
5. CSS

Sử dụng thuộc tính value để thay đổi số thứ tự của bất cứ hạng mục nào trong danh sách:

<ol>
    <li value="5">HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
</ol>

Kết quả hiển thị:

5. HTML
6. JavaScript
7. CSS

Thay Đổi Kiểu Đánh Số Thứ Tự

Sử dụng thuộc tính type bạn có thể dễ dàng thay đổi kiểu đánh số thứ tự:

<ol type="a">
    <li>HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
</ol>

Kết quả hiển thị:

1. HTML
2. JavaScript
3. CSS

Thuộc tính type có thể nhận một trong các giá trị sau:

• type=1: Đánh số thứ tự sử dụng các số tự nhiên: 1, 2, 3...
• type=a: Đánh số thứ tự sử dụng các chữ cái in thường: a, b, c, d...
• type=A: Đánh số thứ tự sử dụng các chữ cái in thường: A, B, C, D...
• type=i: Đánh số thứ tự sử dụng các chữ cái La Mã in thường: i, ii, iii, iv...
• type=I: Đánh số thứ tự sử dụng các chữ cái La Mã in hoa: I, II, III, IV...

Danh Sách Không Sắp Xếp Thứ Tự

Thẻ ul (unordered list) được sử dụng để tạo danh sách không sắp xếp thứ tự:

<ul>
...
</ul>

Tương tự như thẻ <ol>, bên trong thẻ <ul> có các thẻ <li> để đánh dấu từng hạng mục:

<ul>
  <li>Cam</li>
  <li>Chuối</li>
  <li>Bưởi</li>
</ul>

Kết quả hiển thị:

• Cam
• Chuối
• Bưởi

Danh Sách Mô Tả

Một danh sách mô tả bao gồm một hoặc nhiều nhóm khác nhau:

Nước Ngọt

- Coca Cola

- Sting

Cà Phê

- Cà phê sữa

- Espesso

- Capuchino

Thẻ dl được sử dụng để đánh dấu một danh sách mô tả (description list):

<dl>
...
</dl>

Bên trong thẻ <dl>, các thẻ <dt> được sử dụng để đánh dấu từng nhóm:

<dl>
    <dt>Nước Ngọt</dt>

    <dt>Cà Phê</dt>
</dl>

Sau mỗi thẻ <dt>, các thẻ <dd> được sử dụng để thêm các hạng mục trong từng nhóm:

<dl>
  <dt>Nước Ngọt</dt>
  <dd>- Coca Cola</dd>
  <dd>- Sting</dd>
  <dt>Cà Phê</dt>
  <dd>- Cà phê sữa</dd>
  <dd>- Espesso</dd>
  <dd>- Capuchino</dd>
</dl>