Différence entre SRC et HREF

Question

Le site SRC et HREF sont utilisés pour inclure des entités externes telles qu'une image, un fichier CSS, un fichier HTML, toute autre page Web ou un fichier JavaScript.

Existe-t-il une différenciation claire entre SRC et HREF ? Où ou quand utiliser SRC o HREF ? Je pense qu'ils ne peuvent pas être utilisés de manière interchangeable.

Je vous donne ci-dessous quelques exemples où ces attributs sont utilisés :

• Pour référencer un fichier CSS : href="cssfile.css" à l'intérieur de la balise de lien.
• Pour référencer un fichier JS : src="myscript.js" à l'intérieur de la balise script.
• Pour référencer un fichier image : src="mypic.jpg" à l'intérieur d'une balise d'image.
• Pour renvoyer une autre page web : href="http://www.webpage.com" à l'intérieur d'une balise d'ancrage.

Answer 1

NOTE : @John-Yin's réponse est plus approprié compte tenu des changements dans les spécifications.

---

Oui. Il y a une différence entre src et href et ils ne peuvent pas être utilisés de manière interchangeable. Nous utilisons src para a remplacé éléments tandis que href pour établir une relation entre le document de référencement et une ressource externe.

href (Hypertext Reference) spécifie l'emplacement d'une ressource Web, définissant ainsi un lien ou une relation entre l'élément courant (dans le cas d'une ancre a ) ou le document actuel (en cas de link ) et l'ancre ou la ressource de destination définie par cet attribut. Lorsque nous écrivons :

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

Le navigateur comprend que cette ressource est une feuille de style et que l'option traitement L'analyse de la page est no en pause (le rendu peut être en pause car le navigateur a besoin des règles de style pour peindre et rendre la page). Il est no similaire au vidage du contenu du fichier css à l'intérieur de l'application style étiquette. (Il est donc conseillé d'utiliser link plutôt que @import pour joindre des feuilles de style à votre document html).

src L'attribut (Source) incorpore simplement la ressource dans le document actuel à l'emplacement de la définition de l'élément. Par exemple, lorsque le navigateur trouve

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

Le chargement et le traitement de la page sont interrompus jusqu'à ce que le navigateur récupère, compile et exécute le fichier. C'est similaire au fait de déverser le contenu du fichier js à l'intérieur du fichier script tag. Il en va de même pour img étiquette. Il s'agit d'une balise vide et le contenu qui doit y figurer est défini par la balise src attribut. Le navigateur met en pause le chargement jusqu'à ce qu'il récupère et charge l'image. [C'est le cas avec iframe ]

C'est la raison pour laquelle il est conseillé de charger tous les fichiers JavaScript en bas de page (avant l'élément </body> étiquette)

---

mise à jour : Référez-vous à @John-Yin's réponse pour plus d'informations sur la façon dont il est mis en œuvre conformément aux spécifications de HTML 5.

Answer 2

La réponse d'apnerve était correcte avant la sortie de HTML 5, maintenant c'est un peu plus compliqué.

Par exemple, le script selon l'élément HTML 5 possède deux attributs globaux qui modifient la manière dont l'indicateur src fonctions d'attributs : async et defer . Ils modifient la façon dont le script (intégré en ligne ou importé d'un fichier externe) doit être exécuté.

Cela signifie qu'il existe trois modes possibles qui peuvent être sélectionnés à l'aide de ces attributs :

1. Lorsque le async est présent, alors le script sera exécuté de manière asynchrone, dès qu'il sera disponible.
2. Lorsque le async n'est pas présent mais l'attribut defer est présent, alors le script est exécuté lorsque la page a fini d'être analysée.
3. Si aucun des deux attributs n'est présent, alors le script est récupéré et exécuté immédiatement, avant que l'agent utilisateur ne continue à analyser la page.

Pour plus de détails, veuillez consulter Recommandation HTML 5

Je voulais juste mettre à jour avec une nouvelle réponse pour ceux qui visitent occasionnellement ce sujet. Certaines réponses devraient être vérifiées et archivées par stackoverflow et chacun d'entre nous.

Answer 3

Je pense <src> ajoute des ressources à la page et <href> sert uniquement à fournir un lien vers une ressource (sans ajouter la ressource elle-même à la page).

Answer 4

Définition simple

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

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

Answer 5

Vous devez vous rappeler quand utiliser tout le monde et c'est tout.
le site href est utilisé avec des liens

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

le site src est utilisé avec les scripts et les images

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

le site url est généralement utilisé en CSS pour inclure quelque chose, par exemple pour ajouter une image de fond.

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