HTML-Hyperlinks im Detail erklärt

HTML-Hyperlinks im Detail erklärt
Hyperlink

Hyperlinks sind die am häufigsten verwendeten HTML-Elemente auf Webseiten, da alle Seiten einer Website durch Hyperlinks miteinander verbunden sind und so das Springen zwischen den Seiten ermöglichen. Hyperlinks sind das wichtigste Mittel zur Interaktion zwischen Browsern und Servern und wir werden sie in den folgenden Technologien schrittweise vertiefen.

— Hinweis: Bilder können auch als Links verwendet werden. Darauf wird im nächsten Kapitel „Bilder auf Webseiten“ näher eingegangen.

4.5.1 Hinzufügen von Links zu Text

Das Tag für einen Hyperlink ist <a></a>. Das Hinzufügen eines Hyperlinks zu Text ähnelt anderen dekorativen Tags. Der Text hat nach dem Hinzufügen eines Links einen eigenen speziellen Stil, um ihn von anderem Text zu unterscheiden. Der Standard-Linkstil ist blauer Text mit Unterstreichung. Ein Hyperlink springt zu einer anderen Seite. Das Tag <a></a> hat ein href-Attribut, das für die Angabe der Adresse der neuen Seite verantwortlich ist. Die durch href angegebene Adresse verwendet im Allgemeinen eine relative Adresse.

— Hinweis: Bei der Website-Entwicklung werden häufiger dokumentrelative Adressen verwendet.

Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie a.htm und schreiben Sie den Code wie in Code 4.18 gezeigt.

Code 4.18 Hyperlink-Einstellungen: a.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="ul_ol.htm">Gehen Sie zur Seite mit den Listeneinstellungen</a>

</font>

</body>

</html>

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.19 angezeigt.

Abbildung 4.19 Hyperlink-Einstellungen

Leser können den Standardstil von Hyperlinks in Abbildung 4.19 sehen. Wenn Sie auf der Seite auf einen Link klicken, springt die Seite zur Seite ul_ol.htm im selben Verzeichnis, die im vorherigen Abschnitt die Listeneinstellungsseite war. Wenn Sie im Browser auf die Schaltfläche „Zurück“ klicken und zur Seite a.htm zurückkehren, ändert sich die Farbe des Textlinks in Lila, um dem Betrachter anzuzeigen, dass dieser Link besucht wurde.

4.5.2 Ändern Sie die Fensteröffnungsmethode des Links

Standardmäßig überschreiben sich Hyperlinks, die neue Seiten öffnen, selbst. Abhängig von den unterschiedlichen Anforderungen des Browsers können Leser andere Möglichkeiten zum Öffnen neuer Fenster für Hyperlinks angeben. Das Hyperlink-Tag bietet ein Zielattribut zum Festlegen mit den Werten _self (Selbstabdeckung, Standard), _blank (neues Fenster zum Öffnen einer neuen Seite erstellen), _top (im gesamten Browserfenster öffnen, alle Rahmenstrukturen ignorieren) und _parent (im Fenster der obersten Ebene öffnen).

— Hinweis: Für Frame-Seiten werden die Methoden _top und _parent verwendet, die in den folgenden Kapiteln ausführlich erläutert werden.

4.5.3 Hinweistext zu Links hinzufügen

In vielen Fällen reicht der Text eines Hyperlinks nicht aus, um den Inhalt des Links zu beschreiben. Das Hyperlink-Tag bietet ein Titelattribut, das dem Betrachter leicht einen Hinweis geben kann. Der Wert des Titelattributs ist der Eingabeaufforderungsinhalt. Wenn der Cursor des Betrachters auf dem Hyperlink bleibt, wird der Eingabeaufforderungsinhalt angezeigt, was die Übersichtlichkeit des Seitenlayouts nicht beeinträchtigt. Ändern Sie die Webseitendatei a.htm und schreiben Sie den Code wie in Code 4.19 gezeigt.

Code 4.19 Hyperlink-Einstellungen: a.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="ul_ol.htm" target="_blank" title="Hallo Leser, Sie sehen jetzt den Eingabeaufforderungstext. Klicken Sie auf diesen Link, um ein neues Fenster zu öffnen und zur Seite ul_ol.htm zu springen.">Gehen Sie zur Seite mit den Listeneinstellungen</a>

</font>

</body>

</html>

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.20 angezeigt.

Abbildung 4.20 Eingabeaufforderungstext für Hyperlinks

4.5.4 Was ist ein Anker?

Viele Webartikel haben sehr viel Inhalt, wodurch die Seite sehr lang wird. Die Betrachter müssen die Bildlaufleiste des Browsers ständig ziehen, um den gewünschten Inhalt zu finden. Die Ankerfunktion des Hyperlinks kann dieses Problem lösen. Der Anker wird vom Anker des Schiffes abgeleitet. Nachdem der Anker geworfen wurde, wird das Schiff nicht so leicht abdriften oder verloren gehen. Tatsächlich werden Anker verwendet, um zu verschiedenen Stellen innerhalb einer einzelnen Seite zu springen, und einige Stellen werden als Lesezeichen bezeichnet.

Das Name-Attribut des Hyperlink-Tags wird verwendet, um den Namen des Ankers zu definieren. Eine Seite kann mehrere Anker definieren. Das href-Attribut des Hyperlinks kann entsprechend dem Namen zum entsprechenden Anker springen. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie a_anchor.htm und schreiben Sie den Code wie in Code 4.20 gezeigt.

Listing 4.20 Hyperlink-Anker: a_anchor.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a name="top">Dies ist der obere Anker</a><br />

<a href="#1">Nr. 1</a><br />

<a href="#2">Nr. 2</a><br />

<a href="#3">Der Dritte</a><br />

<a href="#4">Der 4.</a><br />

<a href="#5">Der 5.</a><br />

<a href="#6">Der 6.</a><br />

<h2>US-Präsidenten</h2>

●1. (1789-1797) <a name="1">Hier ist der 1. Anker</a><br />

Name: George Washington<br />

George Washington<br />

Geboren: 1732-1799<br />

Politische Partei: Föderal<br />

●Der 2. (1797-1801)<a name="2">Hier ist der 2. Anker</a><br />

Name: John Adams<br />

John Adams<br />

Geboren: 1735-1826<br />

Politische Partei: Föderal<br />

●Der 3. (1801-1809) <a name="3">Hier ist der 3. Anker</a><br />

Name: Thomas Jefferson<br />

Thomas Jefferson<br />

Geboren: 1743-1826<br />

Politische Partei: Demokratische Fortschrittspartei<br />

●Der 4. (1809-1817) <a name="4">Hier ist der 4. Anker</a><br />

Name: James Madison<br />

Michael B.<br />

Geboren: 1751-1836<br />

Politische Partei: Demokratische Fortschrittspartei<br />

●Der 5. (1817-1825) <a name="5">Hier ist der 5. Anker</a><br />

Name: James Monroe<br />

James Monroe<br />

Geboren: 1758-1831<br />

Politische Partei: Demokratische Fortschrittspartei<br />

</font>

</body>

</html>l>

Vor dem Testen können die Leser in Code 4.20 sehen, dass der Anker auch mit dem Tag <a></a> definiert ist und der Name des Ankers mit dem Namensattribut definiert ist (der Name ist nicht begrenzt und kann angepasst werden). Um einen Ankerlink zu finden, geben Sie mit dem href-Attribut den entsprechenden Namen an und fügen Sie vor dem Namen ein #-Symbol hinzu. Geben Sie http://localhost/a_anchor.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.21 angezeigt.

Abbildung 4.21 Hyperlink-Anker

Wenn der Betrachter auf den Hyperlink klickt, wird die Seite automatisch zur Ankerposition des href-Attributwertnamens gescrollt.

— Hinweis: Das Tag <a name=""></a>, das den Anker definiert, benötigt nicht zwingend einen konkreten Inhalt, es dient lediglich der Positionierung.

4.5.5 E-Mail-, FTP- und Telnet-Links

Hyperlinks können die Funktionalität von Webseiten zusätzlich erweitern. Häufig verwendete Links sind E-Mail-, FTP- und Telnet-Verbindungen. Um die oben genannten Funktionen auszuführen, müssen Sie nur den href-Wert des Hyperlinks ändern. Das Format zum Senden einer E-Mail ist:

<a href = "mailto:E-Mail-Adresse">Senden Sie mir eine E-Mail</a>

Die E-Mail-Adresse muss vollständig sein, beispielsweise [email protected].

Wie bereits erwähnt, wird beim Surfen im Internet das HTTP-Protokoll verwendet, während der FTP-Server für die Verbindung das FTP-Protokoll verwendet. Das Linkformat ist wie folgt:

<a href = "ftp://Server-IP-Adresse oder Domänenname">Linktext</a>

Der Unterschied zwischen FTP-Server-Links und Webseiten-Links besteht in den unterschiedlichen verwendeten Protokollen. Für FTP ist die Anmeldeberechtigung des Serveradministrators erforderlich. Auf einige FTP-Server kann jedoch anonym zugegriffen werden, sodass auf einige öffentliche Dateien zugegriffen werden kann. Auch bei der Verbindung mit einem Server über das Telnet-Protokoll wird eine ähnliche Methode verwendet. Das Format ist wie folgt:

<a href = "telnet://Server-IP-Adresse oder Domänenname">Linktext</a>

Das Telnet-Protokoll wird selten verwendet, meistens wird das http-Protokoll verwendet. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie mail.htm und schreiben Sie den Code wie in Code 4.21 gezeigt.

Listing 4.21 Weitere Einstellungen für den Hyperlink: mail.htm

<html>

<Kopf>

<title>Weitere Einstellungen für Hyperlinks</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="mailto:[email protected]" title="Hallo Leser, klicken Sie hier, um eine E-Mail zu senden.">Senden Sie mir eine E-Mail</a><br />

<a href="ftp://101.22.25.11" title="Hallo Leser, willkommen auf dem FTP-Server.">Mit dem FTP-Server verbinden</a><br />

<a href="telnet://101.22.25.11" title="Hallo Leser, willkommen beim Telnet-Server.">Stellen Sie eine Verbindung zum Telnet-Server her</a>

</font>

</body>

</html>s

Geben Sie http://localhost/mail.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.22 angezeigt.

Abbildung 4.22 Weitere Einstellungen für Hyperlinks

<<:  So unterscheiden Sie MySQLs innodb_flush_log_at_trx_commit und sync_binlog

>>:  Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS

Artikel empfehlen

So installieren und konfigurieren Sie den Apache-Webserver

Erfahren Sie, wie Sie Ihre eigene Website auf Apa...

Fallstudie zur dynamischen Datenbindung von this.$set in Vue

Ich finde, dass die Erklärung von this.$set im In...

Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung

<br /> Im ersten und zweiten Teil haben wir ...

Lösung für das Problem „Linux QT Kit fehlt“ und „Version leer“

Derzeit tritt ein solches Problem auf Bei mir war...

Schritte und Methoden zur Bindung von Domänennamen und IPs in der Alibaba Cloud

1 Rufen Sie die Alibaba Cloud-Konsole auf, suchen...

Setzen Sie das Attribut „contenteditable“, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen).

Code kopieren Der Code lautet wie folgt: <div ...

Detaillierte Erklärung des Konflikts zwischen Flex-Layout und Position: absolut/fest

Ich bin bei der Entwicklung eines Projekts schon ...

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Navicat meldet beim Verbinden mit der Datenbank d...

Zusammenfassung der HTML-Wissenspunkte für das Frontend (empfohlen)

1. HTML-Übersicht htyper Textauszeichnungssprache...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

Lösung für das Problem, dass die gesamte Seite nicht zentriert ist, wenn margin:0 auto in HTML verwendet wird

Ich habe heute eine JSP-Seite geschrieben. Ich hab...

Implementieren einer verteilten Sperre mit MySQL

einführen In einem verteilten System ist die vert...

Eine kurze Diskussion über die alternative Methode von $refs in vue2 in der kombinierten API von vue3

Wenn Sie Erfahrung in der Vue2-Projektentwicklung...

Implementierung des Docker-CPU-Limits

1. --cpu=<Wert> 1) Geben Sie an, wie viele ...

Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04

Ubuntu 16.04 baut FTP-Server FTP installieren FTP...