Danh sách trong HTML

Có sẵn

1.1 Các loại danh sách

Danh sách trong HTML là một công cụ quan trọng để tổ chức và cấu trúc thông tin. Chúng cho phép hiển thị các phần tử với số hoặc điểm nhấn mạnh (dấu chấm). Hãy cùng xem xét chi tiết từng phần tử trong danh sách HTML: <ul>, <ol>, và <li>.

Danh sách không thứ tự (<ul>)

Thẻ <ul> được sử dụng để tạo danh sách không thứ tự (có dấu chấm) để các phần tử hiển thị với dấu chấm (điểm, vòng tròn, ô vuông).

Ví dụ:

HTML
<ul>
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
  <li>Phần tử thứ ba của danh sách</li>
</ul>

Danh sách có thứ tự (<ol>)

Thẻ <ol> được sử dụng để tạo danh sách có thứ tự. Các phần tử của danh sách hiển thị với số hoặc chữ cái.

Ví dụ:

HTML
<ol>
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
  <li>Phần tử thứ ba của danh sách</li>
</ol>

1.2 Phần tử danh sách <li>

Thẻ <li> được sử dụng để chỉ định từng phần tử trong danh sách, dù là danh sách không thứ tự hay có thứ tự. Nó luôn phải được đặt bên trong <ul> hoặc <ol>.

Làm thế nào để nhớ các thẻ này dễ dàng:

  • Ordered List – danh sách có thứ tự
  • Unordered List – danh sách không thứ tự
  • List Item – phần tử danh sách

Thuộc tính type

Thuộc tính này có thể được sử dụng trong <ul><ol> để thay đổi loại dấu hoặc kiểu đánh số. Ví dụ, cho <ol> có thể sử dụng các giá trị "1", "A", "a", "I", "i", và cho <ul> là "disc", "circle", "square".

Ví dụ về việc thay đổi kiểu dấu cho <ul>:

HTML
<ul type="square">
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
</ul>

Ví dụ về việc thay đổi kiểu đánh số cho <ol>:

HTML
<ol type="A">
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
</ol>

Thuộc tính start:

Thuộc tính này chỉ được sử dụng với <ol> để chỉ định số bắt đầu của danh sách.

Ví dụ:

HTML
<ol start="5">
  <li>Phần tử thứ năm của danh sách</li>
  <li>Phần tử thứ sáu của danh sách</li>
</ol>

Danh sách lồng nhau

Danh sách có thể được lồng nhau, điều này cho phép tạo ra các cấu trúc phức tạp hơn.

Ví dụ về danh sách lồng nhau:

HTML
<ul>
  <li>Phần tử đầu tiên của danh sách</li>
    <ul type="circle">
      <li>Phần tử đầu tiên lồng nhau</li>
      <li>Phần tử thứ hai lồng nhau</li>
    </ul>
  <li>Phần tử thứ hai của danh sách</li>
  <li>Phần tử thứ ba của danh sách</li>
</ul>
Quan trọng!
Thuộc tính CSS list-style-type cung cấp nhiều loại dấu hơn so với thuộc tính type. Hơn nữa, thuộc tính type được coi là đã lỗi thời.

1.3 Tạo kiểu cho danh sách

Danh sách có thể được tạo kiểu bằng CSS, thay đổi màu của điểm, loại điểm và khoảng cách.

Ví dụ về tạo kiểu:

CSS
ul.custom-list {
  list-style-type: katakana; /* Ký tự Katakana của Nhật Bản */
  color: blue; /* Màu của văn bản */
}

ol.custom-list {
  list-style-type: hiragana-iroha; /* Hệ thống sắp xếp Hiragana của Nhật Bản */
  color: green; /* Màu của văn bản */
}
HTML
<ul class="custom-list">
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
</ul>

<ol class="custom-list">
  <li>Phần tử đầu tiên của danh sách</li>
  <li>Phần tử thứ hai của danh sách</li>
</ol>

Như vậy, việc sử dụng <ul>, <ol>, và <li> giúp cấu trúc nội dung và cải thiện khả năng đọc của nó trên các trang web.

1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Danh sách không đánh số
Danh sách không đánh số
1
Nhiệm vụ
Frontend SELF VI,  mức độbài học
Đã khóa
Danh sách lồng nhau
Danh sách lồng nhau
Bình luận
  • Phổ biến
  • Mới
Bạn phải đăng nhập để đăng nhận xet
Trang này chưa có bất kỳ bình luận nào