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;
}