Главная — Фотошкола ЮУрГУ

Img src: Атрибут src | htmlbook.ru

Содержание

| WebReference

Элемент <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a>.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Синтаксис

<img src="<адрес>" alt="<текст>">

Атрибуты

align
Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
sizes
Задаёт размеры изображения для разных макетов страницы.
src
Путь к графическому файлу.
srcset
Путь к графическим файлам с учётом размера изображения и устройств.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на элемент <map>, содержащий координаты для клиентской карты-изображения.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>IMG</title> </head> <body> <p><a href=»page/lorem. html»><img src=»image/girl.jpg» alt=»Девочка с муфтой»></a></p> </body> </html>

Спецификация

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация

Браузеры

1121111

Изображения

См. также

  • <picture>
  • Выравнивание картинок
  • Добавление медиа-контента
  • Изображения
  • Масштабирование картинок
  • Подрисуночная подпись
  • Форматы графических файлов

Рецепты

  • Как добавить картинку на веб-страницу?
  • Как задать ширину изображения?
  • Как сделать картинку ссылкой?

Практика

  • Абсолютный адрес
  • Альтернативный текст
  • Картинка в <button>
  • Картинка как ссылка
  • Картинки в таблице
  • Картинки друг под другом
  • Относительный адрес
  • Подпись перед картинкой
  • Подпись под картинкой
  • Размеры картинки
  • Ширина картинок
  • Элемент <figure>

Тег HTML картинка, изображение

Рейтинг: 4 из 5, голосов 16

24 февраля 2018 г.

Тег <img> используется для вставки графического изображения (картинки) в HTML документ.

HTML тег <img> имеет два обязательных атрибута: src — адрес файла картинки и alt — альтернативный текст, который будет отображен, если картинка не может быть загружена. Также не лишним будет использование глобального атрибута title.

Изображение из тега <img> может быть ссылкой. Для этого нужно обвернуть тег <img> тегом ссылки <a> (см. пример ниже).

Синтаксис

<img src="URL_картинки" alt="альтернативный текст">

Отображение в браузере

Пример использования <img> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка картинки в HTML документ</title>
</head>
<body>
<!-- Картинка на веб-странице -->
    <img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня">
<!-- картинка-ссылка -->
<a href="page. html"><img src="the-eiffel-tower.jpg" alt="Эйфелева башня" title="Эйфелева башня"></a>
</body>
</html>

Поддержка браузерами

Тег
<img> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
alt текст

Альтернативный текст, который будет выведен, если картинка не будет загружена.
height пиксели

Высота изображения.
ismap

ismap
пусто

Логический атрибут. Указывает, что картинка является серверной (server-side) картой-изображением.
longdesc URL

URL файла, где содержится детальное описание картинки.
src URL

Указывает URL файла картинки.
usemap id_map_элемента

Указывает, что картинка является клиентской (client-side) картой-изображением.
width пиксели

Ширина изображения.

Устаревшие атрибуты

Указанные ниже атрибуты не поддерживаются в HTML5. Используйте CSS вместо них.

Атрибут Значение Описание
align top
bottom
middle
left
right

Правило выравнивания картинки.
border пиксели

Ширина границ картинки.

hspace пиксели

Ширина горизонтальных отступов (пустое место слева и справа от картинки).
vspace пиксели

Ширина вертикальных отступов (пустое место сверху и снизу от картинки).

by Lebedev

HTML img usemap Атрибут

❮ Тег HTML

Пример

Карта изображения с интерактивными областями:

Workplace


  Компьютер
  <область shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">


Чашка кофе

Попробуйте сами »

Определение и использование

Атрибут usemap определяет изображение как карту изображения на стороне клиента (карта изображения — это изображение с областями, на которые можно щелкнуть).

Атрибут usemap связан с атрибут имени элемента и создает связь между и <карта> .

Примечание: атрибут usemap нельзя использовать, если элемент является потомок или <кнопка> элемент.

Поддержка браузера

Атрибут
карта использования Да Да Да Да Да

Синтаксис

Значения атрибутов

Значение Описание
#название_карты Символ решетки («#») плюс имя элемента для использования

❮ HTML-тег


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

2 FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

4-минутное руководство по атрибуту Img src в HTML

  • Блог Hubspot
  • HubSpot.com

Загрузка

    О нет! Мы не смогли найти ничего подобного.

    Попробуйте еще раз поискать, и мы постараемся.

    Анна Фицджеральд

    Обновлено:

    Опубликовано:

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

    Проанализировав более миллиона статей, BuzzSumo обнаружил, что статьи с изображением каждые 75–100 слов получают в два раза больше репостов в социальных сетях, чем статьи с меньшим количеством изображений.

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

    Давайте подробнее рассмотрим эту пару ниже.

    Img src HTML

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

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

    Взгляните на пример ниже.

    См. элементы Pen Image с атрибутом src и без него от Кристины Перриконе (@hubspot) на CodePen.

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

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

    На вкладке результатов появляется первое изображение размером 300 на 200 пикселей. Однако второе изображение отображается как пустое поле с контуром 300 на 200 пикселей. Это потому, что браузер не знал, какое изображение отображать без исходного атрибута.