Differenza tra SRC e HREF

Gli attributi SRC e HREF sono usati per includere alcune quadro esterne come un’immagine, un file CSS, un file HTML, qualsiasi altra pagina web o un file JavaScript.

C’è una chiara differenziazione tra SRC e HREF ? Dove o quando utilizzare SRC o HREF ? Penso che non possano essere usati in modo intercambiabile.

Di seguito fornirò 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 dello script.
  • Per riferire un file immagine: src="mypic.jpg" all’interno di un tag immagine.
  • Per riferire 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 i cambiamenti nelle specifiche.


Sì. Esiste una differenziazione 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 (Hypertext Reference) specifica l’ubicazione di una risorsa Web, definendo quindi un collegamento o una relazione tra l’elemento corrente (nel caso dell’ancora a ) o il documento corrente (nel caso del link ) e l’ancora di destinazione o la risorsa definita da questo attributo. Quando scriviamo:

  

Il browser capisce che questa risorsa è un foglio di stile e il in lavorazione l’analisi della pagina non viene messa in pausa (il rendering potrebbe essere sospeso poiché il browser ha bisogno delle regole di stile per dipingere e renderizzare la pagina). Non è simile al dumping del contenuto del file css all’interno del tag di style . (Quindi è consigliabile utilizzare link piuttosto che @import per albind fogli di stile al documento html.)

l’ attributo src (Source) incorpora la risorsa nel documento corrente nel punto della definizione dell’elemento. Per es. Quando il browser trova

  

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 tag dello script . Simile è il caso con il tag img . È un tag vuoto e il contenuto, che dovrebbe entrare dentro, è definito dall’attributo src . Il browser sospende il caricamento finché non recupera e carica l’immagine. [così è il caso con iframe ]

Questo è il motivo per cui è consigliabile caricare tutti i file JavaScript in fondo (prima del )


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

La risposta di apnerve era corretta prima che venisse pubblicato HTML 5, ora è un po ‘più complicato.

Ad esempio, l’elemento script , secondo la specifica HTML 5 , ha due attributi globali che cambiano il funzionamento dell’attributo src : async e defer . Questi cambiano il modo in cui lo script (incorporato in linea o importato da file esterno) deve essere eseguito.

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

  1. Quando è presente l’attributo async , lo script verrà eseguito in modo asincrono, non appena sarà disponibile.
  2. Quando l’attributo async non è presente ma è presente l’attributo defer , lo script viene eseguito quando la pagina ha terminato l’analisi.
  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 chiunque occasionalmente visiti questo argomento. Alcune delle risposte dovrebbero essere controllate e archiviate da StackOverflow e ognuno di noi.

Penso che aggiunga alcune risorse alla pagina e serve solo a fornire un collegamento a una risorsa (senza aggiungere la risorsa stessa alla pagina).

Semplice definizione

 SRC : (Source). To specify the origin of (a communication); document: HREF : (Hypertext Reference). A reference or link to another page, document... 

Dovresti ricordare quando usare tutti e basta
l’ href è usato con i collegamenti

   

lo src è usato con script e immagini

   

l' url è usato generalmente nei CSS per includere qualcosa, ad esempio per aggiungere un'immagine di sfondo

 selector { background-image: url('https://stackoverflow.com/questions/3395359/difference-between-src-and-href/the_image_link'); } 

SRC ( S ou rc e) – Voglio caricare questa risorsa per me stesso.

Per esempio:

 Absolute URL with script element:  Relative URL with img element :  

HREF ( H ypertext REF erence) – Voglio fare riferimento a questa risorsa per qualcun altro.

Per esempio:

 Absolute URL with anchor element: Click here Relative URL with link element:  

Cortesia

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

Dalla W3:

Quando l’attributo href dell’elemento A è impostato, l’elemento definisce un’ancora di origine per un collegamento che può essere triggersto dall’utente per recuperare una risorsa Web. L’ancoraggio di origine è la posizione dell’istanza A e l’ancora 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 immagini ampiamente riconosciuti includono GIF, JPEG e PNG.

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

H REF : è un riferimento alle informazioni per la pagina corrente, ad esempio informazioni css per lo stile della pagina o link a un’altra pagina. L’analisi della pagina non viene interrotta.

SRC : È necessario aggiungere / caricare SOURCE alla pagina come in immagini o javascript. L’analisi delle pagine potrebbe interrompersi a seconda dell’attributo codificato. Ecco perché è meglio aggiungere uno script prima del tag body finale, in modo che il rendering della pagina non venga mantenuto.

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


parte 4 (Gli elementi dell’HTML)

capitolo 2 (Document metadata)

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

La destinazione del / i collegamento / i è data dall’attributo href , che deve essere presente e deve contenere un URL non vuoto valido potenzialmente circondato da spazi. Se l’attributo href è assente, l’elemento non definisce un collegamento.

non contiene l’attributo src

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’attributo src , che se specificato fornisce l’URL della risorsa script esterna da utilizzare. Se src è specificato, 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 conforms ai requisiti della produzione di script della specifica JavaScript per gli script classici.

non menziona nemmeno l’attributo href

questo indica che mentre si usano i tag script usano sempre l’attributo src !!!


capitolo 7 (contenuto incorporato)

sezione 5 (L’elemento img)

L’immagine fornita dagli attributi src e srcset e gli srcset attributi srcset dell’elemento sorgente precedente se il genitore è un elemento picture , è il contenuto incorporato.

inoltre non menziona l’attributo href

questo indica che quando si usano i tag img dovrebbe usare anche l’attributo src


Link di riferimento alla raccomandazione W3C

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

Hanno davvero significati simili, quindi questa è un’incongruenza. Assumerei per lo più a causa dei diversi tag che sono stati implementati da diversi fornitori per cominciare, quindi inclusi nelle specifiche così come per evitare l’interruzione della compatibilità.

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.

Una definizione semplice

  • SRC: se una risorsa può essere inserita 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 solo collegata (per html, css)

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 un tag di ancoraggio che punta a una risorsa specifica. Quindi usare href mi sembra strano. Anche se non è ancora caricato con la pagina senza quella pagina non può sembrare completo e quindi non è solo una relazione ma una risorsa che a sua volta si riferisce a molte altre risorse come le immagini.

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

Quando usi la tua pagina web, il browser vede che è un foglio di stile e quindi continua con il rendering della pagina man mano che il foglio di stile viene scaricato in parellel.

Quando usi la tua pagina web, dice 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 ha completato il processo di caricamento, il processo di rendering della pagina viene interrotto. Questo è il motivo per cui YUI consiglia di caricare i file JS nella parte inferiore della pagina Web.