Blog DX

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

8 tháng 8, 2014

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:
  1. Item 1
  2. 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
  1. Câu a
  2. 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ệ

Không có nhận xét nào:

Đăng nhận xét