HTML <summary> แบบบันทึก
定义和用法
<summary>
标签为 <details> 元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。
注意:<summary>
元素应该是 <details> 元素 的第一个子元素。
另请参阅:
HTML DOM 参考手册:Summary 对象
实例
例子 1
使用 <summary>
องค์ประกอบ:
<details> <summary>ศูนย์เมืองโลกเฟอร์มาวัน (Epcot Center)</summary> <p>Epcot คือสวนสนุกในเวิลด์เดอะดิสนีย์ ซึ่งมีจุดท่องเที่ยวที่น่าตื่นเต้น ร้านค้าระหว่างประเทศ ไฟไฟแห่งรางวัลและกิจกรรมฤดูกาล</p> </details>
例子 2
使用 CSS 设置 <details> 和 <summary>
的样式:
<html> <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> <body> <details> <summary>ศูนย์เมืองโลกเฟอร์มาวัน (Epcot Center)</summary> <p>Epcot คือสวนสนุกในเวิลด์เดอะดิสนีย์ ซึ่งมีจุดท่องเที่ยวที่น่าตื่นเต้น ร้านค้าระหว่างประเทศ ไฟไฟแห่งรางวัลและกิจกรรมฤดูกาล</p> </details> </body> </html>
คุณสมบัติโลก
<summary>
แบบบันทึกยังสนับสนุน คุณสมบัติโลกใน HTML.
คุณสมบัติเหตุการณ์
<summary>
แบบบันทึกยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML.
การตั้งค่า CSS โดยปริยาย
โดยทั่วไปแล้วบราวเซอร์จะแสดงค่าดังนี้ <summary>
องค์ประกอบ:
summary { display: block; }
การสนับสนุนโปรแกรมบราวเซอร์
ตัวเลขในตารางนี้ระบุว่าสำหรับบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
12.0 | 79.0 | 49.0 | 6.0 | 15.0 |