HTML <summary> 标籤

  • หน้าก่อนหน้า <sub>
  • หน้าต่อไป <sup>

定义和用法

<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
  • หน้าก่อนหน้า <sub>
  • หน้าต่อไป <sup>