English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Мы видим сегодня丰富多彩的网络 страницы, все благодаря изображениям. В прошлом в Интернете были только веб-страницы с чистым текстом, очень однообразные, что показывает важность изображений в веб-дизайне. В html-страницах можно вставлять изображения, наиболее常用的 форматы изображений в вебе - jpg, png, gif и т.д.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Тестирование看看 ›/‹
Вставка изображения
Этот пример демонстрирует, как показывать изображения на веб-странице.
Вставка изображений из различных мест
Этот пример демонстрирует, как показывать изображения из других папок или серверов на веб-странице.
(Более подробные примеры можно найти в нижней части страницы.).
В HTML изображения определяются тегом <img>.
<img> является пустым тегом, что означает, что он содержит только атрибуты и не имеет закрывающего тега.
Чтобы отобразить изображение на странице, вам нужно использовать атрибут источника (src). src означает "source". Значением атрибута источника является URL-адрес изображения.
Синтаксис определения изображения:
<img src="url" alt="some_text">
URL указывает на положение хранения изображения. Если изображение с именем "default.jpg" находится в каталоге images на ru.oldtoolbag.com, то его URL будет https://ru.oldtoolbag.com/run/html/default.jpg.
Браузер будет отображать изображение в документе в том месте, где出现在 теге изображения. Если вы поместите тег изображения между двумя абзацами, браузер сначала отобразит первый абзац, затем изображение, и, наконец, второй абзац.
Свойство alt используется для определения строки预备ного текста, который можно заменить изображением.
Значение свойства substitute text определяет пользователь.
<img src="boat.gif" alt="Big Boat">
При невозможности загрузки изображения свойство substitute text информирует читателей о том, что они потеряли информацию. В этом случае браузер будет отображать этот заменяющий текст вместо изображения. Хорошей привычкой является добавление свойства substitute text для всех изображений на странице, что помогает лучше отображать информацию и полезно для тех, кто использует браузеры, работающие только с текстом.
Свойства height (высота) и width (ширина) используются для установки высоты и ширины изображения.
Значения по умолчанию для свойств - пиксели:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Совет: Указание высоты и ширины изображения - это хорошая привычка. Если указаны высота и ширина изображения, при загрузке страницы они будут сохранены в указанных размерах. Если размер изображения не указан, при загрузке страницы может быть разрушена структура HTML-страницы.
Внимание: Если в HTML-файле содержится десять изображений, то для правильного отображения страницы необходимо загрузить 11 файлов. Загрузка изображений требует времени, поэтому мы рекомендуем: будьте осторожны с использованием изображений.
Внимание: При загрузке страницы обратите внимание на путь к вставляемому изображению. Если изображение не может быть установлено правильно, браузер не сможет загрузить изображение, и тег изображения отобразит разбитое изображение.
Выравнивание изображений
Этот пример демонстрирует, как выравнивать изображения в тексте.
Флоатинг изображения
Этот пример демонстрирует, как сделать изображение浮动 на левом или правом краю абзаца.
Настройка изображения-ссылки
Этот пример демонстрирует, как использовать изображение в качестве ссылки.
Создание изображения-карты
Этот пример показывает, как создать изображение-карту с областью, на которую можно нажать. Каждая область - это гиперссылка.
| Тег | Описание |
| <img> | Определение изображения |
| <map> | Определение карты изображений |
| <area> | Определение clickable области карты изображений |