Unterschied zwischen SRC und HREF

Die Attribute SRCund HREFwerden verwendet, um einige externe Entitäten wie ein Bild, eine CSS-Datei, eine HTML-Datei, eine andere Webseite oder eine JavaScript-Datei einzuschließen.

Gibt es eine klare Unterscheidung zwischen SRCund HREF? Wo oder wann SRCoder HREF? Ich denke, sie können nicht austauschbar verwendet werden.

Ich gebe im Folgenden einige Beispiele, in denen diese Attribute verwendet werden:

• So verweisen Sie auf eine CSS-Datei: href="cssfile.css"innerhalb des Link-Tags.
• So verweisen Sie auf eine JS-Datei: src="myscript.js"innerhalb des Skript-Tags.
• So verweisen Sie auf eine Bilddatei: src="mypic.jpg"in einem Bild-Tag.
• So verweisen Sie auf eine andere Webseite: href="http://www.webpage.com"innerhalb eines Ankertags.

HINWEIS: Die Antwort von @ John-Yin ist angesichts der Änderungen in den technischen Daten angemessener.

Ja. Es gibt eine Unterscheidung zwischen src und href und sie können nicht austauschbar verwendet werden. Wir verwenden src für ersetzte Elemente, während href eine Beziehung zwischen dem referenzierenden Dokument und einer externen Ressource herstellt.

Das Attribut href (Hypertext Reference) gibt den Speicherort einer Webressource an und definiert so eine Verknüpfung oder Beziehung zwischen dem aktuellen Element (im Falle eines Ankers a) oder dem aktuellen Dokument (im Fall von link) und dem durch dieses Attribut definierten Zielanker oder der Zielressource. Wenn wir schreiben:

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

Der Browser versteht, dass diese Ressource ein Stylesheet ist und die wird bearbeitetDas Parsen der Seite wird nicht angehalten (das Rendern kann angehalten werden, da der Browser die Stilregeln zum Malen und Rendern der Seite benötigt). Es ist nicht vergleichbar mit dem Speichern des Inhalts der CSS-Datei innerhalb des styleTags. (Daher ist es ratsam, Stylesheets linknicht @importzum Anhängen an Ihr HTML-Dokument zu verwenden, sondern zu verwenden .)

Das Attribut src (Quelle) bettet die Ressource nur an der Position der Elementdefinition in das aktuelle Dokument ein. Zum Beispiel. Wenn der Browser findet

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

Das Laden und Verarbeiten der Seite wird angehalten, bis der Browser die Datei abruft, kompiliert und ausführt. Es ähnelt dem Speichern des Inhalts der js-Datei innerhalb des scriptTags. Ähnliches gilt für imgtag. Es ist ein leeres Tag und der Inhalt, der darin enthalten sein sollte, wird durch das srcAttribut definiert . Der Browser unterbricht das Laden, bis das Bild abgerufen und geladen wird. [so ist es auch mit iframe]

Aus diesem Grund ist es ratsam, alle JavaScript-Dateien unten (vor dem </body>Tag) zu laden.

Update : Weitere Informationen zur Implementierung gemäß den HTML 5-Spezifikationen finden Sie in der Antwort von @ John-Yin .

Die Antwort von apnerve war richtig, bevor HTML 5 herauskam, jetzt ist es etwas komplizierter.

Beispielsweise verfügt das scriptElement gemäß der HTML 5- Spezifikation über zwei globale Attribute, die die srcFunktionsweise des Attributs ändern : asyncund defer. Diese ändern, wie das Skript (inline eingebettet oder aus einer externen Datei importiert) ausgeführt werden soll.

Dies bedeutet, dass drei mögliche Modi mit diesen Attributen ausgewählt werden können:

1. Wenn das asyncAttribut vorhanden ist, wird das Skript asynchron ausgeführt, sobald es verfügbar ist.
2. Wenn das asyncAttribut nicht vorhanden ist, das deferAttribut jedoch vorhanden ist, wird das Skript ausgeführt, wenn die Analyse der Seite abgeschlossen ist.
3. Wenn keines der Attribute vorhanden ist, wird das Skript sofort abgerufen und ausgeführt, bevor der Benutzeragent die Seite weiter analysiert.

Einzelheiten finden Sie in der HTML 5-Empfehlung

Ich wollte nur mit einer neuen Antwort für jeden aktualisieren, der dieses Thema gelegentlich besucht. Einige der Antworten sollten von stackoverflow und jedem von uns überprüft und archiviert werden.

Ich denke, <src>fügt der Seite einige Ressourcen hinzu und <href>dient nur zum Bereitstellen eines Links zu einer Ressource (ohne die Ressource selbst zur Seite hinzuzufügen).

Einfache Definition

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) - Ich möchte diese Ressource für mich selbst laden.

Beispielsweise:

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 erenz) - ich für jemand anderen auf diese Ressource beziehen möchten.

Beispielsweise:

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öflichkeit

H REF : Ist ein REF erenz zu Informationen für die aktuelle Seite info dh CSS für den Seitenstil oder einen Link zu einer anderen Seite. Das Parsen von Seiten wird nicht gestoppt.

SRC : Ist eine Quelle , die der Seite wie in Bildern oder Javascript hinzugefügt / geladen werden soll. Das Parsen von Seiten wird möglicherweise abhängig vom codierten Attribut beendet. Aus diesem Grund ist es besser, ein Skript kurz vor dem End-Body-Tag hinzuzufügen, damit das Rendern der Seite nicht beeinträchtigt wird.

Wenn Sie über HTML4 sprechen, hilft Ihnen die Liste der Attribute möglicherweise bei den Feinheiten. Sie sind nicht austauschbar.

Von W3:

Wenn das href-Attribut des A-Elements festgelegt ist, definiert das Element einen Quellanker für einen Link, der vom Benutzer zum Abrufen einer Webressource aktiviert werden kann. Der Quellanker ist der Speicherort der A-Instanz und der Zielanker ist die Webressource.

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

Dieses Attribut gibt den Speicherort der Bildressource an. Beispiele für allgemein anerkannte Bildformate sind GIF, JPEG und PNG.

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

Eine einfache Definition

• SRC: Wenn eine Ressource innerhalb des Body-Tags platziert werden kann (für Bild, Skript, Iframe, Frame)
• HREF: Wenn eine Ressource nicht innerhalb des Body-Tags platziert und nur verknüpft werden kann (für HTML, CSS)

Sie sollten sich daran erinnern, wann Sie alle verwenden sollen, und das heißt,
die href wird mit Links verwendet

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

Der src wird mit Skripten und Bildern verwendet

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

Die URL wird im Allgemeinen in CSS verwendet, um etwas einzuschließen, beispielsweise um ein Hintergrundbild hinzuzufügen

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

nach Durchlaufen der HTML 5.1-Dokumentation (1. November 2016):

Teil 4 (Die Elemente von HTML)

Kapitel 2 (Dokumentmetadaten)

In Abschnitt 4 (Das Verknüpfungselement) heißt es:

Das Ziel der Links wird durch das hrefAttribut angegeben, das vorhanden sein muss und eine gültige nicht leere URL enthalten muss, die möglicherweise von Leerzeichen umgeben ist. Wenn das hrefAttribut fehlt, definiert das Element keinen Link.

enthält nicht das srcAttribut ...

Hexe ist logisch, weil es eine Verbindung ist.

Kapitel 12 (Skripterstellung)

In Abschnitt 1 (Das Skriptelement) heißt es:

Klassische Skripte können entweder inline eingebettet oder mithilfe des srcAttributs aus einer externen Datei importiert werden. Wenn angegeben, wird die URL der zu verwendenden externen Skriptressource angegeben. Wenn srcangegeben, muss es sich um eine gültige nicht leere URL handeln, die möglicherweise von Leerzeichen umgeben ist. Der Inhalt von Inline-Skriptelementen oder der externen Skriptressource muss den Anforderungen der Skriptproduktion der JavaScript-Spezifikation für klassische Skripte entsprechen.

es erwähnt nicht einmal das hrefAttribut ...

Dies zeigt an, dass bei der Verwendung von Skript-Tags immer das srcAttribut verwendet wird !!!

Kapitel 7 (Eingebetteter Inhalt)

Abschnitt 5 (Das img-Element)

Das durch die Attribute und gegebene Bild srcund die srcsetAttribute aller vorherigen Geschwisterquellelemente srcset, wenn das übergeordnete pictureElement ein Element ist, sind der eingebettete Inhalt.

erwähnt auch nicht das hrefAttribut ...

Dies zeigt an, dass bei Verwendung von imgTags auch das srcAttribut verwendet werden sollte ...

Referenzlink zur W3C-Empfehlung

Sie sind nicht austauschbar - jedes ist auf verschiedenen Elementen definiert, wie hier zu sehen ist .

Sie haben in der Tat ähnliche Bedeutungen, daher ist dies eine Inkonsistenz. Ich würde hauptsächlich aufgrund der unterschiedlichen Tags annehmen, die zunächst von verschiedenen Anbietern implementiert und dann in die Spezifikation aufgenommen wurden, um eine Unterbrechung der Abwärtskompatibilität zu vermeiden.

Sie haben keine ähnlichen Bedeutungen. 'src' gibt eine Ressource an, die der Browser als Teil der aktuellen Seite abrufen soll. HREF gibt eine Ressource an, die abgerufen werden soll, wenn der Benutzer dies anfordert.

Ich stimme zu, was Apnerve über die Unterscheidung sagt. Aber im Falle von CSS sieht es seltsam aus. Da CSS auch per Browser auf den Client heruntergeladen wird. Es ist nicht wie ein Ankertag, der auf eine bestimmte Ressource verweist. Die Verwendung von href erscheint mir also seltsam. Selbst wenn es nicht mit der Seite geladen ist, die noch nicht ohne diese Seite ist, kann es nicht vollständig aussehen, und daher ist es nicht nur eine Beziehung, sondern eine ähnliche Ressource, die sich wiederum auf viele andere Ressourcen wie Bilder bezieht.

src wird verwendet, um diese Ressource zur Seite hinzuzufügen, während href verwendet wird, um eine Verknüpfung zu einer bestimmten Ressource von dieser Seite herzustellen.

Wenn Sie auf Ihrer Webseite verwenden, erkennt der Browser, dass es sich um ein Stylesheet handelt, und fährt daher mit dem Rendern der Seite fort, wenn das Stylesheet parallel heruntergeladen wird.

Wenn Sie auf Ihrer Webseite verwenden, wird der Browser angewiesen, die Ressource am Speicherort einzufügen. Jetzt muss der Browser die js-Datei abrufen und dann laden. Bis der Browser den Ladevorgang beendet hat, wird der Seitenwiedergabevorgang angehalten. Aus diesem Grund empfiehlt YUI, Ihre JS-Dateien ganz unten auf Ihrer Webseite zu laden.