Атрибут 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.
Поддержка браузера
Атрибут 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 img src Attribute
❮ HTML тег
Пример
Изображение размечено следующим образом:
Попробуйте Себя »
Определение и использование
Обязательный атрибут src указывает URL-адрес изображения.
Существует два способа указать URL-адрес в src атрибут:
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 изображения. Возможные значения:
|
❮ Тег HTML
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Top Tutorials
Учебник HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Конечно, пробелы в ˂a href˃ или ˂img src˃ делают его…
Как я исследовал в своем последнем посте в блогах о продуктах, как технический маркетолог, знать , когда вы не должны кодировать , так же, как важно, как знать , когда нужно .
Есть и третий, более тонкий случай: когда вы должны иметь закодированный , но поскольку приложения имеют определенные гарантии, результаты не будут фатальными. Вы облажались (и это
https://www.example.com/моя страница с пробелами.html
example.com/моя страница с пробелами.html
Чтобы быть действительным URL-адресом, каждый пробел должен быть заменен на %20 .[1]
Затем эта основная истина расширяется до «HTML-атрибутов, которые представляют URL-адресов и имеют буквальные символы пробела. являются недействительными». Это тоже верно. Ни один из этих тегов не является допустимым HTML в соответствии со стандартом HTML5:
Перейти
Но затем далее расширяется до «Эти недопустимые теги HTML или не будут работать при нажатии или загрузке». Это просто неправда .
Я сам сдерживал это недоразумение в течение смущающе долгого времени.
Раньше мы советовали людям вообще не использовать пробелов в базовых именах файлов — даже несмотря на то, что файловые системы Mac, Windows и Linux навсегда поддерживают пробелы — из опасения, что мы забудем URL-кодирование при связывании к этим активам.
[2] Идея о том, что пробелы всегда должны быть закодированы в URL-адресе %20 , иначе страницы и электронные письма будут ужасно повреждены, все еще укоренились.
(Конечно, единственное правило «никаких пробелов нигде» было глупым. Хотя они действительно недействительны, пробелы не более недопустимы, чем другие символы , которые должны быть закодированы в URL. Мы не сказали «нет». знаки плюс», или «без амперсандов», или «без знаков равенства»… ни «без знаков процента», которые должны быть закодированы в %25 , чтобы их нельзя было ошибочно принять за начало процентно-кодированной последовательности![3] ])
Забавно то, что… забывание кодировать не-специальные символы, такие как пробелы, было таким общим беспокойством, и так легко сделать это случайно, что все современные браузеры будут кодировать для вас, если вы забыли .
Да, автоматическое кодирование — это вещь
Эта функция включена в спецификацию HTML5.
При синтаксическом анализе пути и строки запроса синтаксический анализатор должен отметить , что изначально присутствовали недопустимые символы, а затем приступить к самому процентному кодированию:
При первом чтении кажется, что сразу возникает ошибка, если %NN кодировка не использовалась. Но вот в чем загвоздка: ошибка проверки не является фатальной ошибкой. Это больше похоже на обработанное исключение.
Спецификация предписывает, что обработка будет продолжаться после такой ошибки:
Таким образом, ошибка проверки записывается «на стороне», если хотите — и у вас все еще есть неверный HTML , как и любой валидатор скажет вам — но это еще не конец истории.
Вот почему такие атрибуты, как или , которые мы (несколько неправильно) думаем о как об «URL», по-прежнему работают с пробелами.
Пробелы кодируются до того, как конечный URL будет передан по сети!
Автоматическое кодирование применяется только к символам, которые также не являются специальными
Функция автоматического кодирования URL применяется только к символам, не имеющим специального значения в их текущей позиции в URL-адресе.
То есть действительно применяется к пробелам и ко всем символам, отличным от ASCII[4]. не применяется к символам ASCII, таким как и , = и # , когда они могут быть особыми.
Это ограничение имеет смысл, если подумать. Браузер не может знать, имели ли вы в виду специальный и , который разделяет параметры запроса, или неспециальный и со значением «и» (что должно быть %26 для деспециализации). Он не может знать, имели ли вы в виду специальный разделитель хэштегов # или неспециальный цифровой знак # (который будет %23 ).
И так далее.
Таким образом, в этих случаях символ останется точно таким, какой он есть. Если вам нужен неспециальный смысл, вы должны закодировать его самостоятельно. А еще лучше: правильно закодируйте все недопустимых символов и не полагайтесь на браузер. Но в то же время знайте, что браузеры предлагают некоторую защиту, и не волнуйтесь, если вы иногда забываете %20 .
ПРИМЕЧАНИЯ
[1] В настоящее время я не буду отвечать на вопросы о кодировании пробелов в + . Например, когда значение хранится в незакодированном виде в базе данных — как и положено — но платформа не предлагает никакого способа выбрать кодировку при отображение/вывод .
[3] Обратите внимание, что все символы, упомянутые в этом разделе ( + & = % ), разрешены в именах файлов на уровне ОС/файловой системы, поэтому их легко использовать в повседневной работе.