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

Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

Подробнее см. Рекомендация HTML 5

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

src используется со сценариями и изображениями

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

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

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

Ответ 6

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">

Предоставлено

Ответ 7

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

Ответ 8

Из W3:

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

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

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

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

Ответ 9

H REF: является ли REF доступ к информации для текущей страницы , т.е. информации css для стиля страницы или ссылки на другую страницу. Page Parsing не останавливается.

SRC: Является ли re SOURCE для добавления/загрузки на страницу, как на изображениях или javascript. Page Parsing может останавливаться в зависимости от закодированного атрибута. Поэтому лучше добавить script непосредственно перед тегом тега окончания, чтобы рендеринг страниц не поддерживался.

Ответ 10

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

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

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

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

     

  

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

  

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

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

глава 12 (сценарии)

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

     

  

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

  

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

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

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

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

     

  

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

  

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

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

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

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

Ответ 14

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

Ответ 15

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

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

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