Das mit Beispielen erläuterte HTML-Attribut a href

Das Attribut bezieht sich auf ein Ziel, das von einem Link bereitgestellt wird. Das a(Anker-) Tag ist ohne das Attribut tot .

Verwendung des Tags

Manchmal möchten Sie in Ihrem Workflow keinen Live-Link oder kennen das Link-Ziel noch nicht. In diesem Fall ist es nützlich, das hrefAttribut festzulegen "#", um einen toten Link zu erstellen.

Das hrefAttribut kann verwendet werden, um eine Verknüpfung zu lokalen Dateien oder Dateien im Internet herzustellen.

Zum Beispiel:

  Href Attribute Example   

Href Attribute Example

The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

Das Attribut wird von allen Browsern unterstützt.

Weitere HTML-Attribute:

hreflang : Gibt die Sprache der verknüpften Ressource an.

target : Gibt den Kontext an, in dem die verknüpfte Ressource geöffnet wird.

title : Definiert den Titel eines Links, der dem Benutzer als Tooltip angezeigt wird.

Beispiele

This is a dead link This is a live link to freeCodeCamp more with a href attribute

In-Page-Anker

Es ist auch möglich, einen Anker an einer bestimmten Stelle der Seite zu setzen. Um dies zu tun, sollten Sie zuerst eine Registerkarte an der Stelle auf der Seite mit dem Tag und dem erforderlichen Attribut "Name" mit einer beliebigen Schlüsselwortbeschreibung wie folgt platzieren:

Eine Beschreibung zwischen Tags ist nicht erforderlich. Danach können Sie an jeder Stelle auf derselben Seite einen Link zu diesem Anker platzieren. Verwenden Sie dazu das Tag mit dem erforderlichen Attribut "href" mit dem Symbol # (scharf) und der Schlüsselwortbeschreibung des Ankers wie folgt:

Go to Top

Bild-Links

Das kann auch auf Bilder und andere HTML-Elemente angewendet werden.

Beispiel

Einige weitere Beispiele für href

This gives a base url for all further urls on the page This is a live link to an external stylesheet

Was können Sie sonst noch tun?

Mehr Anpassung! Sehen wir uns einen bestimmten Anwendungsfall an:

Ein Mailto-Link ist eine Art Hyperlink ( ) mit speziellen Parametern, mit denen Sie zusätzliche Empfänger, eine Betreffzeile und / oder einen Textkörper angeben können.

Die grundlegende Syntax mit einem Empfänger lautet:

Some text

Hinzufügen eines Betreffs zu dieser E-Mail:

Wenn Sie dieser E-Mail einen bestimmten Betreff hinzufügen möchten, müssen Sie ihn sorgfältig hinzufügen, %20oder +überall in der Betreffzeile befindet sich ein Leerzeichen. Eine einfache Möglichkeit, um sicherzustellen, dass es richtig formatiert ist, ist die Verwendung eines URL-Decoders / Encoders.

Körpertext hinzufügen:

Ebenso können Sie im Hauptteil der E-Mail eine bestimmte Nachricht hinzufügen: Auch hier müssen Leerzeichen durch %20oder ersetzt werden +. Nach dem Subjektparameter muss vor jedem zusätzlichen Parameter ein Parameter stehen&

Beispiel: Angenommen, Sie möchten, dass Benutzer ihren Freunden eine E-Mail über ihre Fortschritte im Free Code Camp senden:

Adresse: leer

Betreff: Tolle Neuigkeiten

Körper: Ich werde Entwickler

Ihr HTML-Link jetzt:

Send mail!

Hier haben wir mailto leer gelassen (mailto:?). Dadurch wird der E-Mail-Client des Benutzers geöffnet und der Benutzer fügt die Empfängeradresse selbst hinzu.

Hinzufügen weiterer Empfänger:

Auf die gleiche Weise können Sie CC- und bcc-Parameter hinzufügen. Trennen Sie jede Adresse durch ein Komma!

Zusätzliche Parameter müssen vorangestellt werden &.

Send mail!

Mehr Informationen:

MDN - E-Mail-Links