The details trong html và thuộc tinh - seoit.vn
<details> tag dùng để làm một hiểu ứng ẩn nội dung của một bài viết, thẻ <details> dùng để biểu thị chức năng cho phép có thể ẩn đi nội dung nằm bên trong nó gọn lại, và tạo một hiệu ứng cho phép người dùng có thể mở ra để xem thêm nội dung chi tiết hơn nằm đầy đủ bên trong thẻ <details>
<details> cũng có thể sử dụng để tạo một danh sách nằm bên trong nó với chức năng chỉ hiển thị tiêu đề chú thích và sẽ được ẩn danh sách, nếu người dùng muốn xem những gì nằm bên trong danh sách có thể mở ra để xem
Ví dụ: sau đây mình sẽ để một đoạn code được sử dụng thẻ <details> để biểu thị, hiệu ứng cho các bạn thấy rõ hơn về chức năng của thẻ <details> này,
code
<details>
<summary>
Bài thơ trâu ơi
</summary>
<p>
Trâu ơi ta bảo trâu này:
Trâu ra ngoài ruộng trâu cày với ta.
Cấy cày giữ nghiệp nông gia,
Ta đây trâu đấy, ai mà quản công.
Bao giờ cây lúa còn bông,
Thì còn ngọn cỏ ngoài đồng trâu ăn.
</p>
</details>
<details>
<summary> Danh sách các loại hoa </summary>
<ol>
<li>Hoa Hồng </li>
<li> Hoa Hướng Dương </li>
<li> Hoa Quỳnh </li>
<li> Hoa Lan </li>
<li> Hoa Đồng Tiền </li>
</ol>
</details>
Giao diện
Bài thơ trâu ơi
Trâu ơi ta bảo trâu này:
Trâu ra ngoài ruộng trâu cày với ta.
Cấy cày giữ nghiệp nông gia,
Ta đây trâu đấy, ai mà quản công.
Bao giờ cây lúa còn bông,
Thì còn ngọn cỏ ngoài đồng trâu ăn.
0 Nhận xét