English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по HTML

Полный список тегов HTML

HTML: <img> тег

Тег <img> HTML определяет изображение в документе HTML. Этот тег также часто называют элементом <img>.

Онлайн пример

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

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>Введение в веб-разработку (oldtoolbag.com)</title>　
</head>
<body>
<img src="pig.gif" alt="pig face" width="32" height="32">
</body>
</html>
Проверьте <‹/›>

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают тег <img>.

Различия между свойствами alt и title изображения:

  • Атрибут alt изображения является текстовым подсказкой, которая появляется, если изображение не может быть отображено.

  • Атрибут title изображения является текстовым подсказкой, которая появляется при наведении мыши на элемент.

Определение и описание использования тега

Тег <img> определяет изображение в HTML-документе.

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

Тег <img> может поддерживать следующие форматы изображений (в зависимости от браузера): jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.

Комментарий:Технически, изображение не вставляется в HTML-страницу, а ссылается на него. Тег <img> создает占位ник для ссылки на изображение.

Совет:Добавление ссылки на изображение в другой документ через тег <a> с вложенным тегом <img>.

Различия между HTML 4.01 и HTML5

HTML5 не поддерживает следующие атрибуты: align, border, hspace, longdesc, vspace.

В HTML 4.01 следующие атрибуты: align, border, hspace, vspace, уже не поддерживаются.

Различия между HTML и XHTML

В HTML, тег <img> не имеет завершающего тега.
В XHTML, необходимо правильно закрывать тег <img>.

Атрибут

New: Новые атрибуты в HTML5.

АтрибутЗначениеОписание
aligntop
　bottom
　middle
　left
　right		HTML5 не поддерживает. HTML 4.01弃用. 　 　Определяет, как выравнивать изображение в зависимости от окружающего текста.
alttextОпределяет текст замены изображения.
borderпикселиHTML5 не поддерживает. HTML 4.01弃用. 　 　Определяет рамку вокруг изображения.
crossoriginHTML5anonymous
use-credentials		Устанавливает атрибуты кэширования изображения.
heightпикселиОпределяет высоту изображения.
hspaceпикселиHTML5 не поддерживает. HTML 4.01弃用. 　 　Определяет отступы слева и справа от изображения.
ismapismapОпределяет изображение как server-side image map.
longdescURLHTML5 не поддерживает. HTML 4.01弃用. 　 　Указывает URL на документ с долгим описанием изображения.
srcURLОпределяет URL изображения для отображения.
usemap#mapnameОпределяет изображение как client-side image map.
vspaceпикселиHTML5 не поддерживает. HTML 4.01弃用. 　 　Определяет отступы вверху и внизу изображения.
ширинапикселиОпределяет ширину изображения.

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

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

Событийные атрибуты

Поддержка тега <img> Событийные атрибуты HTML.

Попробуйте онлайн пример

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

Флоат изображения
Этот пример демонстрирует, как浮动 изображение до левого или правого края абзаца.

Настройка hyperlink изображения
Этот пример демонстрирует, как использовать изображение как hyperlink.

Создание карты изображений
Этот пример показывает, как создать изображение-карту с clickable region. Каждая область - это hyperlink.

Связанные статьи

Уроки HTML:Изображения в HTML

Руководство по HTML DOM: Объект изображения

HTML: <input> тегHTML: <iframe> тег