HTML <figure> тег

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

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

<figure> тег определяет содержимое, которое включает себя, например, иллюстрации, диаграммы, фотографии, списки кода и т.д.

Хотя <figure> Содержимое элемента связано с主要内容ом, но его положение независимо от основного потока содержимого. Если удалить его, это не должно повлиять на поток документа.

Совет:Используйте элемента <figcaption> Для <figure> Добавление заголовка к элементу.

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

Руководство по HTML DOM:Объект Figure

Пример

Пример 1

Использование элемента <figure> для маркировки фотографий в документе, использование элемента <figcaption> для определения заголовка фотографии:

<figure>
  <img src="trulli.jpg" alt="Трулли" style="width:100%">
  <figcaption>Изображение 1 - Трулли в регионе Пулия, Италия.</figcaption>
</figure>

Попробуйте сами

Пример 2

Использование 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="trulli.jpg" alt="Трулли" style="width:100%">
  <figcaption>Изображение 1 - Трулли в регионе Пулия, Италия.</figcaption>
</figure>
</body>
</html>

Попробуйте сами

Глобальные свойства

<figure> Тег также поддерживает Глобальные свойства в HTML.

свойства событий

<figure> Тег также поддерживает Свойства событий в HTML.

Стандартные CSS настройки

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <figure> Элемент:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Попробуйте сами

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот элемент.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Комментарий: Тег <figure> является новым тегом в HTML 5.

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