Thẻ details trong HTML
Bùi Tấn Lực - 313
- 27/09/2025
Thẻ details trong HTML cho phép click mở và đóng để xem chi tiết một nội dung, bạn có thể đặt tên của tiêu đề vào thẻ summary, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thẻ details trong HTML
Thẻ details trong HTML cho phép click mở và đóng để xem chi tiết một nội dung, bạn có thể đặt tên của tiêu đề vào thẻ summary, nếu không sử dụng thẻ summary thì tiêu đề mặc định là chi tiết.
Cú pháp của Thẻ details trong HTML
<details>
<summary>Xem chi tiết</summary>
baiviet
</details>
baiviet: Bài viết chi tiết bao gồm thẻ HTML cha chứa nhiều thẻ HTML con.
summary: Thẻ summary chứa tiêu đề, nếu không dùng thẻ này thì mặc định tiêu đề là chữ Chi tiết.
Bao gồm thẻ mở <details> và thẻ đóng </details> bao quanh thẻ tiêu đề summary và bài viết.
Code Thẻ details trong HTML
Thẻ details mặc định trong HTML
Sử dụng thẻ summary để đặt tên cho tiêu đề:
<details>
<summary>Xem chi tiết</summary>
<p>Hãy Chạy thử Thẻ details mặc định trong HTML, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</details>
Css cho Thẻ details trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ details trong HTML</title>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>Css cho Thẻ details trong HTML</h1>
<details>
<summary>Xem chi tiết</summary>
<p>Hãy Chạy thử Thẻ details mặc định trong HTML, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</details>
</body>
</html>
Thẻ details không sử dụng summary trong HTML
Không đặt tên tiêu đề, sử dụng mặc định chữ Chi tiết:
<details>
<p>Hãy Chạy thử Thẻ details mặc định trong HTML, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</details>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ details trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
