Suche…


Einführung

Ankertags werden im Allgemeinen zum Verknüpfen separater Webseiten verwendet. Sie können jedoch auch zum Verknüpfen zwischen verschiedenen Stellen in einem einzelnen Dokument verwendet werden, häufig im Inhaltsverzeichnis oder sogar zum Starten externer Anwendungen. In diesem Thema wird die Implementierung und Anwendung von HTML-Ankertags in verschiedenen Rollen erläutert.

Syntax

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

Parameter

Parameter Einzelheiten
href Gibt die Zieladresse an. Dies kann eine absolute oder relative URL oder der name eines Ankers sein. Eine absolute URL ist die vollständige URL einer Website wie http://example.com/ . Eine relative URL verweist auf ein anderes Verzeichnis und / oder Dokument in derselben Website, z. B. /about-us/ verweist auf das Verzeichnis "about-us" im Stammverzeichnis ( / ). Wenn Sie auf ein anderes Verzeichnis zeigen, ohne das Dokument explizit anzugeben, geben Webserver normalerweise das Dokument "index.html" in diesem Verzeichnis zurück.
hreflang Gibt die Sprache der Ressource an, die mit dem Attribut href verknüpft ist (die bei diesem Attribut vorhanden sein muss). Verwenden Sie Sprachwerte aus BCP 47 für HTML5 und RFC 1766 für HTML 4.
rel Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an. Für HTML5 müssen die Werte in der Spezifikation definiert oder im Microformats-Wiki registriert sein .
target Gibt an, wo der Link geöffnet werden soll, z. B. in einem neuen Tab oder Fenster. Mögliche Werte sind _blank , _self , _parent , _top und framename (veraltet). Das Erzwingen eines solchen Verhaltens wird nicht empfohlen, da dadurch die Kontrolle des Benutzers über eine Website verletzt wird.
title Gibt zusätzliche Informationen zu einer Verknüpfung an. Die Informationen werden meistens als QuickInfo-Text angezeigt, wenn der Cursor über den Link bewegt wird. Dieses Attribut ist nicht auf Links beschränkt, sondern kann für fast alle HTML-Tags verwendet werden.
download Gibt an, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt. Der Wert des Attributs ist der Name der heruntergeladenen Datei. Es gibt keine Einschränkungen für die zulässigen Werte, und der Browser erkennt automatisch die richtige Dateierweiterung und fügt sie der Datei hinzu (.img, .pdf usw.). Wenn der Wert nicht angegeben wird, wird der ursprüngliche Dateiname verwendet.

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

<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.

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> .

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.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow