Разница между SRC и HREF

SRCИ HREFатрибуты используются , чтобы включить некоторые внешние объекты , такие как изображения, файл CSS, в HTML - файл, любой другой веб - страницу или файл JavaScript.

Есть ли четкое различие между SRCи HREF? Где или когда использовать SRCили HREF? Я думаю, что они не могут быть использованы взаимозаменяемо.

Ниже я приведу несколько примеров, где используются эти атрибуты:

• Для ссылки на файл CSS: href="cssfile.css"внутри тега ссылки.
• Для ссылки на файл JS: src="myscript.js"внутри тега script.
• Для ссылки на файл изображения: src="mypic.jpg"внутри тега изображения.
• Для ссылки на другую веб-страницу: href="http://www.webpage.com"внутри тега привязки.

ПРИМЕЧАНИЕ: @ Джон-Инь ответ более уместен, учитывая изменения в спецификациях.

Да. Существует различие между src и href, и их нельзя использовать взаимозаменяемо. Мы используем src для замененных элементов, а href - для установления связи между ссылочным документом и внешним ресурсом.

Атрибут href (Hypertext Reference) указывает местоположение веб-ресурса, определяя таким образом ссылку или взаимосвязь между текущим элементом (в случае привязки a) или текущим документом (в случае link) и целевым якорем или ресурсом, определенными этим атрибутом. Когда мы пишем:

<link href="style.css" rel="stylesheet" />

Браузер понимает, что этот ресурс является таблицей стилей и обработкасинтаксический анализ страницы не приостанавливается (рендеринг может быть приостановлен, поскольку браузеру нужны правила стилей для рисования и визуализации страницы). Это не похоже на сброс содержимого файла CSS внутри styleтега. (Следовательно, желательно использовать, linkа не @importприкреплять таблицы стилей к вашему HTML-документу.)

Атрибут src (Source) просто внедряет ресурс в текущий документ в месте определения элемента. Например, Когда браузер находит

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

Загрузка и обработка страницы приостанавливается до тех пор, пока браузер не извлечет, не скомпилирует и не выполнит файл. Это похоже на сброс содержимого файла js внутри scriptтега. Похожий случай с imgтегом. Это пустой тег, и содержимое, которое должно входить в него, определяется srcатрибутом. Браузер приостанавливает загрузку, пока не получит и не загрузит изображение. [так обстоит дело с iframe]

По этой причине рекомендуется загружать все файлы JavaScript внизу (перед </body>тегом).

обновление : см. ответ @ John-Yin для получения дополнительной информации о том, как это реализовано в соответствии со спецификациями HTML 5.

Ответ apnerve был правильным до выхода HTML 5, теперь он немного сложнее.

Например, scriptэлемент, согласно спецификации HTML 5 , имеет два глобальных атрибута, которые изменяют его srcфункционирование: asyncи defer. Они изменяют способ выполнения скрипта (встроенного или импортированного из внешнего файла).

Это означает, что есть три возможных режима, которые можно выбрать с помощью этих атрибутов:

1. Когда asyncатрибут присутствует, сценарий будет выполняться асинхронно, как только он станет доступен.
2. Когда asyncатрибут отсутствует, но deferатрибут присутствует, тогда скрипт выполняется, когда страница закончила анализ.
3. Когда ни один из атрибутов не присутствует, сценарий извлекается и выполняется немедленно, прежде чем пользовательский агент продолжит анализ страницы.

Для получения дополнительной информации см. Рекомендацию HTML 5.

Я просто хотел обновить с новым ответом для тех, кто иногда посещает эту тему. Некоторые ответы должны быть проверены и заархивированы с помощью stackoverflow и каждого из нас.

Я думаю, что <src>добавляет некоторые ресурсы на страницу и <href>просто для предоставления ссылки на ресурс (без добавления самого ресурса на страницу).

Простое определение

SRC : (Source). To specify the origin of (a communication); document:     

HREF : (Hypertext Reference). A reference or link to another page, document...

SRC ( S ou rc e) - я хочу загрузить этот ресурс для себя.

Например:

Absolute URL with script element: <script src="http://googleapi.com/jquery/script.js"></script>   

Relative URL with img element : <img src="mypic.jpg">

HREF ( H ypertext REF разностная) - Я хочу , чтобы ссылаться на этот ресурс для кого - то другого.

Например:

Absolute URL with anchor element: <a href="http://www.google.com/">Click here</a>

Relative URL with link element: <link href="mystylesheet.css" type="text/css">

учтивость

H REF : Является REF разностная к информации для текущей страницы , т.е. информацию CSS для стиля страницы или ссылки на другую страницу. Разбор страницы не остановлен.

SRC : это ИСТОЧНИК для добавления / загрузки на страницу, как в изображениях или JavaScript. Разбор страницы может остановиться в зависимости от закодированного атрибута. Вот почему лучше добавлять скрипт непосредственно перед конечным тегом body, чтобы не задерживать отображение страницы.

Если вы говорите о HTML4, его список атрибутов может помочь вам с тонкостями. Они не взаимозаменяемы.

От W3:

Когда атрибут href элемента A установлен, этот элемент определяет исходную привязку для ссылки, которая может быть активирована пользователем для получения веб-ресурса. Привязка источника - это местоположение экземпляра A, а привязка назначения - веб-ресурс.

Источник: http://www.w3.org/TR/html401/struct/links.html.

Этот атрибут указывает местоположение ресурса изображения. Примеры широко признанных форматов изображений включают GIF, JPEG и PNG.

Источник: http://www.w3.org/TR/REC-html40/struct/objects.html

Простое определение

• SRC: если ресурс можно разместить внутри тега body (для изображения, скрипта, фрейма, фрейма)
• HREF: если ресурс не может быть размещен внутри тега body и может быть только связан (для html, css)

Вы должны помнить, когда использовать всех, и это - то,
что href используется со ссылками

<a href="#"></a>
<link rel="stylesheet" href="style.css" />

SRC используется с помощью скриптов и изображений

<img src="the_image_link" />
<script type="text/javascript" src="" />

URL , как правило , используется в CSS , чтобы включать в себя что - то, для Exemple добавить фоновое изображение

selector { background-image: url('the_image_link'); } 

после прохождения ducumentation HTML 5.1 (1 ноября 2016 года):

часть 4 (элементы HTML)

глава 2 (метаданные документа)

раздел 4 (элемент ссылки) утверждает, что:

Назначение ссылки (ссылок) задается hrefатрибутом, который должен присутствовать и должен содержать действительный непустой URL, потенциально окруженный пробелами. Если hrefатрибут отсутствует, то элемент не определяет ссылку.

не содержит srcатрибута ...

Ведьма логична, потому что это ссылка.

Глава 12 (Сценарии)

В разделе 1 (элемент script) говорится, что:

Классические сценарии могут быть встроенными или могут быть импортированы из внешнего файла с использованием srcатрибута, который, если указан, дает URL-адрес внешнего ресурса сценария для использования. Если srcуказан, это должен быть действительный непустой URL, который может быть заключен в пробелы. Содержимое встроенных элементов сценария или внешнего ресурса сценария должно соответствовать требованиям спецификации сценариев JavaScript для классических сценариев.

это даже не упоминает hrefатрибут ...

это указывает на то, что при использовании тегов скрипта всегда используйте srcатрибут !!!

глава 7 (встроенный контент)

раздел 5 (элемент img)

Изображение дается srcи srcsetатрибуты, и любой предыдущий родственный исходного элемента srcsetатрибуты , если родитель является pictureэлементом, является встроенный контент.

также не упоминает hrefатрибут ...

это указывает на то, что при использовании imgтегов srcатрибут должен использоваться также ...

Ссылка на рекомендацию W3C

Они не являются взаимозаменяемыми - каждый определяется на разных элементах, как можно увидеть здесь .

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

У них нет похожих значений. 'src' указывает на ресурс, который браузер должен получить как часть текущей страницы. HREF указывает ресурс, который должен быть выбран, если пользователь запрашивает его.

Я согласен с тем, что говорит Апперве о различии. Но в случае css это выглядит странно. Как CSS также загружается на клиент с помощью браузера. Это не похоже на тег привязки, который указывает на какой-либо конкретный ресурс. Так что использование href мне кажется странным. Даже если он не загружен страницей, но без этой страницы он не может выглядеть завершенным, и это не просто взаимосвязь, а ресурс, который, в свою очередь, относится ко многим другим ресурсам, таким как изображения.

src используется для добавления этого ресурса на страницу, тогда как href используется для ссылки на определенный ресурс с этой страницы.

Когда вы используете на своей веб-странице, браузер видит, что это таблица стилей и, следовательно, продолжает рендеринг страницы, когда таблица стилей загружается в parellel.

Когда вы используете на своей веб-странице, он говорит браузеру, чтобы вставить ресурс на месте. Так что теперь браузер должен получить файл js и затем загрузить его. Пока браузер не завершит процесс загрузки, процесс отображения страницы будет остановлен. Вот почему YUI рекомендует загружать ваши файлы JS в самом низу вашей веб-страницы.