Différence entre la SRC et le HREF
La SRC
et HREF
attributs sont utilisés pour inclure certaines entités externes comme une image, un fichier CSS, un fichier HTML, de toute autre page web ou un fichier JavaScript.
Est-il une différenciation claire entre SRC
et HREF
? Où et quand utiliser SRC
ou HREF
? Je pense qu'ils ne peuvent pas être utilisés de façon interchangeable.
Je donne ci-dessous quelques exemples de cas où ces attributs sont utilisés:
- Pour désigner un fichier CSS:
href="cssfile.css"
à l'intérieur de la balise de lien. - Pour désigner un fichier JS:
src="myscript.js"
à l'intérieur de la balise script. - Pour désigner un fichier image:
src="mypic.jpg"
à l'intérieur d'une balise image. - À se référer à une autre page web:
href="http://www.webpage.com"
à l'intérieur d'une balise d'ancrage.
- Merci tous pour vos contributions. Donc, il semble que il n'y a pas de distinction claire entre ces deux. Je voudrais attendre un peu plus de temps pour obtenir plus de réponse. Oded de l'observation semble peu acceptable pour moi.
- Il y a une distinction entre les 2. J'ai écrit ma réponse dans les détails pour expliquer que.
Vous devez vous connecter pour publier un commentaire.
REMARQUE: @Jean-Yin réponse est plus approprié de prendre en considération les changements dans les caractéristiques techniques.
Oui. Il y a une différenciation entre src et href et ils ne peuvent pas être utilisés de façon interchangeable. Nous utilisons src pour remplacé éléments, tout en href pour établir une relation entre le référencement document et une ressource externe.
href (Hypertext Référence) attribut spécifie l'emplacement d'une ressource Web définissant ainsi un lien ou une relation entre l'élément en cours (dans le cas de l'ancre
a
) ou document en cours (en cas delink
) et de la destination de l'ancre ou de ressources définies par cet attribut. Lorsque nous écrire:Le navigateur comprend que cette ressource est une feuille de style et le
traitementl'analyse de la page est pas en pause (le rendu peut être mis en pause depuis le navigateur besoins les règles de style pour la peinture et le rendu de la page). Il est pas similaire à verser le contenu du fichier css à l'intérieur de lastyle
tag. (Il est donc conseillé d'utiliserlink
plutôt que@import
pour attacher des feuilles de style à votre document html.)src (Source) attribut juste incorpore la ressource dans le document actif à l'emplacement de la définition de l'élément. Pour eg. Lorsque le navigateur trouve
Le chargement et le traitement de la page est en pause jusqu'à ce que le navigateur récupère, compile et exécute le fichier. Il est semblable à verser le contenu du fichier js à l'intérieur de la
script
tag. Similaires est le cas avecimg
tag. C'est une balise vide et le contenu, qui doit venir à l'intérieur, est défini par lasrc
attribut. Le navigateur s'interrompt le chargement jusqu'à ce qu'il récupère et les charges de l'image. [c'est le cas aveciframe
]C'est la raison pour laquelle il est conseillé de charger tous les fichiers JavaScript en bas (avant le
</body>
tag)mise à jour : reportez-vous @Jean-Yin réponse pour plus d'informations sur la façon dont il est mis en œuvre que par HTML 5 spécifications.
href
charge en parallèle. Ainsi, la perception du temps de chargement augmente lorsque les ressources sont chargées en série.href
pour les css etsrc
pour le script? Ce qui va se passer si nous utilisonshref
de script ou d'autres situations?apnerve réponse était correcte avant de l'HTML 5 est sorti, maintenant, c'est un peu plus compliqué.
Par exemple, la
script
élément, selon le HTML 5 spécification, a deux attributs qui changent la façon dont lesrc
fonctions d'attribut:async
etdefer
. Ces changer la façon dont le script (embedded inline ou importées à partir d'un fichier externe) doit être exécutée.Cela signifie qu'il y a trois modes possibles qui peuvent être sélectionnés à l'aide de ces attributs:
async
attribut est présent, alors le script sera exécuté de manière asynchrone, dès qu'il est disponible.async
attribut n'est pas présent, mais ledefer
attribut est présent, alors le script est exécuté quand la page a fini de l'analyse.Pour plus de détails, veuillez voir HTML 5 de la recommandation
Je voulais juste mettre à jour avec une nouvelle réponse pour quiconque visite de temps en temps à ce sujet. Certaines des réponses doivent être vérifiées et archivés par stackoverflow et chacun d'entre nous.
Je pense que
<src>
ajoute quelques ressources à la page et<href>
est juste pour fournir un lien vers une ressource(sans ajout de la ressource elle-même à la page).Définition Simple
Vous devriez vous rappeler lors de l'utilisation de tout le monde et qu'en est-il
le href est utilisé avec des liens
la src est utilisé avec des scripts et des images
la url est utilisé généralement dans l'CSS à inclure quelque chose, par exemple pour ajouter une image d'arrière-plan
SRC(Source) -- je veux charger de cette ressource pour moi-même.
Par exemple:
HREF(Hypertext REFérence) -- je veux me référer à cette ressource pour quelqu'un d'autre.
Par exemple:
Courtoisie
Si vous parlez HTML4, son liste des attributs peut vous aider avec les subtilités. Ils ne sont pas interchangeables.
De W3:
Source: http://www.w3.org/TR/html401/struct/links.html
Source: http://www.w3.org/TR/REC-html40/struct/objects.html
HREF Est une REFérence à l'information de la page actuelle ie css info pour le style de page ou un lien vers une autre page. la Page de l'Analyse n'est pas arrêté.
SRC: Est un reSOURCE pour être ajouté/chargement de la page, comme dans les images ou le javascript. Page d'Analyse peut s'arrêter selon le code d'attribut. C'est pourquoi il est préférable d'ajouter le script juste avant la fin du corps de la balise de sorte que le rendu de la page n'est pas tenue jusqu'.
après avoir passer par le HTML 5.1 ducumentation (1 novembre 2016):
de la partie 4 (Les éléments de HTML)
ne contient pas le
src
attribut ...sorcière est logique car c'est un lien .
il ne mentionne même pas le
href
attribut ...cela indique que, même en utilisant des balises de script, utilisez toujours le
src
attribut !!!aussi ne pas parler de la
href
attribut ...cela indique que lors de l'utilisation de
img
les balises de lasrc
attribut doit être utilisé aswell ...Lien de référence à la Recommandation du W3C
Ils ne sont pas interchangeables - chaque définie sur des éléments différents, comme on peut le voir ici.
Ils ont en effet la même chose, donc c'est une incohérence. Je suppose principalement en raison de les différentes balises mises en œuvre par les différents fournisseurs afin de commencer avec, puis les répartir dans les spécifications que pour éviter de casser la compatibilité ascendante.
src
tag ajoute de ressources à la page tout enhref
fournit simplement un lien vers la ressource et établit une relation avec le document.Ils n'ont pas des significations semblables. 'src' indique une ressource au navigateur d'aller chercher dans le cadre de la page en cours. HREF indicatea une ressource qui doit être récupérés si l'utilisateur en fait la demande.
<link href="foo.css" type="text/css">
href
indique une ressource qui doit être récupérées si le user-agent en fait la demande. La feuille de style est pas récupérées dans le cadre du présent document.Une définition simple
Je suis d'accord que apnerve dit sur la distinction. Mais dans le cas de la css, il semble étrange. Comme css obtient également téléchargé au client par le navigateur. Ce n'est pas comme balise d'ancrage qui pointe vers une ressource spécifique. Donc, en utilisant href y me semble étrange. Même si elle n'est pas chargé avec la page encore sans que la page ne peut pas regarder complet et donc ce n'est pas juste relation, mais comme des ressources qui, à son tour, renvoie à de nombreuses autres ressources comme des images.
CSS
est une partie de laHTML
document, vous pouvez utiliser aller de l'avant et utiliser lestyle
tag avec@import
règle. Il pourrait avoir des conséquences sur la performance, mais fait de bon sens dans ce scénario.src est utilisé pour ajouter de la ressource à la page, alors que le href est utilisé pour accéder à une ressource particulière à partir de cette page.
Lorsque vous utilisez dans votre page web, le navigateur voit que ses une feuille de style, et donc continue avec le rendu de la page que la feuille de style est téléchargé en parallèles.
Lorsque vous utilisez dans votre page web, il indique au navigateur d'insérer la ressource à l'emplacement. Alors maintenant, le navigateur doit extraire le fichier js et le charge ensuite. Jusqu'à ce que le navigateur termine le processus de chargement, le rendu de la page processus est interrompu. C'est la raison pour laquelle YUI recommande de charger vos fichiers JS en bas de votre page web.