Posted:
Авг 21, 2020
Comments:
0 Comments

Src тег: Атрибут src HTML тега img

Атрибут src

❮ Предыдущий
Все HTML Атрибуты
Следующий ❯

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

Атрибут src указывает расположение (URL) внешнего ресурса.

Относится к

Атрибут src может использоваться для следующих элементов:

Элементы Атрибут
<audio> src
<embed> src
<iframe> src
<img> src
<input> src
<script> src
<source> src
<track> src
<video> src

Пример

Пример аудио

Звуковой проигрыватель:

<audio src=»horse.ogg» controls>
Your browser does not support the audio element.
</audio>

Пример встраивания

Встроенная флэш-анимация:

<embed src=»helloworld. swf»>

Пример iframe

<iframe> в его простейшем использовании:

<iframe src=»/default.php»></iframe>

Пример IMG

Изображение помечено следующим образом:

<img src=»smiley.gif» alt=»Smiley face»>

Пример ввода

HTML-форма с изображением, представляющим кнопку Submit:

<form action=»/action_page.php»>
 
First name: <input type=»text» name=»fname»><br>
  <input type=»image» src=»submit.gif» alt=»Submit»>
</form>

Пример сценария

Наведите указатель на внешний файл JavaScript:

<script src=»myscripts.js»></script>

Пример источника

Аудио проигрыватель с двумя исходными файлами. Браузер должен выбрать, какой файл (если таковой имеется) он имеет поддержку:

<audio controls>
  <source src=»horse.ogg» type=»audio/ogg»>
  <source src=»horse.mp3″ type=»audio/mpeg»>
Your browser does not support the audio element.
</audio>

Пример трека

Видео с двумя треками субтитров:

<video controls>
  <source src=»forrest_gump.mp4″ type=»video/mp4″>
  <source src=»forrest_gump.ogg» type=»video/ogg»>
  <track src=»subtitles_en.vtt» kind=»subtitles» srclang=»en» label=»English»>
  <track src=»subtitles_no.vtt» kind=»subtitles» srclang=»no» label=»Norwegian»>
</video>

Пример видео

Воспроизведение видео:

<video src=»movie.ogg» controls>
 
Your browser does not support the video tag.
</video>

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

Атрибут src имеет следующую поддержку браузера для каждого элемента:

Элемент
audio 4.0 9.0 3.5 4.0 10.5
embed Да Да Да Да Да
iframe Да Да Да Да Да
img Да Да Да Да Да
input 1. 0 2.0 1.0 1.0 1.0
script Да Да Да Да Да
source 4.0 9.0 3.5 4.0 10.5
track 18.0 10.0 31.0 6.0 15.0
video 4.0 9.0 3.5 4.0 10.5

❮ Предыдущий
Все HTML Атрибуты
Следующий ❯

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

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

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 src

❮ Предыдущий
Все атрибуты HTML
Далее ❯

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

Атрибут src указывает местоположение (URL) внешнего ресурса.

Применяется к

Атрибут src может использоваться для следующих элементов:

Элементы Атрибут
<аудио> источник
<встроить> источник

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

Пример Img

Изображение размечено следующим образом:

Smiley face

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

Пример ввода

HTML-форма с изображением который представляет кнопку отправки:

Имя:

 

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

Пример сценария

Укажите на внешний файл JavaScript:

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

Пример исходного кода

Аудиоплеер с двумя исходными файлами. Браузер должен выбрать, какой файл (если есть) он поддерживает:

<управление звуком>
 
 
Ваш браузер не поддерживает элемент audio.

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

Пример дорожки

Видео с двумя дорожками субтитров:

<управление видео>
 
  < source src="forrest_gump.ogg" type="video/ogg">
   

Пример видео

Воспроизвести видео:

<управление видео src="movie.ogg">
Ваш браузер не поддерживает видео тег.

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

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

Атрибут src имеет следующую поддержку браузера для каждого элемента:

Элемент
аудио 4,0 9.0 3,5 4,0 10,5
встроенный Да Да Да Да Да
iframe Да Да Да Да Да
изображение Да Да Да Да Да
ввод 1,0 2,0 1,0 1,0 1,0
сценарий Да Да Да Да Да
источник 4,0 9,0 3,5 4,0 10,5
дорожка 18,0 10,0 31,0 6,0 15,0
видео 4,0 9,0 3,5 4,0 10,5

❮ Предыдущий
Все атрибуты HTML
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Top Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

HTML img src Attribute

❮ HTML тег

Example

Изображение размечено следующим образом:

Девушка в куртке

Try Это сами »

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

Обязательный атрибут src указывает URL-адрес изображения.

Существует два способа указания URL-адреса в источник
атрибут:

1. Абсолютный URL — Ссылки на внешнее изображение, которое размещено
на другом сайте. Пример: src=»https://www.w3schools.com/images/img_girl.jpg».

Примечания: Внешние изображения могут быть защищены авторским правом. Если вы сделаете
не получить разрешение на его использование, вы можете нарушить законы об авторских правах. В
кроме того, вы не можете управлять внешними изображениями; он может быть внезапно удален или
измененный.

2. Относительный URL-адрес — Ссылки на изображение, размещенное внутри
веб-сайт. Здесь URL-адрес не включает доменное имя. Если URL-адрес начинается
без косой черты, это будет относительно текущей страницы. Пример: src=»img_girl.jpg».
Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src=»/images/img_girl.jpg».

Совет: Почти всегда лучше использовать относительные URL-адреса. Они
не сломается, если вы смените домен.

Примечание: A сломанный
значок ссылки и текст alt отображаются, если браузер не может найти изображение.

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

Атрибут
источник Да Да Да Да Да

Синтаксис

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

Значение Описание
URL-адрес URL изображения.

Возможные значения:

  • Абсолютный URL-адрес — указывает на другой веб-сайт (например, src=»http://www.example.com/image.gif»)
  • Относительный URL-адрес — указывает на файл на веб-сайте (например, src=»image.gif»)

❮ Тег HTML

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

This entry was posted in Популярное