Bài 5: Danh sách (list)

Mã HTML	Ý nghĩa
<ul>     <li>Item 1</li>     <li>Item 2</li> </ul>	Tạo danh sách không đánh số thứ tự, dạng: Item 1 Item 2
<ol>     <li>Item 1</li>     <li>Item 2</li> </ol>	Tạo danh sách có đánh số thứ tự, dạng: Item 1 Item 2
<dl>     <dt>HTML ( Hypertext Markup Language)</dt>     <dd>Là ngôn ngữ đánh dấu siêu văn bản</dd> </dl>	Tạo danh sách định nghĩa, dạng: HTML ( Hypertext Markup Language) Là ngôn ngữ đánh dấu siêu văn bản

1.Danh sách có trật tự <ol></ol>

- Tạo nên danh sách có đánh thứ tự 1, 2, 3,…bên trong là các cặp thẻ định nghĩa danh sách <li></li>
- Có thể thay đổi cách hiển thị khi sử dụng <ol> bằng cách sử dụng thuộc tính type.
+ a: Hiển thị theo kiểu ký tự thường a, b, c…
+ A: Hiển thị theo dạng ký tự hoa A, B, C..
+ i: Hiển thị dạng La Mã thường i, ii, iii, iv,..
+ I: Hiển thị dang La Mã I, II, III, IV,..
+ square: Hình ô vuông
+ circle: Hình tròn màu rỗng ( màu trắng)
+ disc: Hình tròn đặc( chấm tròn màu đen)
- Để bắt đầu với 1 giá trị khác 1 chúng ta sử dụng thuộc tính start=“n” với n là giá trị bắt đầu của danh sách

Ví dụ:

 Bài 1

  <ol type="s">
    <li>Câu a</li>
    <li>Câu b</li>
    <li>Câu c</li>
  </ol>
  <!-- List ol nhưng hiển thị dạng ul ( dạng không đánh trật tự 1,2, 3..)-->
  Bài 2

  <ol start="5">
    <li>Câu a</li>
    <li>Câu b</li>
  </ol><!--List bắt đầu từ số 5-->

Kết quả:
Bài 1

1. Câu a
2. Câu b
3. Câu c

Bài 2

5. Câu a
6. Câu b

2. Danh sách không trật tự <ul></ul>

- Là kiểu danh sách đánh thứ tự các list mặc định là các hình tròn đặc ( chấm tròn đen)
- Có thể tùy biến sang các kiểu khác: đánh trật tự, ô vuông, hình tròn rỗng,.. Tương tự như đối với <ol></ol>
- Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và “ul” chúng ta sử dụng thuộc tính type với giá trị là none.

Ví dụ:

  Bài 1

  <ul type="none">
    <li>Câu a</li>
    <li>Câu b</li>
    <li>Câu c</li>
  </ul>
  <!-- List không hiển thị chấm tròn-->
  Bài 2
 
  <ul>
    <li>Câu a</li>
    <li>Câu b</li>
  </ul>
<!--List dạng ul bình thường-->

Kết quả:
Bài 1

• Câu a
• Câu b
• Câu c

Bài 2

• Câu a
• Câu b

- Ngoài ra có thể sử dụng CSS để tùy biến danh sách trong HTML

3. Danh sách định nghĩa <dl></dl>

- Khác với “ol” và “ul”, cặp thẻ <dl></dl> được dùng để định nghĩa 1 đối tượng nào đó
- Bên trong cặp thẻ “dl” chứa các cặp thẻ
+ “dd” (Definition Description): Thẻ mô tả định nghĩa
+ “dt” ( Definition term): Thẻ định nghĩa 1 thuật ngữ nào đó.
Ví dụ:

<dl>
    <dt>Blog DX</dt>
    <dd>Là blog thủ thuật, công nghệ</dd>
</dl>

Kết quả:

Blog DX

Là blog thủ thuật, công nghệ