HTML Изображение
Изображение может улучшить дизайн и внешний вид веб страницы.
<img src="pic_trulli.jpg"
alt="Итальянские Трулли">
Попробуйте сами »
<img src="img_girl.jpg"
alt="Девушка в куртке">
Попробуйте сами »
<img src="img_chania.jpg"
alt="Цветы в Ханье">
Попробуйте сами »
HTML Синтаксис изображения
HTML тег <img>
используется для встраивания изображения в веб страницу.
Изображения технически не вставляются на веб страницу; изображения связаны с веб страницами.
Тег <img>
создает удерживающее пространство для ссылочного изображения.
Тег <img>
пуст, он содержит только атрибуты и не имеет закрывающего тега.
Тег <img>
имеет два обязательных атрибута:
- src - Указывает путь к изображению
- alt - Задает альтернативный текст для изображения
Синтаксис
<img src="url" alt="альтернативный текст">
Атрибута src
Атрибут src
обязательный, указывает путь (URL) к изображению.
Примечание: Когда загружается веб страница, именно браузер в этот момент получает изображение с веб сервера и вставляет его на страницу. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб странице, иначе ваши посетители получат значок сломанной ссылки. Значок неработающей ссылки отображается, если браузер не может найти изображение.
<img src="img_chania.jpg" alt="Цветы в Ханье">
Попробуйте сами »
Атрибут alt
Атрибут alt
содержит альтернативный текст для изображения, если изображение
по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src
,
тогда изображение используется для чтения с экрана).
Значение атрибута alt
, должно описывать изображение:
<img src="img_chania.jpg" alt="Цветы в Ханье">
Попробуйте сами »
Если браузер не может найти изображение, он будет отображать значение атрибута alt
:
<img src="wrongname.gif" alt="Цветы в Ханье">
Попробуйте сами »
Примечание: Атрибут alt
является обязательным. Веб-страница не будет проверяться правильно без него.
Размер изображения - ширина и высота
Вы можете использовать атрибут style
, чтобы задать ширину и высоту изображения.
<img src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">
Попробуйте сами »
Кроме того, вы можете использовать атрибуты width
и height
:
<img src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">
Попробуйте сами »
Атрибуты width
и height
всегда определяют ширину и высоту
изображение в пикселях.
Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, то страница будет мигать, пока загружается изображение.
Что выбрать width и height, или style?
Все атрибуты width
, height
и style
являются действительными в HTML5.
Однако, мы рекомендуем использовать атрибут style
.
Это предотвращает изменения исходного размера изображения во внутренней и внешней таблицы стилей:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
<img src="html5.gif" alt="Иконка HTML5" width="128"height="128">
</body>
</html>
Попробуйте сами »
Изображения в другой папке
Если ваши изображения находятся во вложенной папке, вы должны включить имя папки в поле атрибута src
:
<img src="/images/html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
Попробуйте сами »
Изображения на другом сервере
Некоторые веб узлы сохраняют их изображения на сервере.
На самом деле, можно получить доступ к изображениям из любого веб адреса в мире:
<img src="https://schoolsw3.com/images/schoolsw3_green.jpg" alt="schoolsw3.com">
Попробуйте сами »
Вы можете прочитать больше о пути файла в главе HTML путь к файлам.
Изображения анимированное
Стандарт GIF позволяет анимированные изображения:
<img src="programming.gif" alt="Человек Компьютер" style="width:48px;height:48px;">
Попробуйте сами »
Изображение ссылка
Чтобы использовать изображение в качестве ссылки,
нужно вставить тег <img>
внутри тега <a>
:
<a href="index.php">
<img src="smiley.gif" alt="Учебник HTML" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »
Изображение плавающие
Используйте CSS свойство float
и пусть изображении плавает справа или слева от текста:
<p><img src="smiley.gif" alt="Смайлик" style="float:right;width:42px;height:42px;">
Изображение будет плавать справа от текста.</p>
<p><img src="smiley.gif" alt="Смайлик" style="float:left;width:42px;height:42px;">
Изображение будет плавать слева от текста.</p>
Попробуйте сами »
Совет: Чтобы узнать больше о CSS Float, прочтите раздел CSS Float Учебник.
Общие форматы изображений
Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera):
Сокращение | Формат файла | Расширение файла |
---|---|---|
APNG | Анимированная портативная сетевая графика | .apng |
GIF | Формат обмена графическими данными | .gif |
ICO | Microsoft значок | .ico, .cur |
JPEG | Объединенная фотографическая экспертная группа изображение | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
PNG | Переносимая сетевая графика | .png |
SVG | Масштабируемая векторная графика | .svg |
Краткое содержание
- Используйте HTML элемент
<img>
для определения изображения - Используйте HTML атрибут
src
для определения URL адреса изображения - Используйте HTML атрибут
alt
для определения альтернативного текста для изображения, если оно не может быть отображено - Используйте HTML атрибут
width
иheight
или CSS свойстваwidth
иheight
для определения размера изображения - Используйте CSS свойство
float
позволять изображению плавать влево или вправо
Примечание: Загрузка больших изображений занимает много времени и может замедлить работу вашей веб страницы. Используйте изображения осторожно.
HTML Упражнения
HTML Теги изображений
Тег | Описание |
---|---|
<img> | Определяет изображение |
<map> | Определяет изображение-карта |
<area> | Определяет активную область внутри изображении-карты |
<picture> | Определяет контейнер для нескольких ресурсов изображений |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.