Tutorial zur Verwendung des Hyperlink-Tags in HTML

Tutorial zur Verwendung des Hyperlink-Tags in HTML

Die verschiedenen HTML-Dokumente der Website sind durch Hyperlinks miteinander verbunden und bilden so eine zusammenhängende Website. Benutzer können auf einen Hyperlink klicken, um zu der Seite zu springen, die sie durchsuchen möchten. Daher sind Hyperlinks auf jeder Website zu sehen und stellen die Kernkomponente dar, die die Websites zu einem Ganzen verbindet.

Platzierung der Ankerpunkte
HTML-Hyperlinks werden durch das <a>-Tag als Anker ausgelöst. Der Anker muss einen Träger haben, der ein Text, ein Wort oder ein Satz oder ein Bild oder eine Form sein kann. Wenn die Maus zu einem Träger mit einem Ankerpunkt bewegt wird, verwandelt sich die Maus in eine kleine Hand, um anzuzeigen, dass der Benutzer klicken kann. Nachdem der Benutzer auf den Ankerpunkt geklickt hat, springt er zu der Adresse, die dem href im <a>-Tag entspricht.

Verwendung des Sprungattributs
In HTML-Links kann das href-Attribut verwendet werden, um einen Link zu einem anderen Dokument zu erstellen. Dies wird normalerweise für Seitensprünge verwendet. Das kommt sehr häufig vor, deshalb werde ich nicht näher darauf eingehen.
Verwenden Sie das Namensattribut, um ein Lesezeichen in einem Dokument zu erstellen, sodass der Hyperlink zu einem bestimmten Teil der Seite innerhalb des Dokuments springen kann. Beispiel: Durch die Einstellung <a name=”dian1″></a> wird es in der Mitte der Seite platziert. Setzen Sie dann den Ankerpunkt <a href=”#dian1″>Zur Seitenmitte springen</a> im Seitenkopf. Wenn der Benutzer auf diesen Ankerpunkt im Seitenkopf klickt, wird die Seite gescrollt und springt an die Stelle des Namenslesezeichens, also in die Seitenmitte.

HTML-Link-Syntax
Der HTML-Linkcode ist sehr einfach zu verwenden. Zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <   href =" url " > Ankerlink </a>   

Über das href-Attribut wird das Sprungziel festgelegt und der Text zwischen dem Start-Tag und dem End-Tag als Hyperlink dargestellt.


Das Zielattribut eines HTML-Links
Über das Target-Attribut lässt sich einstellen, wie die Seite nach einem Klick auf den Ankertext geöffnet wird. Es gibt vier reservierte Zielnamen zur Verwendung als spezielle Dokumentumleitungsaktionen:
_leer
Der Browser lädt das Zieldokument immer in einem neu geöffneten, unbenannten Fenster.
_selbst
Dieser Zielwert ist das Standardziel für alle <a>-Tags, die kein Ziel angeben, was dazu führt, dass das Zieldokument geladen und im selben Frame oder Fenster angezeigt wird wie das Quelldokument. Dieses Ziel ist redundant und unnötig, sofern es nicht zusammen mit dem Zielattribut im <base>-Tag des Dokumentkopfs verwendet wird.
_Elternteil
Dieses Ziel bewirkt, dass das Dokument in das übergeordnete Fenster oder Frameset geladen wird, das den durch den Hyperlink referenzierten Frame enthält. Befindet sich diese Referenz in einem Fenster oder einem Frame der obersten Ebene, ist sie gleichbedeutend mit target_self.
_Spitze
Dieses Ziel bewirkt, dass das Dokument in das Fenster geladen wird, das den Hyperlink enthält. Durch die Verwendung des Ziels _top werden alle enthaltenen Frames gelöscht und das Dokument in das gesamte Browserfenster geladen. Es wird im Allgemeinen verwendet, um auf einen Anker in einem Iframe-Frame zu klicken. Der Ziellink wird direkt auf der aktuellen Seite geöffnet, anstatt im Iframe geladen zu werden.

HTML-Link löst Desktop-Software zum Senden von E-Mails aus
Indem Sie dem href-Attribut eine Adresse hinzufügen, die mit „mailto:“ beginnt, und diese mit der Ziel-E-Mail-Adresse kombinieren, können Sie die Standard-E-Mail-Verwaltungssoftware auf dem Computer des Benutzers direkt aufrufen, den Inhalt automatisch einfügen und die E-Mail senden.
Viele Websites verfügen über diese Funktion. Klicken Sie einfach auf die E-Mail-Adresse und die Schnittstelle zum Senden der E-Mail wird angezeigt.
Der E-Mail-Hyperlink-Code lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <   href = "mailto:E-Mail-Adresse" > EMAIL </ a >     

Zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <   href = "mailto:[email protected]" > E-Mail des Webmasters </ a >   

Hinweis: Da die Adresse direkt veröffentlicht wird, kann es zu viel Spam kommen. Es wird daher empfohlen, diesen E-Mail-Hyperlink nicht zu verwenden.
Seit ich meine Adresse bei [email protected] eingetragen habe, erhalte ich täglich Spam-Nachrichten.
Auch wenn Sie die E-Mail-Adresse ohne Hyperlink angeben möchten, schreiben Sie sie nicht direkt auf die Website oder Webseite. Sie können Bilder oder andere Methoden verwenden, um Links mit komplexen Adressen anzugeben:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <   href = "Mailto:[email protected][email protected]&[email protected]&Subject=Hello&Body=你好" > Senden Sie mir eine E-Mail </ a >    

Seine Syntax besteht im Wesentlichen aus den folgenden Teilen
mailto: (E-Mail senden an) gefolgt von der E-Mail-Adresse, zum Beispiel: [email protected]
? (Trennzeichen) wird verwendet, um dem entsprechenden Parameter nach der Adresse zu folgen
&; (Parameterverbinder) Wenn Sie mehrere Parameter gleichzeitig einstellen, müssen Sie das Symbol & verwenden, um sie zu unterscheiden und zu verbinden
cc=, bcc= (Kopie), gefolgt von der E-Mail-Adresse der Person, die in CC gesetzt werden soll, zum Beispiel: [email protected]
Betreff = (E-Mail-Betreff) gefolgt von Ihrem E-Mail-Betreff
body= (E-Mail-Inhalt) gefolgt vom erforderlichen E-Mail-Inhalt


<<:  So erhalten Sie Formulardaten in Vue

>>:  Beispiel für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds

Artikel empfehlen

Eine kurze Diskussion über die Leistungsprobleme des MySQL-Paging-Limits

MySQL-Paging-Abfragen werden normalerweise über L...

So verwenden Sie das MySQL-Limit und lösen das Problem großer Paging-Aufgaben

Vorwort Wenn wir in der täglichen Entwicklung MyS...

CSS und JS für eine romantische Meteorschauer-Animation

1. Rendern 2. Quellcode HTML < Textkörper >...

CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode

1. Verschiedene CSS-Symbole Es gibt drei Möglichk...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.24

In diesem Artikel finden Sie das Installations-Tu...

Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design

Beim Erstellen einer Website treten immer wieder P...

Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify

Inhaltsverzeichnis JSON.parse JSON.parse-Syntax R...

So verwenden Sie Nginx als Proxy-Cache

Der Zweck der Cache-Verwendung besteht darin, den...

Implementierung des Imports und Exports von Vue-Element-Admin-Projekten

vue-element-admin importiert Komponentenkapselung...