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:

Thẻ details trong HTML

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.

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>

Chạy Thử

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>

Chạy Thử

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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ details trong HTML.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thẻ details trong HTML
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn