Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <figure>



Пример

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

<figure>
  <img src="pic_trulli.jpg" alt="Трулли" style="width:100%">
  <figcaption>Рис.1 - Трулли, Апулия, Италия.</figcaption>
</figure>
Попробуйте сами »


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

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

В то время как содержание элемента <figure> связано с основным потоком, его положение не зависит от основного потока, и если его удалить, он не должен влиять на поток документа.

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


Поддержка браузеров <figure>

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

Элемент
<figure> 8.0 9.0 4.0 5.1 11.0

Глобальные атрибуты <figure>

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


События атрибутов <figure>

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


Еще примеры <figure>

Пример

Использовать стиль 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="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Рис.1 - Трулли, Апулия, Италия</figcaption>
</figure>

</body>
</html>
Попробуйте сами »

Связные страницы <figure>

HTML DOM справочник: Объект figure


Настройки CSS по умолчанию <figure>

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

Пример
figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
Попробуйте сами »