HTML Тег <figure>
Приклад
Використовуйте елемент <figure> для позначення фотографії в документі та елемент <figcaption> для визначення підпису до фотографії:
<figure>
<img src="../images/pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <figure> визначає самодостатній вміст, як-от ілюстрації, діаграми, фотографії, переліки кодів тощо.
Хоча вміст елемента <figure> пов’язаний з основним потоком, його позиція не залежить від основного потоку, і якщо його видалити, це не повинно впливати на потік документа.
Порада: Елемент <figcaption> використовується для додавання підпису до елемента <figure>.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує елемент.
| Елемент | |||||
|---|---|---|---|---|---|
| <figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
Глобальні атрибути
Тег <figure> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <figure> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте CSS для стилізації елементів <figure> та <figcaption>:
<html>
<head>
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="../images/pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>
</body>
</html>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: Об’єкт Figure
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <figure> з наступними значеннями за замовчуванням:
Приклад
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Спробуйте самі »
