HTML <img> Тег
Пример
Как вставить изображение:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Подробнее примеры ниже.
Определение и использование
Тег <img> определяет изображение в HTML-странице.
Тег <img> имеет два обязательных атрибута: src и alt.
Примечание: Изображения технически не вставлены в страницу HTML, изображения соединены к страницам HTML. Тег <img> создает пространство для хранения указанного изображения.
Совет: Чтобы связать изображение с другим документом, просто вложить тег <img> в теги <a>.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<img> | Да | Да | Да | Да | Да |
Различия между HTML 4,01 и HTML5
Следующие атрибуты: выравнивание, граница, хспаце и vSpace являются навестить поддерживается в HTML5.
Различия между HTML и XHTML
В HTML тег <img> не имеет конечного тега.
В XHTML тег <img> должен быть правильно закрыт.
Атрибуты
= Новое в HTML5.
Атрибут | Значение | Описание |
---|---|---|
align | top bottom middle left right |
Не поддерживается в HTML5. Задание выравнивания изображения в соответствии с окружающими элементами |
alt | text | Задает альтернативный текст для изображения |
border | pixels | Не поддерживается в HTML5. Задает ширину границы вокруг изображения |
crossorigin | anonymous use-credentials |
Разрешить использование изображений с веб-сайтов сторонних производителей для использования с Canvas |
height | pixels | Задает высоту изображения |
hspace | pixels | Не поддерживается в HTML5. Указывает пробелы в левой и правой части изображения |
ismap | ismap | Определяет изображение как серверное изображение-Map |
longdesc | URL | Задает URL-адрес для подробного описания изображения |
sizes | Определяет размеры изображения для различных макетов страниц | |
src | URL | Указывает URL-адрес изображения |
srcset | URL | Указывает URL-адрес изображения для использования в различных ситуациях |
usemap | #mapname | Указывает изображение в виде клиентского изображения-карты |
vspace | pixels | Не поддерживается в HTML5. Указывает пробелы в верхней и нижней части изображения |
width | pixels | Задает ширину изображения |
Глобальные атрибуты
Тег <img> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <img> также поддерживает Атрибуты событий в HTML.
Попробуйте примеры
Вставка изображений из разных местоположений
Вставка изображений из другой папки или с другого веб-узла.
Сделать гиперссылку изображения
Как добавить гиперссылку на изображение.
Создание карты изображений
Как создать карту изображения с щелчком областей. Каждый регион является гиперссылкой.
Похожие страницы
HTML Учебник: HTML Images
HTML DOM Ссылки: Image Object
CSS Учебник: Styling Images
Параметры CSS по умолчанию
В большинстве обозревателей элемент <img> будет отображаться со следующими значениями по умолчанию:
Пример
img {
display: inline-block;
}