HTML -изображения
Изображения могут улучшить дизайн и внешний вид веб-страницы.
Пример
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Пример
<img src="img_girl.jpg"
alt="Girl in a jacket">
Пример
<img src="img_chania.jpg"
alt="Flowers in Chania">
Синтаксис HTML-изображений
Тег HTML <img>используется для встраивания изображения в веб-страницу.
Изображения технически не вставляются на веб-страницу; изображения связаны с веб-страницами. Тег <img>создает пространство для хранения ссылочного изображения.
Тег <img>пустой, содержит только атрибуты и не имеет закрывающего тега.
Тег <img>имеет два обязательных атрибута:
- src - указывает путь к изображению
- alt — указывает альтернативный текст для изображения.
Синтаксис
<img src="url" alt="alternatetext">
Атрибут src
Обязательный srcатрибут указывает путь (URL) к изображению.
Примечание. Когда веб-страница загружается, именно браузер в этот момент получает изображение с веб-сервера и вставляет его на страницу. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб-странице, иначе ваши посетители получат значок неработающей ссылки. Значок неработающей ссылки и altтекст отображаются, если браузер не может найти изображение.
Пример
<img src="img_chania.jpg" alt="Flowers
in Chania">
Атрибут alt
Требуемый altатрибут предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует программу чтения с экрана).
Значение altатрибута должно описывать изображение:
Пример
<img src="img_chania.jpg" alt="Flowers
in Chania">
Если браузер не может найти изображение, он отобразит значение alt
атрибута:
Пример
<img src="wrongname.gif" alt="Flowers
in Chania">
Совет: Программа чтения с экрана — это программа, которая считывает HTML-код и позволяет пользователю «прослушивать» содержимое. Программы чтения с экрана полезны для людей с нарушениями зрения или неспособными к обучению.
Размер изображения — ширина и высота
Вы можете использовать styleатрибут, чтобы указать ширину и высоту изображения.
Пример
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Кроме того, вы можете использовать атрибуты widthand :height
Пример
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Атрибуты widthи heightвсегда определяют ширину и высоту изображения в пикселях.
Примечание. Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, веб-страница может мерцать во время загрузки изображения.
Ширина и высота или стиль?
Атрибуты width, heightи styleдопустимы в HTML.
Тем не менее, мы предлагаем использовать styleатрибут. Он не позволяет таблицам стилей изменять размер изображений:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Изображения в другой папке
Если у вас есть изображения в подпапке, вы должны указать имя папки в srcатрибуте:
Пример
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Изображения на другом сервере/веб-сайте
Некоторые веб-сайты указывают на изображение на другом сервере.
Чтобы указать на изображение на другом сервере, необходимо указать абсолютный (полный) URL в srcатрибуте:
Пример
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Примечания относительно внешних изображений: Внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на его использование, вы можете нарушить закон об авторском праве. Кроме того, вы не можете управлять внешними изображениями; его можно внезапно удалить или изменить.
Анимированные изображения
HTML позволяет использовать анимированные GIF-файлы:
Пример
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Изображение как ссылка
Чтобы использовать изображение в качестве ссылки, поместите <img>тег внутри <a>
тега:
Пример
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Плавающее изображение
Используйте floatсвойство CSS, чтобы изображение плавало справа или слева от текста:
Пример
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Совет. Чтобы узнать больше о CSS Float, прочитайте наше руководство по CSS Float .
Распространенные форматы изображений
Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Краткое содержание главы
- Используйте элемент HTML
<img>для определения изображения - Используйте
srcатрибут HTML, чтобы определить URL-адрес изображения. - Используйте
altатрибут HTML, чтобы определить альтернативный текст для изображения, если оно не может быть отображено - Используйте HTML
widthиheightатрибуты или CSSwidthиheightсвойства, чтобы определить размер изображения. - Используйте
floatсвойство CSS, чтобы изображение перемещалось влево или вправо.
Примечание. Загрузка больших изображений требует времени и может замедлить работу веб-страницы. Используйте изображения осторожно.
HTML-упражнения
HTML-теги изображений
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .