HTML <summary> тег

  • Предыдущая страница <sub>
  • Следующая страница <sup>

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

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

обратите внимание:<summary> элемент должен быть <details> элемент .первым ребенком.

Дополнительная информация:

Руководство по HTML DOM:Объект резюме

пример

пример 1

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

<details>
  <summary>Центр будущего (Epcot Center)</summary>
  <p>Epcot - парк темы в Disney World Resort, который предлагает захватывающие достопримечательности, международные павильоны, награжденные призами фейерверки и сезонные мероприятия.</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 - парк темы в Disney World Resort, который предлагает захватывающие достопримечательности, международные павильоны, награжденные призами фейерверки и сезонные мероприятия.</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>