HTML
Anker und Hyperlinks

Einführung

Syntax

• <a href="URL or anchor">Link Text</a>

Parameter

Link zu einer anderen Site

Dies ist die grundlegende Verwendung des Elements <a> ( ein nchor-Element) :

<a href="http://example.com/">Link to example.com</a>

Es erstellt einen Hyperlink zur URL http://example.com/ wie durch das Attribut href (Hypertextreferenz) angegeben, mit dem Ankertext "Link to example.com". Es würde ungefähr so ​​aussehen:

Link zu example.com

Um anzugeben, dass dieser Link zu einer externen Website führt, können Sie den Typ des external Links verwenden:

<a href="http://example.com/" rel="external">example site</a>

Sie können eine Verbindung zu einer Site herstellen, die ein anderes Protokoll als HTTP verwendet. Um beispielsweise eine Verbindung zu einer FTP-Site herzustellen, können Sie Folgendes tun:

<a href="ftp://example.com/">This could be a link to a FTP site</a>

In diesem Fall besteht der Unterschied darin, dass dieses Ankertag fordert, dass der Browser des Benutzers eine Verbindung zu example.com über das File Transfer Protocol (FTP) anstelle des Hypertext Transfer Protocol (HTTP) herstellt.

Dies könnte ein Link zu einer FTP-Site sein

Link in neuem Tab / Fenster öffnen

<a href="example.com" target="_blank">Text Here</a>

Das target gibt an, wo die Verknüpfung geöffnet werden soll. Durch die Einstellung auf _blank Sie den Browser an, ihn in einer neuen Registerkarte oder einem neuen Fenster zu öffnen (je nach Präferenz des Benutzers).

SICHERHEIT VULNERABILITY WARNUNG!

Wenn Sie target="_blank" erhält die öffnende Site über JavaScript teilweise Zugriff auf das window.opener Objekt. window.opener Seite kann dann auf die window.opener.location Ihrer Seite zugreifen und diese ändern und möglicherweise Benutzer auf Malware- oder Phishing-Sites umleiten.

Wenn Sie dies für Seiten verwenden, die Sie nicht steuern, fügen rel="noopener" Ihrem Link rel="noopener" , um zu verhindern, dass das window.opener Objekt mit der Anforderung gesendet wird.

Derzeit unterstützt Firefox noopener , daher müssen Sie rel="noopener noreferrer" um einen maximalen Effekt zu erzielen.

Link zu einem Anker

Anker können verwendet werden, um zu bestimmten Tags auf einer HTML-Seite zu springen. Das <a> -Tag kann auf jedes Element zeigen, das ein id Attribut hat. Weitere Informationen zu IDs finden Sie in der Dokumentation zu Klassen und IDs . Anker werden meistens verwendet, um zu einem Unterabschnitt einer Seite zu springen, und werden in Verbindung mit Header-Tags verwendet.

Angenommen, Sie haben eine Seite ( page1.html ) zu vielen Themen erstellt:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

Wenn Sie mehrere Abschnitte haben, möchten Sie möglicherweise oben auf der Seite ein Inhaltsverzeichnis mit Quicklinks (oder Lesezeichen) zu bestimmten Abschnitten erstellen.

Wenn Sie Ihren Themen ein id Attribut zugewiesen haben, können Sie sie mit diesen verknüpfen

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Jetzt können Sie den Anker in Ihrem Inhaltsverzeichnis verwenden:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Diese Anker sind auch mit der Webseite verbunden, auf der sie sich befinden ( page1.html ). Sie können also von einer Seite zur anderen über die Site verweisen, indem Sie auf den Namen der Seite und des Ankers verweisen.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Link, auf dem JavaScript ausgeführt wird

Verwenden Sie einfach das Protokoll javascript: :, um den Text als JavaScript auszuführen, anstatt ihn als normalen Link zu öffnen:

<a href="javascript:myFunction();">Run Code</a>

Sie können dasselbe auch mit dem Attribut onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

Die return false; ist erforderlich, um zu verhindern, dass Ihre Seite nach oben scrollen kann, wenn auf den Link zu # geklickt wird. Stellen Sie sicher, dass Sie den gesamten Code einschließen, den Sie zuvor ausführen möchten, da durch die Rückgabe die Ausführung des weiteren Codes beendet wird.

Bemerkenswert ist auch, dass Sie ein Ausrufezeichen einfügen können ! nach dem Hashtag, um zu verhindern, dass die Seite nach oben scrollen kann. Dies funktioniert, weil bei einem ungültigen Slug der Link nirgendwo auf der Seite verschoben werden kann , da er das Element, auf das er verweist, nicht finden konnte (ein Element mit id="!" ). Sie können auch nur einen ungültigen Slug (wie #scrollsNowhere ) verwenden, um denselben Effekt zu erzielen. In diesem Fall return false; ist nicht nötig:

<a href="#!" onclick="myFunction();">Run Code</a>

Sollten Sie etwas davon verwenden?

Die Antwort lautet fast sicher nein . Das Ausführen von JavaScript inline mit diesem Element ist eine ziemlich schlechte Praxis. Verwenden Sie reine JavaScript-Lösungen, die das Element auf der Seite suchen und stattdessen eine Funktion daran binden. Auf eine Veranstaltung hören

Überlegen Sie auch, ob es sich bei diesem Element wirklich um einen Button anstatt um einen Link handelt . Wenn ja, sollten Sie <button> .

Link zu einer Seite auf derselben Site

Sie können einen relativen Pfad verwenden , um auf Seiten derselben Website zu verlinken.

<a href="/example">Text Here</a>

Das obige Beispiel würde in die Datei geht example im Stammverzeichnis ( / ) des Servers.

Wenn sich dieser Link auf http://example.com befindet , können die folgenden beiden Links den Benutzer an denselben Speicherort bringen

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Beide oben gehen würden , um die page Datei im Stammverzeichnis von example.com .

Link, auf dem der E-Mail-Client ausgeführt wird

Grundlegende Verwendung

Wenn der Wert des href Attributs mit mailto: beginnt mailto: Es wird versucht, einen E-Mail-Client beim Klicken zu öffnen:

<a href="mailto:[email protected]">Send email</a>

Dadurch wird die E-Mail-Adresse [email protected] als Empfänger für die neu erstellte E-Mail angegeben.

Cc und Bcc

Sie können auch Adressen für cc- oder bcc-Empfänger mit der folgenden Syntax hinzufügen:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Betreff und Haupttext

Sie können auch den Betreff und den Nachrichtentext für die neue E-Mail eingeben:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Diese Werte müssen URL-kodiert sein .

Durch Klicken auf einen Link mit mailto: wird versucht, den von Ihrem Betriebssystem angegebenen Standard-E-Mail-Client zu öffnen, oder Sie werden gefragt, welchen Client Sie verwenden möchten. Nicht alle Optionen, die nach der Empfängeradresse angegeben sind, werden in allen E-Mail-Clients unterstützt.

Link, der eine Nummer wählt

Wenn der Wert des href Attributs mit tel: beginnt, wählt das Gerät die Nummer, wenn Sie darauf klicken. Dies funktioniert auf mobilen Geräten oder auf Computern / Tablets, auf denen Software - wie Skype oder FaceTime - ausgeführt wird, die telefonieren kann.

<a href="tel:11234567890">Call us</a>

Die meisten Geräte und Programme fordern den Benutzer auf, die zu wählende Nummer zu bestätigen.