Что такое атрибут "src"?

"Атрибут Src". "Что такое атрибут "src"?"

Разбираемся в атрибуте "src"!

Атрибут "src"

1. Что такое атрибут "src"?
2. Какие пути можно указывать в атрибут "src"?
3. Пример атрибута "src"!

1. Что такое атрибут "src"?

Атрибут src (от англ. source — «источник») указывает браузеру, где искать внешний ресурс — файл с изображением, скриптом и т. д.
Это обязательный атрибут для ряда HTML‑тегов.


В каких тегах используется атрибут "src"?

В теге <img> — для вставки изображений:

<img src="image.jpg">

В теге <script>(script) — для подключения внешних JavaScript‑файлов:

<script src="script.js"></script>

В теге <iframe>— для встраивания контента из другого источника:

<iframe src="https://example.com"></iframe>

В тегах <audio>и <video> — для указания медиафайлов:

<audio src="audio.mp3"></audio>

<video src="video.mp4"></video>

2. Какие пути можно указывать в атрибут "src"?

В значении атрибута src может быть:

Относительный путь — указывает на файл в пределах сайта. Зависит от расположения текущего HTML‑документа:

В той же папке: src="image.png".

Во вложенной папке: src="images/photo.jpg".

На уровень выше: src="../parent-folder/file.png".

Абсолютный URL — полный веб‑адрес ресурса, включая протокол (http:// или https://):

<img src="https://dwweb.ru/_data/img/personal/about_me_1.png" alt="О себе любимом...">

Локальный путь (для тестирования) — путь к файлу на компьютере:

<img src="C:/Users/Name/Pictures/test.jpg" alt="Тест">

Я использую путь в атрибуте "src".

Использую путь в атрибуте "src" только :

Абсолютный.

Почему использую относительный путь в атрибуте "src"?

Почему использую относительный путь, только если файлы лежат в одной папке!? в атрибуте "src"?

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

3. Пример атрибута "src"!

Возьмем для иллюстрации атрибута "src" вот этот код с картинкой:

<img src="https://dwweb.ru/_data/img/personal/about_me_1.png" alt="О себе любимом...">

Смотрим пример атрибута "src"?

Размещаем выше приведенный пример кода с атрибутом "src":

Всего комментариев : Comments+ 2.0

+ =