HTML Изображение
Изображение может улучшить дизайн и внешний вид веб страницы.
HTML Синтаксис изображения
HTML тег <img> используется для встраивания изображения в веб страницу.
Изображения технически не вставляются на веб страницу; изображения связаны с веб страницами.
Тег <img> создает удерживающее пространство для ссылочного изображения.
Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.
Тег <img> имеет два обязательных атрибута:
- src - Указывает путь к изображению
- alt - Задает альтернативный текст для изображения
Синтаксис
<img src="url" alt="альтернативный текст">
Атрибута src
Атрибут src обязательный, указывает путь (URL) к изображению.
Примечание: Когда загружается веб страница, именно браузер в этот момент получает изображение с веб сервера и вставляет его на страницу. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб странице, иначе ваши посетители получат значок сломанной ссылки. Значок неработающей ссылки отображается, если браузер не может найти изображение.
Атрибут alt
Атрибут alt содержит альтернативный текст для изображения, если изображение
по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src,
тогда изображение используется для чтения с экрана).
Значение атрибута alt, должно описывать изображение:
Если браузер не может найти изображение, он будет отображать значение атрибута alt:
Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.
Размер изображения - ширина и высота
Вы можете использовать атрибут style, чтобы задать ширину и высоту изображения.
Пример
<img src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">
Попробуйте сами »
Кроме того, вы можете использовать атрибуты width и height:
Атрибуты 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://schoolssw3.com/images/schoolssw3_green.jpg" alt="schoolssw3.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 Справочник тегов.