Изображения HTML

Используя HTML, можно отобразить изображение в документе.

Пример

Вставка изображения
Этот пример демонстрирует, как можно отобразить изображение на веб-странице.
Вставка изображений из различных мест
Этот пример демонстрирует, как можно отобразить изображения из других папок или серверов на веб-странице.

（Более многие примеры можно найти в нижней части страницы)

Тег изображения (<img>) и атрибут источника (Src)

В HTML изображение определяется тегом <img>.

<img> - это пустой тег, что означает, что он содержит только атрибуты и не имеет закрывающего тега.

Чтобы отобразить изображение на странице, вам нужно использовать атрибут источника (src). src означает "источник". Значением атрибута источника является URL адрес изображения.

Синтаксис определения изображения:

<img src="url" />

URL указывает на положение хранения изображения. Если изображение с именем "boat.gif" находится в папке "images" на сайте www.codew3c.com, то его URL будет http://www.codew3c.com/images/boat.gif.

Браузер отображает изображение в документе на месте, где出现 тег изображения. Если вы поместите тег изображения между двумя абзацами, браузер сначала отобразит первый абзац, затем изображение, и, наконец, второй абзац.

Замените атрибут текста (Alt)

Атрибут alt используется для определения строки预备ного заменяющего текста для изображения. Значение атрибута заменяющего текста определено пользователем.

<img src="boat.gif" alt="Big Boat">

Когда браузер не может загрузить изображение, атрибут заменяющего текста информирует читателей о потерянной информации. В этом случае браузер будет отображать этот заменяющий текст вместо изображения. Хорошей привычкой является добавление атрибута заменяющего текста ко всем изображениям на странице, что помогает лучше отображать информацию и очень полезно для тех, кто использует текстовые браузеры.

Основные注意事项 - полезные советы:

Если HTML файл содержит десять изображений, то для правильного отображения страницы необходимо загрузить одиннадцать файлов. Загрузка изображений требует времени, поэтому наш совет: будьте осторожны с использованием изображений.

Более примеров

Фоновое изображение
Этот пример демонстрирует, как добавить фоновое изображение на HTML страницу.
Выравнивание изображения
Этот пример демонстрирует, как выравнивать изображение в тексте.
Флоат изображения
Этот пример демонстрирует, как浮动 изображение до левого или правого края абзаца.
Изменение размера изображения
Этот пример демонстрирует, как изменять размер изображения.
Отображение заменяющего текста для изображения
Этот пример демонстрирует, как отображать заменяющий текст для изображения. Когда браузер не может загрузить изображение, атрибут заменяющего текста информирует читателей о потерянной информации. Хорошей привычкой является добавление атрибута заменяющего текста ко всем изображениям на странице.
Создание hyperlink изображения
Этот пример демонстрирует, как использовать изображение как hyperlink.
Создание image map
Этот пример показывает, как создать image map с clickable областью. Каждая область является hyperlink.
Преобразование изображения в image map
Этот пример показывает, как можно преобразовать обычное изображение в image map.

Тег изображения

Тег Описание
<img> Определение изображения.
<map> Определение image map.
<area> Определение clickable области в image map.