Heim  >  Artikel  >  Web-Frontend  >  Einführung in HTML-Hyperlinks im Detail

Einführung in HTML-Hyperlinks im Detail

高洛峰
高洛峰Original
2017-03-10 11:38:561187Durchsuche

In diesem Artikel wird die detaillierte Erklärung von HTML-Hyperlinks vorgestellt.

Hyperlinks sind häufig verwendete HTML-Elemente in Websites, da verschiedene Seiten der Website durch Hyperlinks verbunden sind und Hyperlinks den Seitenwechsel vervollständigen. Hyperlinks sind das Hauptinteraktionsmittel zwischen Browsern und Servern, und wir werden in den folgenden Technologien nach und nach mehr über sie erfahren.

– Hinweis: Bilder können auch als Links verwendet werden. Mehr darüber erfahren Sie im nächsten Kapitel „Bilder in Webseiten“.

4.5.1 Einen Link zum Text hinzufügen

Die Bezeichnung des Hyperlinks lautet , hinzufügen ein Superlink zum Text Links ähneln anderen Änderungs-Tags. Der Text hat nach dem Hinzufügen des 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 verfügt über ein href-Attribut, das für die Angabe der Adresse der neuen Seite verantwortlich ist. Die von href angegebene Adresse verwendet im Allgemeinen eine relative Adresse.

– Hinweis: Bei der Website-Entwicklung werden häufiger dokumentenbezogene 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

Hyperlink-Einstellungen > ;

Öffnen Sie die Seite mit den Listeneinstellungen

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein und der Browsing-Effekt ist wie in Abbildung 4.19 dargestellt.

Einführung in HTML-Hyperlinks im Detail

Abbildung 4.19 Hyperlink-Einstellungen

Leser können den Standardstil von Hyperlinks aus Abbildung 4.19 sehen. Wenn auf einen Link auf der Seite geklickt wird, wird die Seite angezeigt Springen Sie zur Seite ul_ol.htm im selben Verzeichnis, bei dem es sich um die Seite mit den Listeneinstellungen im vorherigen Abschnitt handelt. Wenn Sie auf die Schaltfläche „Zurück“ des Browsers klicken und zur a.htm-Seite zurückkehren, wird die Farbe des Textlinks lila, um dem Betrachter mitzuteilen, dass dieser Link besucht wurde.

4.5.2 Fensteröffnungsmethode des Links ändern

Standardmäßig überschreibt sich ein Hyperlink beim Öffnen einer neuen Seite selbst . Je nach den unterschiedlichen Anforderungen des Browsers können Leser andere Möglichkeiten zum Öffnen neuer Fenster für Hyperlinks festlegen. Das Hyperlink-Tag stellt das Zielattribut zum Festlegen bereit. Die Werte sind _self (selbst überschreibend, Standard), _blank (neues Fenster erstellen, um eine neue Seite zu öffnen), _top (im gesamten Fenster des Browsers öffnen, alle Frames). Strukturen werden ignoriert) ), _parent (im vorherigen Fenster öffnen).

– Hinweis: Die Methoden _top und _parent werden für Frameseiten verwendet und in späteren Kapiteln ausführlich erläutert.

4.5.3 Eingabeaufforderungstext zum Link hinzufügen

In vielen Fällen reicht der Text des Hyperlinks nicht aus, um den Inhalt zu beschreiben Der Hyperlink Das Tag stellt ein Titelattribut bereit, das den Betrachter leicht dazu auffordern kann. Der Wert des Titelattributs ist der Inhalt der Eingabeaufforderung. Wenn der Cursor auf dem Hyperlink bleibt, wird der Inhalt der Eingabeaufforderung angezeigt. Dies hat keinen Einfluss auf die Übersichtlichkeit des Seitenlayouts. Ändern Sie die a.htm-Webseitendatei und schreiben Sie den Code wie in Code 4.19 gezeigt.

Code 4.19 Hyperlink-Einstellungen: a.htm

Hyperlink-Einstellungen > ;

Rufen Sie die Seite mit den Listeneinstellungen auf. /a>

im Browser Geben Sie http:// ein localhost/a.htm in der Adressleiste ein, und der Browsing-Effekt ist wie in Abbildung 4.20 dargestellt.

Einführung in HTML-Hyperlinks im Detail

Abbildung 4.20 Hyperlink-Eingabeaufforderungstext

4.5.4 Was ist ein Anker

Viele Webartikel haben viel Inhalt, was zu sehr langen Seiten führt, und Zuschauer müssen ständig die Bildlaufleiste des Browsers ziehen, um den benötigten Inhalt zu finden. Die Ankerfunktion des Hyperlinks kann dieses Problem lösen. Der Anker wird vom Anker auf dem Schiff abgeleitet, sodass das Schiff nicht so leicht abdriftet oder verloren geht. Tatsächlich werden Anker verwendet, um zu verschiedenen Stellen innerhalb einer einzelnen Seite zu springen. Einige Stellen werden Lesezeichen genannt.

Das Namensattribut des Hyperlink-Tags wird verwendet, um den Namen des Ankers zu definieren. Eine Seite kann mehrere Anker definieren. Das href-Attribut des Hyperlinks kann basierend auf dem Namen 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.

Code 4.20 Hyperlink-Anker: a_anchor.htm

Hyperlink-Einstellungen > ;

Hier ist der obere Anker

1. Semester< ;br />

2.

3. Semester< ;br />

4. Semester


Das 6. Semester< ;/a>

Präsidenten der Vereinigten Staaten

●1. Amtszeit (1789-1797)Hier ist der 1. Anker

Name: George Washington

George Washington

Geburt und Tod: 1732-1799

Partei:: Föderation

● 2. Amtszeit (1797-1801)< ;a name="2">Hier ist der 2. Anker

Name: John Adams

John Adams

Geburt und Tod: 1735-1826

Politische Partei:: Federal

●3. Amtszeit (1801-1809)Hier ist der 3. Anker

Name: Thomas Jefferson

Thomas Jefferson

Geburt und Tod: 1743-1826

Politische Partei:: Demokratische Partei

●Die 4. (1809-1817)Hier ist der Anker der 4.> ;

Name: James· James Madison br />

●Der 5. (1817-1825)Dies ist der Anker des 5 Tod: 1758-1831

Partei: Demokratische Partei

l>

Vor dem Test können Leser anhand von Code 4.20 erkennen, dass das Tag auch zum Definieren von Ankern und dem Namen des Ankers verwendet wird wird mit dem Namensattribut definiert (der Name ist nicht beschränkt und kann angepasst werden). Wenn Sie nach Ankerlinks suchen, verwenden Sie das href-Attribut, um den entsprechenden Namen anzugeben, 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 ist wie in Abbildung 4.21 dargestellt.

Abbildung 4.21 Hyperlink-Anker

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

– Hinweis: Das Tag , das den Anker definiert, benötigt nicht unbedingt einen bestimmten Inhalt, es dient lediglich einer Positionierung.

4.5.5 Links zu E-Mail, FTP und Telnet

Einführung in HTML-Hyperlinks im Detail

Hyperlinks können die Funktionalität von Webseiten auch weiter erweitern. Die am häufigsten verwendeten sind E-Mail-, FTP- und Telnet-Verbindungen. Um die oben genannten Funktionen auszuführen, müssen Sie lediglich den href-Wert des Hyperlinks ändern. Das Schreibformat zum Versenden einer E-Mail lautet:

Senden Sie mir eine E-Mail

Die E-Mail-Adresse muss vollständig sein, z als intel@qq.com.

Wie bereits erwähnt, wird das HTTP-Protokoll zum Surfen im Internet verwendet und der FTP-Server ist über das FTP-Protokoll verbunden. Das Linkformat ist wie folgt: LinktextDer Unterschied zwischen einem FTP-Server-Link und einem Webseiten-Link besteht darin, dass die verwendeten Protokolle unterschiedlich sind. Für FTP ist eine Anmeldeberechtigung vom Serveradministrator erforderlich. Auf einige FTP-Server kann jedoch anonym zugegriffen werden und einige öffentliche Dateien können abgerufen werden. In ähnlicher Weise wird eine ähnliche Methode verwendet, um eine Verbindung zum Server des Telnet-Protokolls herzustellen, mit dem folgenden Format:

Link text

Das Telnet-Protokoll wird selten verwendet und das HTTP-Protokoll wird hauptsächlich 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.

Code 4.21 Weitere Einstellungen für Hyperlinks: mail.htm

Hyperlink Andere Einstellungen<p></p> <p></p>

Senden Sie mir eine E-Mail

Mit FTP-Server verbinden

Mit Telnet-Server verbinden

> ;

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

Einführung in HTML-Hyperlinks im Detail

Abbildung 4.22 Weitere Einstellungen für Hyperlinks

Das obige ist der detaillierte Inhalt vonEinführung in HTML-Hyperlinks im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn