Danh sách mô tả trong HTML

(8)
147 lượt xem
Share

Danh sách mô tả trong HTML là gì, nó khác gì với danh sách có thứ tự và không thứ tự trong HTML. Mời bạn đọc tham khảo qua bài viết dưới đây của eLib để biết thêm về danh sách mô tả trong HTML nhé!

Mục lục nội dung

Danh sách mô tả trong HTML

1. Danh sách mô tả trong HTML

Danh sách mô tả trong HTML cũng là một kiểu danh sách được hỗ trợ bởi HTML và XHTML. Nó còn được gọi là danh sách định nghĩa, nơi các mục được liệt kê như một từ điển.

Danh sách định nghĩa là rất thích hợp khi bạn muốn trình bày bảng thuật ngữ, danh sách các điều khoản hoặc danh sách giá trị tên khác.

Danh sách định nghĩa HTML bao gồm ba thẻ sau:

  1. Thẻ <dl> là thẻ bắt đầu của danh sách mô tả.
  2. Thẻ <dt> định nghĩa một thuật ngữ.
  3. Thẻ <dd> định nghĩa mô tả.

2. Ví dụ

<dl> 
  <dt> Bạch Dương </dt> 
  <dd> - Một trong 12 cung tử vi. </dd> 
  <dt> Bingo </dt> 
  <dd> - Là một món ăn </dd> 
  <dt> Leo </dt> 
  <dd> - Là một trong 12 cung tử vi. </dd> 
  <dt> Oracle </dt> 
  <dd> - Là một tập đoàn công nghệ đa quốc gia. </dd>   
</dl>

Kết quả:

Bạch Dương
- Một trong 12 cung tử vi.
Bingo
Là một món ăn
Leo
- Là một trong 12 cung tử vi.
Oracle
- Là một tập đoàn công nghệ đa quốc gia.

3. Định dạng CSS mặc định

Hầu hết các trình duyệt sẽ hiện thị phần tử <dl> với định dạng CSS như sau:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        dl {
            display: block;
            margin-top: 1em;
            margin-bottom: 1em;
            margin-left: 0;
            margin-right: 0;
       }
    </style>
</head>
<body>
    <dl>
        <dt>Điện thoại</dt>
        <dd>Thiết bị nhỏ gọn, cầm tay</dd>
        <dd>Có thể dùng để nhắn tin, nói chuyện</dd>
        <dt>Laptop</dt>
        <dd>Thiết bị có màn hình lớn và bàn phím</dd>
        <dd>Có thể dùng để xem phim, chơi game, nghe nhạc</dd>
    </dl>
</body>
</html>

Trên đây là bài viết của eLib.VN về Danh sách mô tả trong HTML. Đây cũng là một kiến thức cần thiết cho bạn trong quá trình lập trình. Vì vậy bạn đọc cần lưu tâm.

(8)
147 lượt xem
Share
Ngày:07/11/2020 Chia sẻ bởi:ngan
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM