Для добавления иллюстраций, графиков, диаграмм, фотографий применяется элемент . Его содержимое не ограничивается изображениями, допустимо вставлять видео, примеры кода, даже текст. Внутри при желании добавляется заголовок с помощью элемента до или после содержимого.
Элемент не должен быть связан с основным текстом, так что если его переместить в другое место, то смысл содержания не потеряется. К примеру, если добавить иллюстрацию, то в тексте на неё можно сослаться как «. изображена на рис. 2». Сам рисунок при этом может располагаться в другом месте, а не только идти сразу же после текста, главное, не забыть его подписать. И, наоборот, неверным шагом будет воспользоваться и сослаться на него как «смотри рисунок ниже». Потому что при перемещении иллюстрации искажается смысл текста.
В примере 1 показано применение для иллюстрации текста.
Пример 1. Использование
Изображения
Зубчатые механизмы используют для изменения параметров вращательного движения, а также для преобразования вращательного движения в поступательное. Зубчатый механизм с круглыми колёсами и реечной передачей, используемый в стрелочных электроприводах железных дорог, показан на рис. 4.
Рис. 4. Зубчатый механизм с круглыми колёсами и реечной передачей
Результат данного примера показан на рис. 1.
Рис. 1. Вид картинки с заголовком
Содержимое выравнивается по левому краю и к нему добавляются небольшие отступы, это заметно по картинке, она отступает немного вправо относительно левого края текста. Для изменения способа выравнивания, например, по центру, в стилях используем свойство text-align .
figure < text-align: center; /* Выравнивание по центру */ >
См. также
Добавление медиа-контента
Подрисуночная подпись
HTML тег
В элементе допускается применение только одного тега , но при этом в элемент могут быть включены другие теги (тег или ).
Синтаксис
Содержимое элемента пишется между открывающими закрывающимтегами.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
CSS свойство color определяет цвет контента и оформления текста.
CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Поддержка браузера
Теги figure и figcaption, демонстрационный материал
В галерее селфи каждая маленькая картинка-превьюшка ссылается на отдельную страницу с «фотокарточкой». Эта фотокарточка содержит полноразмерное изображение и его описание. Она достаточно независима, и позже мы сможем вставить её на любую другую страницу блога. Как правильно размечать такие «карточки»?
Для этого отлично подойдёт тег . Этот тег хорош для любого иллюстративного или демонстрационного материала, которым можно дополнить содержание документа. Таким материалом могут быть схемы, графики, примеры кода, таблицы и так далее.
Обычно каждый такой материал сопровождает разъясняющий комментарий, или «легенда». Для разметки этого комментария предназначен ещё один тег — , который размещается первым или последним элементом внутри . Например:
Схема, график, диаграмма или кодПодпись к содержимому
Давайте с помощью разметим фото в нашей галерее. Приступим.
По умолчанию у тега figure есть отступы, поэтому мы добавили стили для figure и figcaption , которые можно посмотреть во вкладке style.css .
Как обнулить sbc mercedes w211