List (danh sách) trong HTML

List (danh sách) là gì?

Khi thiết kế website list thường sử dụng trong thiết kế menu hoặc danh sách thông tin nào đó. Thông tin được biểu diễn với list sẽ dễ nhìn và dễ quản lý hơn.

Để biểu diễn danh sách HTML quy ước làm 3 loại list:

• Kiểu không sắp xếp (Unordered List): Danh sách sẽ không được sắp xếp mà sử dụng các ký hiệu để biểu diễn thông tin. Ví dụ như hiện tại ta đang sử dụng list và sử dụng ký hiệu đánh chỉ mục là hình tròn.
• Kiểu sắp xếp (Ordered List):Danh sách sẽ được hiển thị theo thứ tự tăng dần hoặc giảm dần và được đánh chỉ số để mục bởi các chữ cái hoặc chữ số.
• Kiểu mô tả (Description List): Danh sách sẽ không được đánh chỉ mục nhưng đi kèm với danh sách sẽ là một đoạn mô tả.

Unordered List

Kiểu danh sách không sắp xếp được khai báobằng cặp thẻ <ul> </ul>. Mỗi chỉ mục sẽ được đánh dấu bởi cặp thẻ <li> </li> .

Cùng xét ví dụ sau:

<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Safari</li>
</ul>

 

Ordered List

Kiểu danh sách không sắp xếp được khai báobằng cặp thẻ <ol> </ol>. Mỗi chỉ mục sẽ được đánh dấu bởi cặp thẻ <li> </li> .

Cùng xét ví dụ sau:

<ol>
<li>An</li>
<li>Bình</li>
<li>Cảnh</li>
<li>Duy</li>
</ol>

Description List

Kiểu danh sách mô tả sẽ khác một chút so với 2 kiểu trên. Để khai báo kiểu danh sách mô tả ta đánh dấu bằng cặp thẻ <dl> </dl>. Mỗi chỉ mục đánh dấu bằng cặp thẻ <dt> </dt>. Mô tả theo chỉ mục được đánh dấu bằng cặp thẻ <dd> </dd>.

Cùng xét ví dụ:

<dl>
  <dt>HTML</dt>
  <dd>Xây dựng khung cho trang website</dd>
  <dt>CSS</dt>
  <dd>Sử dụng định dạng giao diện cho website</dd>
  <dt>Javascript</dt>
  <dd>Hỗ trợ các hiệu ứng cho website</dd>
</dl>

Danh sách lồng nhau

Chúng ta có thể lồng các kiểu danh sách khác nhau với  nhau. Để phân biệt các danh sách ta thêm cặp thẻ <li> </li> để đánh dấu cho các danh sách.

Cùng xét ví dụ:

<ul>
  <li>Khối A
    <ol>
      <li>Toán</li>
      <li>Lý </li>
      <li>Hóa</li>
    </ol>
  </li>
  <li>Khối B
    <ol>
      <li>Toán</li>
      <li>Hóa</li>
      <li>Sinh</li>
    </ol>
  </li>
</ul>

Bước đầu của bài hôm nay chúng ta mới chỉ làm quen với các kiểu list, về sau khi kết hợp với CSS bạn có thể sử dụng list để làm menu hiển thị theo ý muốn cùng các hiệu ứng đơn giản.

Comments

comments