Логотип 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 Тег <img>



Пример

Как вставить изображение:

<img src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">
Попробуйте сами »


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

Тег <img> используется для встраивания изображения в HTML страницу.

Изображения технически не вставляются на веб страницу; изображения связаны с веб страницами. Тег <img> создает удерживающее пространство для ссылочного изображения.

Тег <img> имеет два обязательных атрибута:

  • src - Указывает путь к изображению
  • alt - Задает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено

Примечание: Кроме того, всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать во время загрузки изображения.

Совет: Чтобы связать изображение с другим документом, просто вложите тег <img> в тег <a> (см. пример ниже)


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

Элемент
<img> Да Да Да Да Да

Атрибуты <img>

Атрибут Значение Описание
alt text Задает альтернативный текст для изображения
crossorigin anonymous
use-credentials
Разрешить использование изображений со сторонних сайтов, разрешающих кросс-исходный доступ, с canvas
height pixels Задает высоту изображения
ismap ismap Задает изображение в качестве карты изображений на стороне сервера
longdesc URL Задает URL для подробного описания изображения
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Указывает, какие ссылки следует использовать при извлечении изображения
sizes sizes Задает размеры изображений для различных макетов страниц
src URL Указывает путь к изображению
srcset URL Указывает путь к изображению, который будет использоваться в различных ситуациях
usemap #mapname Задает изображение в качестве карты изображений на стороне клиента
width pixels Задает ширину изображения

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

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


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

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


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

Пример

Выровнить изображение (с помощью CSS):

<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="float:left">
Попробуйте сами »
Пример

Добавить границу изображения (с помощью CSS):

<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="border:5px solid black">
Попробуйте сами »
Пример

Добавьте левое и правое поля к изображению (с помощью CSS):

<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
Попробуйте сами »
Пример

Добавление верхнего и нижнего полей к изображению (с помощью CSS):

<img src="smiley.gif" alt="Смайлик" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
Попробуйте сами »
Пример

Как вставить изображения из другой папки или с другого сайта:

<img src="/images/stickman.gif" alt="Человечек" width="24" height="39">
<img src="https://www.schoolsw3.com/images/lamp.jpg" alt="Лампа" width="32" height="32">
Попробуйте сами »
Пример

Как добавить гиперссылку на изображение:

<a href="https://www.schoolsw3.com">
<img src="w3html.gif" alt="Schoolsw3.com" width="100" height="132">
</a>
Попробуйте сами »
Пример

Как создать карту изображений с кликабельными регионами. Каждый регион является гиперссылкой:

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">
</map>
Попробуйте сами »

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

HTML учебник: HTML Изображения

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

CSS учебник: Стиль изображений


Примеры <img>

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

Пример
img {
  display: inline-block;
}
Попробуйте сами »