Danh sách trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Danh sách trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Danh sách không theo thứ tự trong HTML

Một danh sách không theo thứ tự bắt đầu bằng thẻ <ul>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li>. Mặc định các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn đen nhỏ):

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

Hiển thị trên trình duyệt

  • Coffee
  • Tea
  • Milk

Danh sách không theo thứ tự – đánh dấu các mục

Thuộc tính list-style-type sử dụng để định dạng danh sách các mục được đánh dấu.

Giá trị Mô tả
disc thiết lập các mục trong danh sách dạng bullet (mặc định)
circle thiết lập các mục trong danh sách dạng vòng tròn
square thiết lập các mục trong danh sách dạng hình vuông
none các mục trong danh sách không được đánh dấu

 

Ví dụ – disc

<ul style=”list-style-type:disc”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Hiển thị trên trình duyệt

  • Coffee
  • Tea
  • Milk

Ví dụ – circle

<ul style=”list-style-type:circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Hiển thị trên trình duyệt

  • Coffee
  • Tea
  • Milk

Ví dụ – square

<ul style=”list-style-type:square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Hiển thị trên trình duyệt

  • Coffee
  • Tea
  • Milk

Ví dụ – none

<ul style=”list-style-type:none”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Hiển thị trên trình duyệt

  • Coffee
  • Tea
  • Milk

Danh sách theo tứ tự trong HTML

Một danh sách được sắp xếp theo tứ tự bắt đầu với thẻ <ol>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li>. Danh sách các mục sẽ được đánh dấu bằng số theo mặc định:

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

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Danh sách theo tứ tự trong HTML – thuộc tính type

Thuộc tính type của thẻ <ol>, định nghĩa kiểu đánh dấu mục liệt kê:

Type Mô tả
type=”1″ danh sách các mục sẽ được đánh số (mặc định)
type=”A” các mục liệt kê sẽ được đánh bằng chữ hoa
type=”a” danh sách các mục sẽ được đánh với chữ thường
type=”I” danh sách các mục sẽ được đánh bằng chữ số La Mã hoa
type=”i” danh sách các mục sẽ được đánhbằng chữ số La Mã thường

Dạng số:

<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Chữ in hoa:

<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Chữ thường:

<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Chữ hoa số La Mã:

<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Chữ thường số La Mã:

<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Hiển thị trên trình duyệt

  1. Coffee
  2. Tea
  3. Milk

Danh sách mô tả trong HTML

HTML cũng hỗ trợ danh sách mô tả. Danh sách mô tả là danh sách các thuật ngữ, kèm theo mô tả của từng thuật ngữ. Thẻ <dl> xác định danh sách mô tả, thẻ <dt> định nghĩa từ (tên), và thẻ <dd> mô tả từng thuật ngữ:

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

Hiển thị trên trình duyệt

Coffee
– black hot drink
Milk
– white cold drink

Danh sách lồng nhau trong HTML

Danh sách có thể được lồng nhau:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Hiển thị trên trình duyệt

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

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, v.v.

Horizontal Lists

Danh sách HTML có thể được tạo định dạng 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:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>

</body>
</html>

Tổng kết

  • Sử dụng thẻ <ul> để xác định một danh sách không có thứ tự
  • Sử dụng thuộc tính list-style-type để xác định điểm đánh dấu danh sách
  • Sử dụng thẻ <ol> để xác định danh sách theo thứ tự
  • Sử dụng thuộc tính type để xác định kiểu đánh số
  • Sử dụng thẻ <li> để xác định một mục trong danh sách
  • Sử dụng thẻ <dl> để xác định danh sách mô tả
  • Sử dụng thẻ <dt> để xác định thuật ngữ mô tả
  • Sử dụng thẻ <dd> để mô tả thuật ngữ trong một danh sách mô tả
  • Danh sách có thể được lồng bên trong các danh sách
  • Các mục trong danh sách có thể chứa các phần tử HTML khác
  • Sử dụng thuộc tính float:left hoặc display:inline để hiển thị danh sách theo chiều ngang

Các thẻ list trong HTML

Thẻ Mô tả
<ul> xác định một danh sách không có thứ tự
<ol> xác định một danh sách theo thứ tự
<li> xác định một mục trong danh sách
<dl> xác định danh sách mô tả
<dt> dịnh nghĩa thuật ngữ trong danh sách mô tả
<dd> mô tả thuật ngữ trong danh sách mô tả

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: