САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <summary>



Пример

Использование элемента <summary>:

<details>
  <summary>Центр Эпкот</summary>
  <p>Эпкот - это тематический парк на курорте Уолт Дисней с захватывающими аттракционами, международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями.</p>
</details>
Попробуйте сами »

Определение и использование

Тег <summary> определяет видимый заголовок для элемента <details>. По заголовку можно щелкнуть, чтобы просмотреть/скрыть детали.

Примечание: Тег <summary> должен быть первым дочерним элементом элемента <details> element.


Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.

Элемент
<summary> 12.0 79.0 49.0 6.0 15.0

Глобальные атрибуты

Тег <summary> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <summary> также поддерживает События атрибутов в HTML.



Еще примеры

Пример

Используйте CSS для стилизации & lt;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>Центр Эпкот</summary>
  <p>Эпкот - это тематический парк на курорте Уолт Дисней с захватывающими аттракционами, международными павильонами, отмеченными наградами фейерверками и сезонными специальными мероприятиями</p>
</details>

</body>
</html>
Попробуйте сами »

Связанные страницы

HTML DOM Справочник: Объект Summary


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <summary> со следующими значениями по умолчанию:

summary {
  display: block;
}