18/08/2018, 10:38

Cách tạo danh sách (list) trong HTML

Trong HTML có rất nhiều loại danh sách như: danh sách không có thứ tự, danh sách có thứ tự, danh sách hai cấp, danh sách ba cấp,.... Ví dụ: Danh sách không thứ tự HTML/CSS JavaScript Server Side Danh sách có thứ tự HTML/CSS JavaScript Server Side ...

Trong HTML có rất nhiều loại danh sách như: danh sách không có thứ tự, danh sách có thứ tự, danh sách hai cấp, danh sách ba cấp,....

Ví dụ:

Danh sách không thứ tự

  • HTML/CSS
  • JavaScript
  • Server Side

Danh sách có thứ tự

  1. HTML/CSS
  2. JavaScript
  3. Server Side

Danh sách hai cấp

  1. HTML/CSS
    • HTML
    • CSS
  2. JavaScript
    • JavaScript
    • jQuery

Tạo danh sách không có thứ tự

Để tạo một danh sách không có thứ tự, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <ul></ul> để xác định một danh sách không có thứ tự

<ul>
</ul>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Bước 3: Đặt thuộc tính type= "kiểu danh sách" vào trong thẻ <ul> để xác định kiểu cho danh sách.

<ul type="kiểu danh sách">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Trong đó, kiểu danh sách có thể là:

  • disc (tạo ký hiệu chấm tròn đen phía trước danh sách)
  • circle (tạo ký hiệu chấm tròn trắng phía trước danh sách)
  • square (tạo ký hiệu ô vuông đen phía trước danh sách)
  • none (không tạo ký hiệu phía trước danh sách)
Ví dụ
<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
Xem ví dụ

Tạo danh sách có thứ tự

Để tạo một danh sách có thứ tự, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <ol></ol> để xác định một danh sách có thứ tự

<ol>
</ol>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>

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

Bước 3: Đặt thuộc tính type= "kiểu danh sách" vào trong thẻ <ol> để xác định kiểu cho danh sách.

<ol type="kiểu danh sách">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Trong đó, kiểu danh sách có thể là:

  • 1 (Tạo số 1, 2, 3, 4,.... phía trước danh sách)
  • a (Tạo chữ cái a, b, c, d,.... phía trước danh sách)
  • A (Tạo chữ cái A, B, C, D,.... phía trước danh sách)
  • i (Tạo số la mã i, ii, iii, iv,.... phía trước danh sách)
  • I (Tạo số la mã I, II, III, IV,.... phía trước danh sách)
Ví dụ
<ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
Xem ví dụ

Tạo danh sách hai cấp

Để tạo danh sách hai cấp, ta lồng danh sách cấp hai vào bên trong danh sách cấp một.

Ví dụ
<ol>
    <li>Chương 1</li>
    <ul>
        <li>Bài 1.1</li>
        <li>Bài 1.2</li>
    </ul>
    <li>Chương 2</li>
    <ul>
        <li>Bài 2.1</li>
        <li>Bài 2.2</li>
    </ul>
</ol>
Xem ví dụ
Ở ví dùng trên, danh sách cấp 1 tôi dùng kiểu <ol>, danh sách cấp 2 dùng kiểu <ul>. Tuy nhiên, không nhất thiết cấp 1 là phải dùng <ol> cấp 2 dùng <ul>, bạn thích dùng kiểu gì thì dùng.

Cũng với quy tắc lồng danh sách đó, chúng ta có thể tạo danh sách cấp 3, cấp 4,....

Ví dụ
<ol>
    <li>Chương 1</li>
    <ul>
        <li>Bài 1.1</li>
        <ul>
            <li>Câu 1</li>
            <li>Câu 2</li>
        </ul>
        <li>Bài 1.2</li>
        <ul>
            <li>Câu 3</li>
            <li>Câu 4</li>
        </ul>
    </ul>
    <li>Chương 2</li>
    <ul>
        <li>Bài 2.1</li>
        <li>Bài 2.2</li>
    </ul>
</ol>
Xem ví dụ

Tạo danh sách mô tả

Để tạo một danh sách mô tả, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <dl></dl> để xác định một danh sách mô tả

<dl>
</dl>

Bước 2: Xác định các ý chính của danh sách bằng cặp thẻ <dt></dt>

<dl>
    <dt>HTML/CSS</dt>
    <dt>JavaScript</dt>
    <dt>Server Side</dt>
</dl>

Bước 3: Dùng cặp thẻ <dd></dd> để xác định các miệu tả, và đặt chúng dưới các ý chính của danh sách.

Ví dụ
<dl>
    <dt>HTML/CSS</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
    <dt>JavaScript</dt>
        <dd>JavaScript</dd>
        <dd>jQuery</dd>
    <dt>Server Side</dt>
        <dd>PHP</dd>
        <dd>MySQL</dd>
</dl>
Xem ví dụ
0