| WebReference
Используется для группирования любых элементов, например, изображений и подписей к ним. <figure> (от англ. figure — рисунок, иллюстрация) не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.
Синтаксис
<figure> ... </figure>
Атрибуты
Нет.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>FIGURE</title> <style> figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ } </style> </head> <body> <article> <figure> <p><img src=»image/thumb1.
Рис. 1. Использование <figure>
Спецификация
Спецификация | Статус |
---|---|
WHATWG HTML Living Standard | Живой стандарт |
HTML5 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
9 | 12 | 5 | 11.10 | 5.1 | 4 |
2.2 | 4 | 11 | 5 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- <figcaption>
- Добавление медиа-контента
- Элемент <figure>
Практика
- Подпись перед картинкой
- Подпись под картинкой
- Элемент <figure>
Тег | HTML справочник
HTML тегиЗначение и применение
Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.
Благодаря тегу <figcaption> вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>. Тег <figcaption> должен размещаться как первый, или последний элемент внутри тега <figure>.
Поддержка браузерами
Тег | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
<figure> | 6.![]() | 4.0 | 11.1 | 5.0 | 9.0 | 12.0 |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <figure></title> </head> <body> <main> <figure> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <figcaption>Ничоси 1</figcaption> </figure> <figure> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> <figcaption>Ничоси 2</figcaption> </figure> </main> </body> </html>
В этом примере основное содержимое документа поместили внутри тега <main>, в который мы поместили
два элемента <figure>, каждый из которых содержит внутри себя изображение (тег <img>) шириной и высотой 80 пикселей. Кроме того тегом <figcaption> мы вывели текстовое пояснение к содержимому каждого элемента <figure>.
Результат нашего примера:
Пример использования тега <figure>.Обратите внимание, что если вы разместите элемент <figcaption> первым вложенным элементом тега <figure>, то пояснение будет отображаться сверху изображения:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <figcaption></title> </head> <body> <main> <figure> <figcaption>Ничоси 1</figcaption> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </figure> <figure> <figcaption>Ничоси 2</figcaption> <img src = "10.jpg" alt = "ничоси" width = "80" height = "80"> </figure> </main> </body> </html>
Результат нашего примера:
Пример использования тега <figcaption>Значение CSS по умолчанию
figure { display : block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиHTML5 тег фигуры — GeeksforGeeks
Улучшить статью
Сохранить статью
- Уровень сложности: Easy
- Последнее обновление: 22 июл, 2022
Улучшить статью
Сохранить статью
Тег
Синтаксис:
<Рисунок> Содержание изображения ... Рисунок>
Атрибуты: Он содержит в основном два метки, которые перечислены ниже:
- IMG SRC :
- используется для добавления источника изображения в документ.
- figcaption : Этот тег используется для установки подписи к изображению.
- используется для добавления источника изображения в документ.
Пример:
HTML
>
ширина = "304" высота = "228"0063 |
Output:
Supported Browsers:
- Google Chrome 8
- Edge 12
- Firefox 4
- Internet Explorer 9
- Safari 5.
1
- Opera 11
Статьи по теме
Что нового
Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика в отношении файлов cookie и Политика конфиденциальности
Элемент фигуры
Если вы не знаете, что такое элемент или как вы должны его использовать, я рекомендую вам прочитать учебник «Теги и атрибуты HTML », который вы можете найти в разделе руководств HTML .
Содержание
- 01Описание
- 02Примеры
- 03Атрибуты
- Глобальные атрибуты
- Глобальные события
Описание
Элемент figure
представляет собой часть автономного содержимого, которое обычно используется для включения изображений или графики, диаграмм, справочных таблиц, видео, стихов, фрагментов кода и т. д. Они могут иметь легенду или подпись (
элемент figcaption
), который можно использовать для ссылки на фрагмент из другого места в документе. Рядом с необязательным заголовком элемент фигуры
может содержать множество других элементов, включая изображения ( img
), абзацы ( p
), компьютерный код ( код
), цитаты ( cite
) и т. д.
Автономность означает, что фигура
имеет определенную степень независимости от потока документа, и ее положение относительно окружающего содержимого не обязательно должно быть точным.
Изображения, размещенные рядом с блоками текста в газетах, представляют собой хорошие примеры правильного использования элементов рисунок
и figcaption
.
Когда фигура
имеет информацию, только косвенно связанную с окружающим содержимым, вместо нее следует использовать элемент aside
, опционально содержащий фигуру
.
Примеры
В следующем примере показана фигура
, содержащая изображение с подписью. Это типичное представление статьи в журнале или газете, где изображения обычно сопровождают текст и предоставляют дополнительную информацию.
В данном случае мы решили не использовать элемент вместо
, потому что информация на изображении помогает понять содержание статей. Другими словами, это имеет значение.
Диаграмма A: Использование браузеровАнализ использования браузера
<рисунок>![]()
Диаграмма A: Использование браузеров рисунок>В битве за доменный веб-доступ лидирует браузер Chrome, на долю которого приходится более 40 % пользователей. Как вы можете видеть на диаграмме A, это почти вдвое больше, чем у его первого конкурента, Internet Explorer, который занимает второе место с 24%.
Другие браузеры, не представленные в этой диаграмме, составляют меньшинство и в совокупности составляют 14% пользователей настольных компьютеров в мире.
![]()
Среди мобильных браузеров лидирует Android Browser с 22,77 % пользователей, за ним следует Chrome с 16,67 % рынка.
В битве за доменный доступ к Интернету браузер Chrome лидирует с более чем 40% пользователей. Как вы можете видеть на диаграмме A, это почти вдвое больше, чем у его первого конкурента, Internet Explorer, который занимает второе место с 24%.
Другие браузеры, не представленные в этой диаграмме, составляют меньшинство и в совокупности составляют 14% пользователей настольных компьютеров в мире.
В области мобильных браузеров лидирует Android Browser с 22,77% пользователей, за ним следует Chrome с 16,67% рынка.
Обратите внимание на один важный момент в предыдущем примере: внутритекстовая ссылка на диаграмму создается ее заголовком ( figcaption
) вместо использования пробельных ссылок, таких как «диаграмма справа». Это обеспечивает определенную степень независимости, которая позволит авторам и, в конечном итоге, браузерам перемещать фигуру в соответствии с потребностями (например, для улучшения отображения контента на устройствах с уменьшенным размером экрана).
Наш следующий пример показывает фрагмент стихотворения, который рассматривается в окружающем тексте. Опять же, ссылка сделана подписью ( figcaption
).
А в 13й строфе мы видим, как рассказчик начинает понимать, что на самом деле означает слово птица.
<рисунок>Это я сидел и угадывал, но ни слога не выражал
Птице, чьи огненные глаза теперь впились мне в сердце;
Об этом и многом другом я сидел и гадал, непринужденно откинув голову
На бархатной подкладке подушки, над которой злорадствовал свет лампы,
Но чья бархатная фиолетовая подкладка в свете лампы злорадствует над ней,
Она будет давить, ах, никогда больше!Ворон (13th строфа) Эдгара Аллана По рисунок>
А в строфе 13 th мы видим, как рассказчик начинает понимать, что на самом деле означает слово птица.
Это я сидел и угадывал, но ни один слог не выражал
Птице, чьи огненные глаза теперь впились в сердцевину моей груди;
Об этом и многом другом я сидел и гадал, непринужденно откинув голову
На бархатной подкладке подушки, над которой злорадствовал свет лампы,
Но чья бархатная лиловая подкладка в свете лампы злорадствует над ней,
Она будет давить, ах, никогда больше!
Сейчас мы напишем краткую биографию Чарльза Диккенса и сопроводим наш текст его портретом. Хотя у нас может возникнуть соблазн использовать
вместо
из-за меньшей релевантности между , фигурой
и содержанием, особенно в отличие от предыдущих двух примеров, где на фигуру ссылаются из текста. Тем не менее, изображение отображает конкретную тему, о которой идет речь в тексте, и это является хорошей причиной для использования цифра
элемент в одиночку.
Чарльз Диккенс
<рисунок>рисунок>
Чарльз Джон Хаффам Диккенс — английский писатель и общественный критик. Он создал одних из самых запоминающихся вымышленных персонажей в мире и считается величайшим писателем викторианского периода. При жизни его произведения пользовались небывалой славой, а к ХХ веку его литературный гений получил широкое признание критиков и ученых. Его романы и рассказы по-прежнему пользуются широкой популярностью.
Чарльз Джон Хаффам Диккенс — английский писатель и общественный критик. Он создал одних из самых запоминающихся вымышленных персонажей в мире и считается величайшим писателем викторианского периода. При жизни его произведения пользовались небывалой славой, а к ХХ веку его литературный гений получил широкое признание критиков и ученых. Его романы и рассказы продолжают пользоваться широкой популярностью.
Предыдущий случай также представляет собой хороший пример, когда заголовок не нужен.
А теперь последний пример, чтобы показать особый тип ситуаций, когда использование цифра
приведет к неудобству. Здесь фрагмент кода представлен таким образом, что становится частью потока текста. Помните, что фигура
должна быть автономной и позиционно независимой от своего окружения.
Вы должны изменить владельца файла, чтобы программа могла его открыть. Вы можете сделать это, выполнив команду:
sudo chown maras passwords.txt
После выполнения этого шага...
Вы должны изменить владельца файла, чтобы программа могла его открыть.