Різниця між SRC та HREF

SRCІ HREFатрибути використовуються , щоб включити деякі зовнішні об'єкти , такі як зображення, файл CSS, в HTML - файл, будь-який інший веб - сторінку або файл JavaScript.

Чи є чітка диференціація між SRCі HREF? Де або коли використовувати SRCабо HREF? Я думаю, що їх не можна взаємозамінно використовувати.

Я наводжу нижче кілька прикладів, де використовуються ці атрибути:

• Для посилання на файл CSS: href="cssfile.css"всередині тегу посилання.
• Для посилання на JS-файл: src="myscript.js"всередині тегу сценарію.
• Щоб віднести файл зображення: 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>тегом)

оновлення : див. відповідь на Джон-Інь для отримання додаткової інформації про те, як вона реалізована відповідно до специфікацій 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 erence ) - я хочу звернутися до цього ресурсу для когось іншого.

Наприклад:

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. Розбір сторінки може припинитися залежно від кодованого атрибуту. Ось чому краще додати скрипт перед тегом кінця тіла, щоб візуалізація сторінки не затримувалася.

Якщо ви говорите на 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: Якщо ресурс не може бути розміщений всередині тегу тіла, він може бути пов'язаний лише (для 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'); } 

після перегляду документації HTML 5.1 (1 листопада 2016 року):

частина 4 (елементи HTML)

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

у розділі 4 (елемент посилання) зазначено, що:

Призначення посилань (ив) визначається hrefатрибутом, який повинен бути присутнім і повинен містити дійсну не порожню URL-адресу, потенційно оточену пробілами. Якщо hrefатрибут відсутній, то елемент не визначає посилання.

не містить srcатрибута ...

відьма логічна, тому що це посилання.

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

у розділі 1 (елемент сценарію) зазначено, що:

Класичні сценарії можуть бути або вбудованими вбудованими, або можуть бути імпортовані із зовнішнього файлу за допомогою srcатрибута, який, якщо зазначено, дає URL-адресу зовнішнього ресурсу сценарію для використання. Якщо srcвказано, це повинна бути дійсна непорожня URL-адреса, потенційно оточена пробілами. Вміст елементів вбудованого сценарію або зовнішній ресурс скрипта повинен відповідати вимогам сценарію JavaScript специфікації для класичних сценаріїв.

він навіть не згадує hrefатрибут ...

це вказує на те, що при використанні тегів сценарію завжди використовуйте srcатрибут !!!

Глава 7 (Вкладений вміст)

розділ 5 (елемент img)

Зображення, задане атрибутами srcта srcsetатрибутами, та будь-якими попередніми srcsetатрибутами вихідного елемента брати, якщо батьківський pictureелемент, є вбудованим вмістом.

також не згадує hrefатрибут ...

це вказує на те, що при використанні imgтегів srcатрибут повинен бути використаний також ...

Посилання на Рекомендацію W3C

Вони не взаємозамінні - кожен визначається на різних елементах, як це видно тут .

Вони справді мають подібні значення, тому це непослідовність. Я б припускав, що в основному завдяки різним тегам, що впроваджуються різними постачальниками, для початку, а потім занурюється в специфікацію, щоб уникнути порушення сумісності.

Вони не мають подібних значень. 'src' вказує на ресурс, який браузер повинен отримати як частину поточної сторінки. HREF вказує на ресурс, який потрібно отримати, якщо користувач цього вимагає.

Я погоджуюся з тим, що говорить apnerve про відмінність. Але у випадку css це виглядає дивним. Оскільки css також завантажується клієнтом через браузер. Це не як тег прив’язки, який вказує на якийсь конкретний ресурс. Тож використання href мені здається дивним. Навіть якщо його не завантажено сторінкою без цієї сторінки, вона не може виглядати повною, тому її не просто співвідношення, а подібний ресурс, який, у свою чергу, відноситься до багатьох інших ресурсів, таких як зображення.

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

Коли ви користуєтеся своєю веб-сторінкою, браузер бачить, що її аркуш стилів, а отже, продовжує відображення сторінки, коли аркуш стилів завантажується у паралельній формі.

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