Использовать элемент figure, чтобы сделать пометки на фото в документе, и элемент figcaption, чтобы определить подпись для фото:
figure
img src="pic_trulli.jpg" alt="Трулли"
style="width:100%"
figcaptionРис.1 - Трулли, Апулия, Италия./figcaption
/figure
Попробуйте сами »
Определение и использование figure
Тег figure определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т.д.
В то время как содержание элемента figure связано с основным потоком, его положение не зависит от основного потока, и если его удалить, он не должен влиять на поток документа.
Совет: Элемент figcaption используется для добавления подписи к элементу figure.
Поддержка браузеров figure
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| figure | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
Глобальные атрибуты figure
Тег figure также поддерживает Глобальные атрибуты в HTML.
События атрибутов figure
Тег figure также поддерживает События атрибутов в HTML.
Еще примеры figure
Использовать стиль 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="pic_trulli.jpg" alt="Trulli" style="width:100%"
figcaptionРис.1 - Трулли, Апулия, Италия/figcaption
/figure
/body
/html
Попробуйте сами »
Связные страницы figure
HTML DOM справочник: Объект figure
Настройки CSS по умолчанию figure
Большинство браузеров будут отображать элемент figure со следующими значениями по умолчанию:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Попробуйте сами »