[HTML bài 21] Các kiểu danh sách (list)

Bài này thuộc phần 21 của 23 trong series Học HTML cơ bản

1. Các kiểu danh sách (list) trong HTML

Trong HTML có ba kiểu danh sách (list type) đó là kiểu sắp xếp (ordered list), kiểu không sắp xếp (unordered list) và kiểu danh sách mô tả (description list).

+ Kiểu sắp xếp (ordered list): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.

+ Kiểu không sắp xếp (unordered list): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.

+ Kiểu mô tả (Description List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.

2. Cách tạo danh sách kiểu sắp xếp (ordered list)

Để tạo danh sách kiểu sắp xếp (ordered list), ta thực hiện các bước sau:

Bước 1: Dùng cặp thẻ <ol></ol> để xác định một danh sách kiểu sắp xếp (ordered list). Lưu ý thẻ <ol> là viết tắt của chữ ordered list

<ol>
</ol>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>. Lưu ý <li> là viết tắt của chữ list

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

<ol type="giá trị">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Trong đó:

Type (kiểu)	Description (mô tả)
type=”1″	Tạo số 1, 2, 3, 4, … phía trước danh sách (Mặc định)
type=”A”	Tạo chữ cái A, B, C, D, … phía trước danh sách
type=”a”	Tạo chữ cái a, b, c, d, … phía trước danh sách
type=”I”	Tạo số la mã I, II, III, IV, … phía trước danh sách
type=”i”	Tạo số la mã i, ii, iii, iv, … phía trước danh sách

Tôi sẽ lấy ví dụ như hình dưới đây cho các bạn dễ hiểu

3. Cách tạo danh sách Kiểu không sắp xếp (unordered list)

Để tạo danh sách kiểu không sắp xếp ta thực hiện các bước sau:

Bước 1: Dùng cặp thẻ <ul></ul> để xác định một danh sách kiểu không sắp xếp (unordered list). Lưu ý thẻ <ul> là viết tắt của chữ unordered list

<ul>
</ul>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>. Lưu ý <li> là viết tắt của chữ list

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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

<ul type="giá trị">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Trong đó:

Type (kiểu)	Description (mô tả)
type=”disc”	Tạo ký hiệu (symbol) chấm tròn đen phía trước danh sách (Mặc định)
type=”circle”	Tạo ký hiệu (symbol) chấm tròn trắng phía trước danh sách
type=”square”	Tạo ký hiệu (symbol) ô vuông đen phía trước danh sách
type=”none”	Không tạo ký hiệu (symbol) phía trước danh sách

Tôi sẽ lấy ví dụ như hình dưới đây cho các bạn dễ hiểu

Ngoài ra ở mục này các bạn có thể dùng thuộc tính CSS list-style-type với các giá trị như trên tôi sẽ ví dụ như hình dưới

Lưu ý:

+ Giá trị của thuộc tính CSS list-style-type giống với giá trị của thuộc tính type trong kiểu không sắp xếp (unordered list).

+ Giá trị của thuộc tính CSS list-style-type khác với giá trị của thuộc tính type trong kiểu sắp xếp (ordered list). Cái này tôi sẽ viết kỹ trong series học CSS của tôi.

4. Cách tạo danh sách kiểu mô tả (Description List)

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

Bước 1: Dùng cặp thẻ <dl></dl> để xác định một danh sách kiểu mô tả (Description List). Lưu ý thẻ <dl> là viết tắt của chữ description list

<dl>
</dl>

Bước 2: Xác định các ý chính của danh sách bằng cặp thẻ <dt></dt>. Lưu ý thẻ <dt> là viết tắt của chữ description term

<dl>
  <dt>Coffee</dt>
  <dt>Milk</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. Lưu ý thẻ <dd> là viết tắt của chữ description describe

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Tôi sẽ lấy ví dụ như hình dưới đây cho các bạn dễ hiểu

5. Cách lồng các danh sách lại với nhau (Nested List)

Trong HTML, bạn có thể tiến hành xếp chồng một danh sách vào nhiều tầng bằng cách lồng thêm một danh sách nữa vào cặp thẻ <li> </li> của mục con mà bạn muốn thêm tầng cho nó, như ví dụ dưới đây.

Như hình trên bạn thấy tôi lồng cặp thẻ <ul></ul> vào cặp thẻ <ul></ul> thông qua cặp thẻ <li></<li>. Tương tự cũng có thể lồng cặp thẻ <ol></ol> vào cặp thẻ <ol></ol>. Ngoài ra còn có thể lồng các cặp thẻ như <ol></ol> vào cặp thẻ <ul></ul> hoặc ngược lại.

Lưu ý: Các mục trong danh sách có thể chứa danh sách mới và các phần tử HTML khác, như hình ảnh và liên kết, …

6. Danh sách ngang (Horizontal Lists)

Danh sách trong HTML có thể được tạo kiểu bằng nhiều cách khác nhau với CSS.

Một cách phổ biến là sắp xếp một danh sách theo chiều ngang, để tạo ra một menu.

Như hình trên là một ví dụ.

Bạn xem đến bài này chắc cũng đã hiểu về code ở trên. Nếu các bạn muốn hiểu nhiều hơn nữa về các kiểu các bạn hãy xem series CSS của tôi.

7. Lời cuối bài

Đến đây bài đã khá dài nên tôi không viết tiếp nữa mà phần bài tập về cái này sẽ viết ở bài kế tiếp. Bài viết này tôi thấy cũng thường dùng nên tôi viết rất kỹ, bạn nào còn thắc mắc có thể comment bên dưới tôi sẽ cố gắng trả lời trong thời gian sớm nhất.

The post [HTML bài 21] Các kiểu danh sách (list) appeared first on Học online.

from WordPress http://ift.tt/2wjWkyM
via IFTTT