HTML Link

HTML-Link (Anker) ist der Kernbestandteil der Navigation von Webseiten.

HTML verwendet Links, um eine Verbindung zu einem anderen Dokument im Web herzustellen.

HTML-Links sind Elemente, die zur Navigation innerhalb verschiedener Webseiten verwendet werden.

Links werden typischerweise verwendet, um eine Webseite mit einer anderen Webseite oder Ressource (wie einem Dokument, Bild, einer Audiodatei usw.) zu verknüpfen.

Links ermöglichen es Benutzern, durch Klicken auf Text oder Bilder beim Surfen im Web zu anderen Orten im Web zu springen, wodurch die Vernetzung von Webseiten erreicht wird.

HTML-Link wird durch den<a>Tag erstellt und wird normalerweise verwendet, um Benutzer zu einer anderen Seite zu navigieren, zu einem anderen Teil der Seite zu springen, Dateien herunterzuladen, E-Mail-Anwendungen zu öffnen oder JavaScript-Funktionen auszuführen.

Grundlegende Syntax

<a href="URL.html">链接文本</a>
  • <a>Tag: Definiert einen Hyperlink (Anker). Es ist das Haupt-Tag in HTML, das zum Erstellen anklickbarer Links verwendet wird.
  • hrefAttribut: Gibt die Ziel-URL an, wenn auf den Link geklickt wird, zu der der Browser navigiert.

Nachfolgend ist ein Beispiel, wie man einen Link in einem HTML-Dokument erstellt:

Beispiel

<a href="/index.html">Dieser Text</a>ist ein Link zu einer Seite auf der Website.</p>

<p><a href="https://www.microsoft.com/">Dieser Text</a>ist ein Link zu einer Seite im World Wide Web.</p>

Ausprobieren »

HTML-Hyperlink (Link)

HTML verwendet das Tag<a>, um Hyperlinks festzulegen.

Hyperlinks können ein Wort, eine Phrase oder eine Wortgruppe oder ein Bild sein; Sie können auf diese Inhalte klicken, um zu einem neuen Dokument oder zu einem Teil des aktuellen Dokuments zu springen.

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

Im Tag<a>wird das Attribut verwendet, um die Adresse des Links zu beschreiben.hrefStandardmäßig werden Links im Browser wie folgt angezeigt:

Nicht besuchter Link: Wird in blauer Schrift mit Unterstreichung angezeigt.

  • Besuchter Link: Wird violett mit Unterstreichung angezeigt.
  • Wenn Sie auf einen Link klicken, wird er rot mit Unterstreichung angezeigt.
  • Hinweis: Wenn CSS-Stile für diese Hyperlinks festgelegt sind, werden die Anzeigestile gemäß den CSS-Einstellungen dargestellt.

HTML-Link-Attribut

HTML-Link-Attribut

1. href: Definiert das Ziel des Links.

1. href: Definiert das Ziel des Links.

Beispiel

Beispiel

<a href="https://www.example.com">2. target: Definiert den Öffnungsmodus des Links.</a>

2. target: Definiert den Öffnungsmodus des Links.

  • _blank: Öffnet den Link im aktuellen Fenster oder Tab (Standard).
  • _self: Öffnet den Link im übergeordneten Frame.
  • _parent: Öffnet den Link im gesamten Fenster und hebt alle Frames auf.
  • _top: Öffnet den Link, ohne einen Referer-Header zu senden (d. h., der Zielwebsite nicht zu verraten, woher du gekommen bist).

Beispiel

<a href="https://www.example.com" target="_blank" rel="noopener">Beispiel in einem neuen Fenster öffnen</a>

3. rel: Definiert die Beziehung zwischen dem Link und der Zielseite.

nofollow: Gibt an, dass Suchmaschinen diesen Link nicht verfolgen sollen; wird oft für externe Links verwendet.

noopenerundnoreferrer: Verhindert Sicherheitsprobleme beim Öffnen des Links in einem neuen Tab, insbesondere bei Verwendung vontarget="_blank": Verhindert den Zugriff des neuen Browsing-Kontexts (der Seite) auf

  • noopener: Eigenschaften undwindow.opener: Keinen Referer-Header senden (d. h., der Zielwebsite nicht mitzuteilen, woher du gekommen bist).open: Verwenden
  • noreferrer: Beispiel:
  • noopener noreferrer4. download: Versucht, das Ziel des Links herunterzuladen, anstatt dorthin zu navigieren.noopenerundnoreferrerWenn ein Dateiname angegeben ist, fordert der Browser dazu auf, die Datei herunterzuladen und unter dem angegebenen Dateinamen zu speichern.<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

Beispiel

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Datei herunterladen</a>

4. download: Versucht, das Ziel des Links herunterzuladen, anstatt dorthin zu navigieren.

Beispiel

"Beispiel-Website aufrufen"

Beispiel

<a href="file.pdf" download="example.pdf">Beispiel</a>

5. title: Definiert zusätzliche Informationen für den Link, die als Tooltip angezeigt werden, wenn man mit der Maus über den Link fährt.

Beispiel

<a href="https://www.example.com" title=Dies ist der erste Teil>7. hreflang: Gibt die Sprache der Ziel-URL an</a>

6. id: Wird verwendet, um Ankerpunkte für Links zu erstellen, typischerweise um zu einer bestimmten Position auf derselben Seite zu springen.

Beispiel

8. type: Gibt den MIME-Typ der verlinkten Ressource an
<a href="#section1">Beispiel</a>
<div id="section1">Stylesheet</div>

7. hreflang: Gibt die Sprache der Ziel-URL an

Beispiel

<a href="https://www.example.com/es" hreflang="es">Externer Link</a>

8. type: Gibt den MIME-Typ der verlinkten Ressource an

Beispiel

<a href="style.css" type="text/css">Roter Link</a>

9. class: Wird verwendet, um den Klassennamen (CSS-definiert) für ein Element anzugeben

Beispiel

<a href="https://www.example.com" class="external-link">Access-Tutorial</a>

10. style: Definiert CSS-Stile direkt auf einem Element

Beispiel

<a href="https://www.example.com" style="color: red;">"Linktext"</a>

Beispiel

<a href="../index.html">访问Example</a>

Textlink:Der häufigste Linktyp ist der Textlink, bei dem das <a>-Element verwendet wird, um einen Text in einen anklickbaren Link umzuwandeln, zum Beispiel:

Bildlink:

Sie können auch Bilder als Links verwenden. In diesem Fall umschließt das <a>-Element das <img>-Element. Zum Beispiel: Ankerpunktlink:Zusätzlich zum Verlinken auf andere Webseiten können Sie interne Links innerhalb derselben Seite erstellen, was als Ankerpunktlinks bezeichnet wird. Um Ankerpunktlinks zu erstellen, müssen Sie an der Zielposition mithilfe des <a>-Elements eine Markierung definieren und dann von einer anderen Seite aus einen Link zum Abschnitt "nützliche Tipps" (id="tips") erstellen:

Leerer LinkNachfolgend finden Sie einige gängige Methoden zum Einrichten leerer Links sowie deren Unterschiede:

<a href="https://www.example.com">访问示例网站</a>

MethodeSie können auch Bilder als Links verwenden. In diesem Fall umschließt das <a>-Element das <img>-Element. Zum Beispiel:

<a href="https://www.example.com">
  <img src="example.jpg.html" alt="示例图片">
</a>

Ankerlinks:Zusätzlich zum Verlinken auf andere Webseiten können Sie interne Links innerhalb derselben Seite erstellen, was als Ankerlinks bezeichnet wird. Um Ankerlinks zu erstellen, müssen Sie an der Zielposition mithilfe des <a>-Elements eine Markierung definieren und sie mit dem #-Symbol referenzieren. Zum Beispiel:

<a href="../index.html">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

Download-Links:Wenn der Link zum Herunterladen von Dateien verwendet werden soll, anstatt zu einer anderen Webseite zu navigieren, können Sie das download-Attribut verwenden. Zum Beispiel:

<a href="document.pdf.html" download>下载文档</a>

HTML-Link - target-Attribut

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

Die folgende Zeile öffnet das Dokument in einem neuen Fenster:

Beispiel

<a href="https://www.example.com/" target="_blank" rel="noopener noreferrer">Besuchen Sie das Beispiel!</a>

Ausprobieren »

HTML-Link - id-Attribut

Das id-Attribut kann verwendet werden, um ein Lesezeichen für ein HTML-Dokument zu erstellen.

Hinweis:Lesezeichen werden nicht auf besondere Weise angezeigt, d. h. sie sind auf der HTML-Seite nicht sichtbar, für den Leser sind sie also verborgen.

Beispiel

In HTML-Dokumenten eine ID einfügen:

<a id="tips">有用的提示部分</a>

In HTML-Dokumenten einen Link zu „nützliche Tipps“ (id="tips") erstellen:

<a href="../index.html">访问有用的提示部分</a>

Oder erstellen Sie von einer anderen Seite aus einen Link zu „nützliche Tipps“ (id="tips"):

<a href="../html/html-links.html">
访问有用的提示部分</a>

Leerer Link

Hier sind einige gängige Möglichkeiten, leere Links einzurichten, und ihre Unterschiede:

MethodeFunktionalitätErfolgt eine Weiterleitung?Anwendbarkeit auf Szenarien
href="../index.html"Zum Seitenanfang navigierenJaPlatzhalter, fängt Klickereignis ab
href="#"Verhindert das Standardverhalten, aktualisiert die Seite nichtneinVerhindert das Springen, kombiniert mit JS-Nutzung
href=""Aktuelle Seite aktualisierenJaSeitenaktualisierung erforderlich
href="blank.html"Leere Seite öffnenJaEin neues Fenster öffnen, um eine leere Seite zu öffnen
role="button"Link als Schaltfläche, kein StandardverhaltenneinMit JS kombiniert, um Button-Funktionalität umzusetzen, kein Sprung

Grundlegende Vorsichtsmaßnahmen - nützliche Tipps

Kommentare:Fügen Sie bei Unterverzeichnissen immer einen Schrägstrich hinzu. Wenn Sie einen Link wie href="../html.html" schreiben, werden zwei HTTP-Anfragen an den Server erzeugt, da der Server dieser Adresse einen Schrägstrich hinzufügt und dann eine neue Anfrage erstellt, wie folgt: href="../html/index.html".

Examples

Weitere Beispiele

Bildlink
Wie man Bildlinks verwendet

Link zu einer angegebenen Position auf der aktuellen Seite
Wie man Lesezeichen verwendet

Aus dem Frame springen
Dieses Beispiel zeigt, wie man aus dem Frame springt, wenn Ihre Seite innerhalb des Frames fixiert ist.

Einen E-Mail-Link erstellen
Dieses Beispiel zeigt, wie man auf eine E-Mail verlinkt. (Dieses Beispiel funktioniert nur, nachdem ein E-Mail-Client-Programm installiert wurde.)

E-Mail-Link erstellen 2
Dieses Beispiel demonstriert einen komplexeren E-Mail-Link.

HTML-Link-Tag

TagBeschreibung
<a>Einen Hyperlink definieren
Weitere Erweiterungen