HTML-Verknüpfungen

HTML verknüpft Dokumente mit anderen Dokumenten im Netzwerk.

Links finden Sie fast auf allen Webseiten. Durch Klicken auf einen Link können Sie von einer Seite zur anderen springen.

Beispiel

Erstellen Sie Hyperlinks
Dieses Beispiel zeigt, wie man in einem HTML-Dokument Links erstellt.
Bild als Link verwenden
Dieses Beispiel zeigt, wie man ein Bild als Link verwendet.

(Mehr Beispiele finden Sie am unteren Ende dieser Seite.)

HTML Hyperlinks (Links)

Ein Hyperlink kann ein Wort, ein Wort oder eine Gruppe von Worten sein, aber auch ein Bild. Sie können auf diese Inhalte klicken, um zu einem neuen Dokument oder einem bestimmten Teil des aktuellen Dokuments zu springen.

Wenn Sie den Mauszeiger auf einen Link auf der Webseite bewegen, wird der Pfeil zu einer kleinen Hand.

Wir erstellen Links, indem wir den <a>-Tag in HTML verwenden.

Es gibt zwei Möglichkeiten, den <a>-Tag zu verwenden:

  1. Durch die Verwendung des href-Attributs - Erstellen von Links zu anderen Dokumenten
  2. Durch die Verwendung des name-Attributs - Erstellen von Dokumenteninternen Lesezeichen

Weiterführende Lektüre:Was ist HyperTEXT?

HTML-Links Syntax

Der HTML-Code für Links ist einfach. Er ähnelt dem folgenden:

<a href="url">Linktext</a>

Das href-Attribut legt das Ziel des Links fest.

Der Text zwischen dem Start- und End-Tag wird als Hyperlink angezeigt.

Beispiel

<a href="http://www.codew3c.com/"">Besuchen Sie CodeW3C.com</a>

Der obige Code wird so angezeigt:Besuchen Sie CodeW3C.com

Durch Klicken auf diesen Hyperlink wird der Benutzer zur Startseite von CodeW3C.com geleitet.

Tipp:"Linktext" muss nicht unbedingt Text sein. Bilder oder andere HTML-Elemente können ebenfalls Links sein.

HTML-Links - target-Attribut

Mit dem Target-Attribut können Sie bestimmen, wo das verlinkte Dokument angezeigt wird.

Diese Zeile öffnet das Dokument in einem neuen Fenster:

<a href="http://www.codew3c.com/" target="_blank">Besuchen Sie CodeW3C.com!</a>

Probieren Sie es selbst aus

HTML-Links - name-Attribut

Das name-Attribut legt den Namen eines Ankers fest.

Sie können einen Lesezeichen im HTML-Dokument mit dem name-Attribut erstellen.

Lesezeichen werden in keiner speziellen Weise angezeigt und sind für den Leser unsichtbar.

Bei der Verwendung von benannten Anker können wir Links erstellen, die direkt zu diesem benannten Anker (z.B. zu einem Abschnitt der Seite) führen, so dass der Benutzer nicht ständig durch die Seite scrollen muss, um die benötigten Informationen zu finden.

Syntax für benannte Anker:

<a name="label">Anker (Text, der auf der Seite angezeigt wird)</a>

Tipp:Der Name eines Ankers kann alles sein, was Sie möchten.

Tipp:Sie können die id-Attribut anstelle des name-Attributs verwenden, um einen Anker zu benennen, und das funktioniert ebenfalls.

Beispiel

Zunächst benennen wir im HTML-Dokument den Anker (erstellen einen Lesezeichen):

<a name="tips">Grundlegende Tipps - Nützliche Tipps</a>

Dann erstellen wir im gleichen Dokument einen Link, der auf diesen Anker verweist:

<a href="#tips">Nützliche Tipps</a>

Sie können auch auf anderen Seiten Links erstellen, die auf diesen Anker verweisen:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Nützliche Tipps</a>

In den obigen Code haben wir das #-Zeichen und den Ankername am Ende der URL hinzugefügt, um direkt auf den Anker "tips" zu verlinken.

Spezifische Wirkung:Nützliche Tipps

Grundlegende Hinweise - Nützliche Tipps:

Anmerkung:Füge stets einen Slash (/) zur Untermappe hinzu. Falls du so einen Link schreibst: href="http://www.codew3c.com/html", wird dem Server eine doppelte HTTP-Anfrage erzeugt. Dies liegt daran, dass der Server einen Slash zu dieser Adresse hinzufügt und eine neue Anfrage erstellt, wie folgt: href="http://www.codew3c.com/html/".

Tipp:Benannte Anker werden oft verwendet, um in der Anfangsposition großer Dokumente Verzeichnisse zu erstellen. Man kann jedem Kapitel einen benannten Anker zuweisen und die Links zu diesen Anker in der oberen Dokumentposition platzieren. Wenn du häufig die Baidu-Bibliothek besuchst, wirst du feststellen, dass fast jeder Eintrag eine solche Navigation verwendet.

Tipp:Falls der Browser keine definierten benannten Anker findet, wird er zum Anfang des Dokuments navigieren. Es wird kein Fehler auftreten.

Mehr Beispiele

Öffne Links in einem neuen Browserfenster
Dieses Beispiel zeigt, wie man eine Seite in einem neuen Browserfenster öffnet, sodass der Besucher deine Seite nicht verlassen muss.
Verlinke zu verschiedenen Positionen auf der selben Seite
Dieses Beispiel zeigt, wie man mit Links zu einem anderen Teil des Dokuments springt
Raus aus dem Rahmen
Dieses Beispiel zeigt, wie man aus einem Rahmen ausbricht, falls deine Seite in einem Rahmen fixiert ist.
Erstelle einen E-Mail-Link
Dieses Beispiel zeigt, wie man auf eine E-Mail verlinkt. (Dieses Beispiel funktioniert nur, wenn ein E-Mail-Client installiert ist.)
Erstelle einen E-Mail-Link 2
Dieses Beispiel zeigt einen komplexeren E-Mail-Link.

HTML-Verweis-Tag

Tag Beschreibung
<a> Definiere einen Anker.