Figure html: Тег | htmlbook.ru

| 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. jpg» alt=»»></p> <figcaption>Софийский собор</figcaption> </figure> <figure> <p><img src=»image/thumb2.jpg» alt=»»></p> <figcaption>Польский костел</figcaption> </figure> </article> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование <figure>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

912511.105.14
2.24115
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • <figcaption>
  • Добавление медиа-контента
  • Элемент <figure>

Практика

  • Подпись перед картинкой
  • Подпись под картинкой
  • Элемент <figure>

Тег | HTML справочник

HTML теги

Значение и применение

Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму или даже таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Благодаря тегу <figcaption> вы можете вывести пояснение к содержимому, которое находится внутри тега <figure>. Тег <figcaption> должен размещаться как первый, или последний элемент внутри тега <figure>.

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

Тег
Chrome

Firefox

Opera

Safari

IExplorer

Edge
<figure>6.
0
4.011.15.09.012.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>.

Элемент <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

  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    Тег

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

    Синтаксис:

     <Рисунок> Содержание изображения ...  

    Атрибуты: Он содержит в основном два метки, которые перечислены ниже:

    • IMG SRC :

    • используется для добавления источника изображения в документ.
    • figcaption : Этот тег используется для установки подписи к изображению.

    Пример:

    HTML

     

    < html

    >

     

         < body >

     

             < h2 >GeeksforGeeks h2 >

             < h3 цифра >< 0063 > Tag h3 >

            

             < figure >

                 < img src =

                 alt = "Кафедра кафедры"

    ширина = "304" высота = "228"0063 >

                 < figcaption >Geeks logo figcaption >

             figure >

            

            

         корпус >

     

    html 9        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Атрибуты
      • Глобальные атрибуты
    • 04События
      • Глобальные события

    Описание

    Элемент figure представляет собой часть автономного содержимого, которое обычно используется для включения изображений или графики, диаграмм, справочных таблиц, видео, стихов, фрагментов кода и т. д. Они могут иметь легенду или подпись ( элемент figcaption ), который можно использовать для ссылки на фрагмент из другого места в документе. Рядом с необязательным заголовком элемент фигуры может содержать множество других элементов, включая изображения ( img ), абзацы ( p ), компьютерный код ( код ), цитаты ( cite ) и т. д.

    Автономность означает, что фигура имеет определенную степень независимости от потока документа, и ее положение относительно окружающего содержимого не обязательно должно быть точным.

    Изображения, размещенные рядом с блоками текста в газетах, представляют собой хорошие примеры правильного использования элементов рисунок и figcaption .

    Когда фигура имеет информацию, только косвенно связанную с окружающим содержимым, вместо нее следует использовать элемент aside , опционально содержащий фигуру .

    Примеры

    В следующем примере показана фигура , содержащая изображение с подписью. Это типичное представление статьи в журнале или газете, где изображения обычно сопровождают текст и предоставляют дополнительную информацию.

    В данном случае мы решили не использовать элемент вместо , потому что информация на изображении помогает понять содержание статей. Другими словами, это имеет значение.

      

    Анализ использования браузера

    <рисунок>
    Диаграмма A: Использование браузеров

    В битве за доменный веб-доступ лидирует браузер Chrome, на долю которого приходится более 40 % пользователей. Как вы можете видеть на диаграмме A, это почти вдвое больше, чем у его первого конкурента, Internet Explorer, который занимает второе место с 24%.

    Другие браузеры, не представленные в этой диаграмме, составляют меньшинство и в совокупности составляют 14% пользователей настольных компьютеров в мире.

    Среди мобильных браузеров лидирует Android Browser с 22,77 % пользователей, за ним следует Chrome с 16,67 % рынка.

    Диаграмма A: Использование браузеров

    В битве за доменный доступ к Интернету браузер Chrome лидирует с более чем 40% пользователей. Как вы можете видеть на диаграмме A, это почти вдвое больше, чем у его первого конкурента, Internet Explorer, который занимает второе место с 24%.

    Другие браузеры, не представленные в этой диаграмме, составляют меньшинство и в совокупности составляют 14% пользователей настольных компьютеров в мире.

    В области мобильных браузеров лидирует Android Browser с 22,77% пользователей, за ним следует Chrome с 16,67% рынка.

    Обратите внимание на один важный момент в предыдущем примере: внутритекстовая ссылка на диаграмму создается ее заголовком ( figcaption ) вместо использования пробельных ссылок, таких как «диаграмма справа». Это обеспечивает определенную степень независимости, которая позволит авторам и, в конечном итоге, браузерам перемещать фигуру в соответствии с потребностями (например, для улучшения отображения контента на устройствах с уменьшенным размером экрана).

    Наш следующий пример показывает фрагмент стихотворения, который рассматривается в окружающем тексте. Опять же, ссылка сделана подписью ( figcaption ).

     

    А в 13й строфе мы видим, как рассказчик начинает понимать, что на самом деле означает слово птица.

    <рисунок>

    Это я сидел и угадывал, но ни слога не выражал
    Птице, чьи огненные глаза теперь впились мне в сердце;
    Об этом и многом другом я сидел и гадал, непринужденно откинув голову
    На бархатной подкладке подушки, над которой злорадствовал свет лампы,
    Но чья бархатная фиолетовая подкладка в свете лампы злорадствует над ней,
    Она будет давить, ах, никогда больше!

    Ворон (13th строфа) Эдгара Аллана По

    А в строфе 13 th мы видим, как рассказчик начинает понимать, что на самом деле означает слово птица.

    Это я сидел и угадывал, но ни один слог не выражал
    Птице, чьи огненные глаза теперь впились в сердцевину моей груди;
    Об этом и многом другом я сидел и гадал, непринужденно откинув голову
    На бархатной подкладке подушки, над которой злорадствовал свет лампы,
    Но чья бархатная лиловая подкладка в свете лампы злорадствует над ней,
    Она будет давить, ах, никогда больше!

    Ворон (13 th stanza) Эдгара Аллана По

    Сейчас мы напишем краткую биографию Чарльза Диккенса и сопроводим наш текст его портретом. Хотя у нас может возникнуть соблазн использовать вместо из-за меньшей релевантности между , фигурой и содержанием, особенно в отличие от предыдущих двух примеров, где на фигуру ссылаются из текста. Тем не менее, изображение отображает конкретную тему, о которой идет речь в тексте, и это является хорошей причиной для использования цифра элемент в одиночку.

      

    Чарльз Диккенс

    <рисунок>

    Чарльз Джон Хаффам Диккенс — английский писатель и общественный критик. Он создал одних из самых запоминающихся вымышленных персонажей в мире и считается величайшим писателем викторианского периода. При жизни его произведения пользовались небывалой славой, а к ХХ веку его литературный гений получил широкое признание критиков и ученых. Его романы и рассказы по-прежнему пользуются широкой популярностью.

    Чарльз Джон Хаффам Диккенс — английский писатель и общественный критик. Он создал одних из самых запоминающихся вымышленных персонажей в мире и считается величайшим писателем викторианского периода. При жизни его произведения пользовались небывалой славой, а к ХХ веку его литературный гений получил широкое признание критиков и ученых. Его романы и рассказы продолжают пользоваться широкой популярностью.

    Предыдущий случай также представляет собой хороший пример, когда заголовок не нужен.

    А теперь последний пример, чтобы показать особый тип ситуаций, когда использование цифра приведет к неудобству. Здесь фрагмент кода представлен таким образом, что становится частью потока текста. Помните, что фигура должна быть автономной и позиционно независимой от своего окружения.

     

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

    sudo chown maras passwords.txt

    После выполнения этого шага...

    Вы должны изменить владельца файла, чтобы программа могла его открыть.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *