HTML Тег <summary>
Приклад
Використання елементу <summary>:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <summary> визначає видимий заголовок для елемента <details>. Заголовок можна клацнути, щоб переглянути/приховати деталі.
Примітка: Елемент <summary> має бути першим дочірнім елементом елемента <details>.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Глобальні атрибути
Тег <summary> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <summary> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте CSS, щоб стилізувати <details> та <summary>:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eee;
border: none;
box-shadow: 1px 1px 2px #bbb;
cursor: pointer;
}
details > p {
background-color: #eee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: Об’єкт Summary.
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <summary> з наступними значеннями за замовчуванням:
summary {
display: block;
}
