This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<figure>: Элемент иллюстрации с необязательной подписью
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент<figure> (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (<figcaption>). Диаграмма и её подпись представляет собой единое целое.
Интерактивный пример
<figure> <img src="/shared-assets/images/examples/elephant.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption></figure>figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto;}img { max-width: 220px; max-height: 150px;}figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center;}| Категории контента | Основной поток,секционный корень, явный контент |
|---|---|
| Допустимое содержимое | Элемент<figcaption> за которым следуетосновной поток; или поточный контент за которым следует элемент<figcaption>; или поточный контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы принимающиеосновной поток. |
| Допустимые ARIA-роли | group,presentation |
| DOM-интерфейс | HTMLElement |
Атрибуты
Этот элемент поддерживает толькоглобальные атрибуты.
Примечания по использованию
- Обычно
<figure>это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесён в другую часть документа или в приложение не нарушив основной поток. - Являясьсекционным корнем, структура содержимого элемента
<figure>исключается из основной структуры документа. - Подпись может быть связана с элементом
<figure>с помощью вставки<figcaption>внутри него (как первый или последний потомок). Первый элемент<figcaption>в иллюстрации предоставляет её подпись (заголовок).
Примеры
Иллюстрации
html
<!-- Just an image --><figure> <img src="/shared-assets/images/examples/favicon144.png" alt="The beautiful MDN logo." /></figure><!-- Image with a caption --><figure> <img src="/shared-assets/images/examples/favicon144.png" alt="The beautiful MDN logo." /> <figcaption>MDN Logo</figcaption></figure>Фрагменты кода
html
<figure> <figcaption>Get browser details using <code>navigator</code>.</figcaption> <pre>function NavigatorExample() { var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt);} </pre></figure>Цитирования
html
<figure> <figcaption><cite>Edsger Dijkstra:</cite></figcaption> <blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. </blockquote></figure>"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.
Стихи
html
<figure> <p> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. </p> <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption></figure>Спецификации
| Specification |
|---|
| HTML # the-figure-element |
Совместимость с браузерами
Смотрите также
- Элемент
<figcaption>.