HTML <summary> ετικέτα

  • Προηγούμενη Σελίδα <sub>
  • Επόμενη Σελίδα <sup>

定义和用法

<summary> 标签为 <details> 元素 定义了一个可见的标题。点击标题可以查看/隐藏详细信息。

注意：<summary> 元素应该是 <details> 元素 的第一个子元素。

另请参阅：

HTML DOM 参考手册：Summary 对象

实例

例子 1

使用 <summary> Στοιχεία:

<body>
  <details>
  <summary>Επίκεντρο του Μέλλοντος (Epcot Center)</summary>
<p>Epcot είναι ένα θέμα πάρκου στο Walt Disney World Resort με συναρπαστικές ατμοσφαιρές, διεθνείς εκθέσεις, βραβευμένες πυροτεχνικές και 季节性 δραστηριότητες.</p>

</html>

例子 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 είναι ένα θέμα πάρκου στο Walt Disney World Resort με συναρπαστικές ατμοσφαιρές, διεθνείς εκθέσεις, βραβευμένες πυροτεχνικές και 季节性 δραστηριότητες.</p>
</details>
</body>

</html>

Πανελλήνιοι Όροι

<summary> Η ετικέτα υποστηρίζει επίσης Προσπάθησε να το δοκιμάσεις!.

Αντικειμενικές Ενεργειών

<summary> Η ετικέτα υποστηρίζει επίσης Αντικειμενικά Ενεργειών στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Οι περισσότεροι προγραμματιστές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <summary> Στοιχεία:

summary {
  display: block;
}

Υποστήριξη Browser

Τα αριθμητικά στο πίνακα σημειώνουν την έκδοση του πρώτου προγράμματος που υποστηρίζει την ιδιότητα αυτή.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • Προηγούμενη Σελίδα <sub>
  • Επόμενη Σελίδα <sup>