- Trang chủ
- Tham khảo
- Tag html
- <dd>
Định nghĩa và sử dụng- Tag <dd> được sử dụng để mô tả các mục trong danh sách
<dl>.
- Tag <dd> sử dụng kết hợp với <dl> (xác định danh sách) và <dt> (định nghĩa các mục trong danh sách - có thể xem như tiêu đề của các mục).
- Bên trong tag <dd> có thể được đặt một đoạn văn bản (<p>), một hình
ảnh (<img />), một liên kết (<a>) hay những tag khác...
Sự khác nhau giữa HTML và XHTML
HTML4.01 | XHTML1.0 | XHTML1.1 |
---|
Không có sự khác biệt
|
Cấu trúcViết bên trong tag <dl>: <dl> <dt></dt> <dd></dd> </dl> Html viết:<dl> <dt>Trái cây</dt> <dd>Trái cam</dd> <dt>Sinh tố</dt> <dd>Mãng cầu</dd> </dl> Hiển thị trình duyệt:Trái cây:Trái camSinh tố:Mãng cầu
Trình duyệt hỗ trợ<dd> được hỗ trợ trong đa số các trình duyệt. Thuộc tínhCách sử dụng: <dd thuoctinh="giatri"></dd> Thuộc tính tổng quát (xem thêm)
Thuộc tính | Giá trị | Ví dụ | Mô tả |
---|
class
| Tên class
| class="section"
| Tên class
| dir
| rtl
ltr
| dir="rtl"
| Xác định hướng văn bản cho các nội dung trong một thành phần.
| id
| Tên id
| id="layout"
| Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
| lang
| Mã ngôn ngữ
| lang="vi"
| Xác định mã ngôn ngữ cho nội dung trong một thành phần.
| style
| Kiểu định dạng
| style="color: red"
| Xác định một định dạng cho một thành phần.
| title
| Text
| title="Đây là title"
| Xác định thêm thông tin cho thành phần.
| xml:lang
| Mã ngôn ngữ
| lang="vi"
| Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
|
Thuộc tính sự kiệnKhông được hỗ trợ trong DTD Strict
Thuộc tính | Giá trị | Ví dụ | Mô tả |
---|
onclick
| Code script
| onclick="code"
| Script chạy khi click chuột.
| ondblclick
| Code script
| ondblclick="code"
| Script chạy khi double click chuột.
| onmousedown
| Code script
| onmousedown="code"
| Script chạy khi button chuột được nhấn.
| onmousemove
| Code script
| onmousemove="code"
| Script chạy khi di chuyển con trỏ chuột.
| onmouseout
| Code script
| onmouseout="code"
| Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
| onmouseover
| Code script
| onmouseover="code"
| Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
| onmouseup
| Code script
| onmouseup="code"
| Script chạy khi button chuột được thả ra.
| onkeydown
| Code script
| onkeydown="code"
| Script chạy khi nút trên bàn phím được nhấn.
| onkeypress
| Code script
| onkeypress="code"
| Script chạy khi nút trên bàn phím được nhấn và thả ra.
| onkeyup
| Code script
| onkeyup="code"
| Script chạy khi nút trên bàn phím được thả ra.
| - Trang chủ
- Hướng dẫn học
- Hướng dẫn học HTML/HTML5
- Thẻ xác định danh sách
Định nghĩaĐịnh nghĩa danh sách trong HTML/HTML5 có nhiều dạng khác nhau, mỗi dạng sẽ
theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/HTML5. Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ: - <dl></dl> viết tắt của chữ "definition list" có
nghĩa là sự xác định (hay định nghĩa) danh sách.
- <dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục.
- <dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.
Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng cho danh sách không
có phần nội dung mô tả. HTML viết<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Tiêu đề trang web</title> </head> <body> <dl> <dt>Trái cây:</dt> <dd>giúp bỗ sung vitamin cho cơ thể.</dd> <dt>Nước:</dt> <dd>giúp chúng ta tăng cường lượng nước cần cho cơ thể.</dd> <dt>Thịt:</dt> <dd>giúp
cơ thể tăng cường đạm, và chất béo.</dd> </dl> </body> </html> Hiển thị trình duyệt:Trái cây:giúp bỗ sung vitamin cho cơ thể.Nước:giúp chúng ta tăng cường lượng nước cần cho cơ thể.Thịt:giúp cơ thể tăng cường đạm, và chất béo. Xem thêm ví dụ Cấu trúc và
cách dùngCấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây: - Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>, <dd></dd>.
- Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline.
- Bên trong thẻ <dd></dd> chứa được hầu hết các thẻ HTML/HTML5, tuy nhiên không
được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>,
<link></link>. Và một số thẻ không nên chứa như: <style></style>, <script></script>.
- Thẻ <dt></dt> và <dd></dd> phải được viết trực tiếp bên trong <dl></dl>:
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> - Bên trong thẻ <dl></dl> chỉ chứa trực tiếp thẻ <dt></dt> và <dd></dd>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:
<dl> <h2></h2> <dt></dt> <dd></dd> </dl>
<dl> <dt></dt> <p></p> <dd></dd> </dl> <dl> <dt></dt> <div> <dd></dd> </div> </dl> Những cấu trúc không nên sử dụngNhững cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ <dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình
duyệt lúng túng trong việc xác định thẻ. Cấu trúc thiếu vắng <dt></dt>: thiếu mục. <dl> <dd></dd> </dl> Cấu trúc thiếu vắng <dd></dd>: thiếu mô tả mục. <dl> <dt></dt> </dl> Cấu trúc lặp nhiều <dt></dt> cùng lúc: nhiều mục, nhưng thiếu mô tả. <dl> <dt></dt> <dd></dd>
<dt></dt> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> Cấu trúc lặp nhiều <dd></dd> cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần viết tất cả mô tả trong một <dd></dd> là được. <dl> <dt></dt> <dd></dd> <dd></dd> <dd></dd> <dt></dt>
<dd></dd> </dl> Cấu trúc lồng <dl></dl> bên trong <dl></dl> khác: Cấu trúc này rườm rà khó điều khiển, ta nên sử dụng cấu trúc <div></div> và <hx></hx> kết hợp <dl></dl> thay thế. <dl> <dt></dt> <dd> <dl> <dt></dt> <dd></dd> </dl> </dd> <dt></dt> <dd>
<dl> <dt></dt> <dd></dd> </dl> </dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> Cấu trúc trên ta thay thế như sau: <div> <h2></h2> <div> <dl> <dt></dt> <dd></dd> </dl> </div> <h2></h2> <div>
<dl> <dt></dt> <dd></dd> </dl> </div> <h2></h2> <div></div> <h2></h2> <div></div> </div> |