Что такое figure в html
Перейти к содержимому

Что такое figure в html

  • автор:

Что такое figure в html

Используется для группирования любых элементов, например, изображений и подписей к ним. (от англ. figure — рисунок, иллюстрация) не должен быть связан непосредственно с основным содержимым документа и при его перемещении в другое место смысл текста не должен меняться. Обычно применяется для иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.

Синтаксис

Атрибуты

Пример

FIGURE

Софийский собор

Польский костел

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

Использование figure

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

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

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

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

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

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

Браузеры

9 12 8 11.5 5.1 4

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

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

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

См. также

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

HTML тег

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

Содержимое тега относится к основному потоку веб-контента, однако воспринимается как автономная единица.

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

Синтаксис

Содержимое тега пишется между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок документа title> head> body> p>Симпатичный ребенок p> figure> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200"> figure> body> html>

Элемент

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

Элемент не должен быть связан с основным текстом, так что если его переместить в другое место, то смысл содержания не потеряется. К примеру, если добавить иллюстрацию, то в тексте на неё можно сослаться как «. изображена на рис. 2». Сам рисунок при этом может располагаться в другом месте, а не только идти сразу же после текста, главное, не забыть его подписать. И, наоборот, неверным шагом будет воспользоваться и сослаться на него как «смотри рисунок ниже». Потому что при перемещении иллюстрации искажается смысл текста.

В примере 1 показано применение для иллюстрации текста.

Пример 1. Использование

Рис. 4

Изображения

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

Рис. 4. Зубчатый механизм с круглыми колёсами и реечной передачей

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

Вид картинки с заголовком

Рис. 1. Вид картинки с заголовком

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

figure < text-align: center; /* Выравнивание по центру */ >

См. также

  • Добавление медиа-контента
  • Подрисуночная подпись

Что такое figure в html

Тег (от англ. figure — рисунок) используется для группирования любых элементов, например, изображений и подписей к ним.

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

Демо¶

Изображения и мультимедиа

Синтаксис¶

figure>. figure> 

Закрывающий тег обязателен.

Атрибуты¶

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

  • WHATWG HTML Living Standard
  • HTML 5

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
 html> head> meta charset="utf-8" /> title>FIGUREtitle> 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> 

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

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