Differenza tra SRC e HREF

Gli attributi SRCe HREFvengono utilizzati per includere alcune entità esterne come un'immagine, un file CSS, un file HTML, qualsiasi altra pagina Web o un file JavaScript.

Esiste una chiara differenziazione tra SRCe HREF? Dove o quando usare SRCo HREF? Penso che non possano essere usati in modo intercambiabile.

Di seguito alcuni esempi in cui vengono utilizzati questi attributi:

• Per fare riferimento a un file CSS: href="cssfile.css"all'interno del tag link.
• Per fare riferimento a un file JS: src="myscript.js"all'interno del tag script.
• Per fare riferimento a un file immagine: src="mypic.jpg"all'interno di un tag immagine.
• Per fare riferimento a un'altra pagina Web: href="http://www.webpage.com"all'interno di un tag di ancoraggio.

NOTA: la risposta di @ John-Yin è più appropriata considerando le modifiche alle specifiche.

Sì. C'è una differenza tra src e href e non possono essere usati in modo intercambiabile. Usiamo src per gli elementi sostituiti mentre href per stabilire una relazione tra il documento di riferimento e una risorsa esterna.

L' attributo href (riferimento ipertestuale) specifica la posizione di una risorsa Web definendo così un collegamento o una relazione tra l'elemento corrente (in caso di ancoraggio a) o il documento corrente (in caso di link) e l'ancoraggio o la risorsa di destinazione definiti da questo attributo. Quando scriviamo:

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

Il browser comprende che questa risorsa è un foglio di stile e il file in lavorazionel'analisi della pagina non è in pausa (il rendering potrebbe essere sospeso poiché il browser necessita delle regole di stile per disegnare e rendere la pagina). E ' non è simile al dumping il contenuto del file css all'interno del styletag. (Quindi è consigliabile utilizzare linkpiuttosto che @importper allegare fogli di stile al documento HTML.)

L' attributo src (Source) incorpora semplicemente la risorsa nel documento corrente nella posizione della definizione dell'elemento. Per es. Quando il browser trova

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

Il caricamento e l'elaborazione della pagina vengono sospesi fino a quando il browser non recupera, compila ed esegue il file. È simile al dumping del contenuto del file js all'interno del scripttag. Simile è il caso con imgtag. È un tag vuoto e il contenuto, che dovrebbe entrare al suo interno, è definito dall'attributo src. Il browser interrompe il caricamento fino a quando non recupera e carica l'immagine. [così è il caso di iframe]

Questo è il motivo per cui è consigliabile caricare tutti i file JavaScript in fondo (prima del </body>tag)

aggiornamento : fai riferimento alla risposta di @John-Yin per maggiori informazioni su come viene implementato secondo le specifiche HTML 5.

la risposta di apnerve era corretta prima che uscisse HTML 5, ora è un po 'più complicato.

Ad esempio, l' scriptelemento, secondo la specifica HTML 5 , ha due attributi globali che cambiano il srcfunzionamento dell'attributo: asynce defer. Questi cambiano il modo in cui eseguire lo script (incorporato in linea o importato da file esterno).

Ciò significa che ci sono tre possibili modalità che possono essere selezionate usando questi attributi:

1. Quando l' asyncattributo è presente, lo script verrà eseguito in modo asincrono, non appena sarà disponibile.
2. Quando l' asyncattributo non è presente ma l' deferattributo è presente, lo script viene eseguito al termine dell'analisi della pagina.
3. Quando nessuno degli attributi è presente, lo script viene recuperato ed eseguito immediatamente, prima che l'agente utente continui ad analizzare la pagina.

Per i dettagli, consultare la raccomandazione HTML 5

Volevo solo aggiornare con una nuova risposta per chi visita occasionalmente questo argomento. Alcune delle risposte dovrebbero essere verificate e archiviate da StackOverflow e ognuno di noi.

Penso che <src>aggiunge alcune risorse alla pagina ed <href>è solo per fornire un collegamento a una risorsa (senza aggiungere la risorsa stessa alla pagina).

Definizione semplice

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) - Voglio caricare questa risorsa per me stesso.

Per esempio:

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 ) - Voglio fare riferimento a questa risorsa per qualcun altro.

Per esempio:

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

Cortesia

H REF : È un REF erenza alle informazioni per la pagina corrente vale a dire informazioni CSS per lo stile di pagina o un link a un'altra pagina. L'analisi della pagina non viene interrotta.

SRC : È una re FONTE da aggiungere / caricare sulla pagina come in immagini o javascript. L'analisi della pagina potrebbe interrompersi in base all'attributo codificato. Ecco perché è meglio aggiungere uno script appena prima del tag body finale in modo che il rendering della pagina non venga trattenuto.

Se stai parlando di HTML4, il suo elenco di attributi potrebbe aiutarti con le sottigliezze. Non sono intercambiabili.

Da W3:

Quando viene impostato l'attributo href dell'elemento A, l'elemento definisce un ancoraggio di origine per un collegamento che può essere attivato dall'utente per recuperare una risorsa Web. L'ancoraggio di origine è la posizione dell'istanza A e l'ancoraggio di destinazione è la risorsa Web.

Fonte: http://www.w3.org/TR/html401/struct/links.html

Questo attributo specifica la posizione della risorsa immagine. Esempi di formati di immagine ampiamente riconosciuti includono GIF, JPEG e PNG.

Fonte: http://www.w3.org/TR/REC-html40/struct/objects.html

Una definizione semplice

• SRC: se una risorsa può essere collocata all'interno del tag body (per immagine, script, iframe, frame)
• HREF: se una risorsa non può essere inserita all'interno del tag body e può essere collegata solo (per html, css)

Dovresti ricordare quando usare tutti e basta che
l' href sia usato con i collegamenti

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

lo src è usato con script e immagini

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

l' URL viene generalmente utilizzato nei CSS per includere qualcosa, ad esempio per aggiungere un'immagine di sfondo

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

dopo aver esaminato la documentazione HTML 5.1 (1 novembre 2016):

parte 4 (Gli elementi di HTML)

capitolo 2 (Document metadata)

la sezione 4 (L'elemento link) afferma che:

La destinazione dei collegamenti è data dall'attributo href, che deve essere presente e deve contenere un URL non vuoto valido potenzialmente circondato da spazi. Se l' hrefattributo è assente, l'elemento non definisce un collegamento.

non contiene l' srcattributo ...

la strega è logica perché è un collegamento.

capitolo 12 (Scripting)

la sezione 1 (L'elemento script) afferma che:

Gli script classici possono essere incorporati in linea o possono essere importati da un file esterno utilizzando l' srcattributo, che se specificato fornisce l'URL della risorsa di script esterna da utilizzare. Se srcspecificato, deve essere un URL non vuoto valido potenzialmente circondato da spazi. Il contenuto degli elementi di script inline o della risorsa di script esterna deve essere conforme ai requisiti della produzione di script della specifica JavaScript per gli script classici.

non menziona nemmeno l' hrefattributo ...

questo indica che durante l'utilizzo dei tag script utilizzare sempre l' srcattributo !!!

capitolo 7 (Contenuto incorporato)

sezione 5 (L'elemento img)

L'immagine fornita dagli attributi srce srcset, e tutti gli srcsetattributi dell'elemento sorgente fratello precedente se il genitore è un pictureelemento, è il contenuto incorporato.

inoltre non menziona l' hrefattributo ...

questo indica che quando si usano i imgtag, l' srcattributo dovrebbe essere usato anche ...

Link di riferimento alla raccomandazione W3C

Non sono intercambiabili: ognuno è definito su elementi diversi, come si può vedere qui .

Hanno davvero significati simili, quindi questa è un'incoerenza. Presumo principalmente a causa dei diversi tag implementati da diversi fornitori per cominciare, quindi sono stati inclusi nelle specifiche per evitare di rompere la compatibilità con le versioni precedenti.

Non hanno significati simili. 'src' indica una risorsa che il browser dovrebbe recuperare come parte della pagina corrente. HREF indica una risorsa da recuperare se l'utente lo richiede.

Sono d'accordo su ciò che Apnerve dice sulla distinzione. Ma in caso di CSS sembra strano. Come css viene anche scaricato sul client dal browser. Non è come il tag di ancoraggio che punta a qualsiasi risorsa specifica. Quindi usando href mi sembra strano. Anche se non è caricato con la pagina ancora senza quella pagina non può sembrare completo e quindi non è solo una relazione ma una risorsa simile che a sua volta si riferisce a molte altre risorse come le immagini.

src serve per aggiungere quella risorsa alla pagina, mentre href viene usato per collegarsi a una particolare risorsa da quella pagina.

Quando lo usi nella tua pagina web, il browser vede che si tratta di un foglio di stile e quindi continua con il rendering della pagina quando il foglio di stile viene scaricato in parallelo.

Quando lo usi nella tua pagina web, indica al browser di inserire la risorsa nella posizione. Quindi ora il browser deve recuperare il file js e quindi caricarlo. Fino a quando il browser non termina il processo di caricamento, il processo di rendering della pagina viene interrotto. Questo è il motivo per cui YUI consiglia di caricare i tuoi file JS nella parte inferiore della tua pagina web.