Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der HTML-Hyperlinks

Ausführliche Erläuterung der HTML-Hyperlinks

高洛峰
高洛峰Original
2017-03-11 11:26:051995Durchsuche

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

Hyperlink ist ein häufig verwendetes HTML-Element in Websites, da verschiedene Seiten der Website durch Hyperlinks verbunden sind und Hyperlinks die Verbindung zwischen den Seiten 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 </title> ;</p><p></head></p> <p><body></p> <p><font size="5"></p> <p>< a href=" ul_ol.htm">Öffnen Sie die Seite mit den Listeneinstellungen</a></p> <p></font></p> <p></body></p> <p>< /html></p> <p>Geben Sie http://www.php.cn/ in die Adressleiste des Browsers ein. Der Browsing-Effekt ist wie in Abbildung 4.19 dargestellt. </p> <p><img src="http://files.jb51.net/do/uploads/allimg/090304/2032440.jpg" alt="Ausführliche Erläuterung der HTML-Hyperlinks" ></p> <p>Abbildung 4.19 Hyperlink-Einstellungen </p> <p>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. </p> <p><strong><span style="font-size:18px"> 4.5.2 Fensteröffnungsmethode des Links ändern </span></strong></p> <p>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). </p> <p> – Hinweis: Die Methoden _top und _parent werden für Frameseiten verwendet und in späteren Kapiteln ausführlich erläutert. </p> <p><strong><span style="font-size:18px"> 4.5.3 Eingabeaufforderungstext zum Link hinzufügen </span></strong></p> <p>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. </p> <p>Code 4.19 Hyperlink-Einstellungen: a.htm</p> <p><html></p> <p><head></p> <p> <title>Hyperlink-Einstellungen </title> ;</p><p></head></p> <p><body></p> <p><font size="5"></p> <p>< a href=" ul_ol.htm" target="_blank" title="Hallo Leser, was Sie jetzt sehen, ist der Eingabeaufforderungstext. Klicken Sie auf diesen Link, um ein neues Fenster zu öffnen und zur Seite ul_ol.htm zu springen."> Rufen Sie die Seite mit den Listeneinstellungen auf. /a></p> <p></font></p> <p></body></p> <p></html></p> <p> im Browser Geben Sie http:// ein www.php.cn/ in der Adressleiste, und der Browsing-Effekt ist wie in Abbildung 4.20 dargestellt. </p> <p><img src="http://files.jb51.net/do/uploads/allimg/090304/2032441.jpg" alt="Ausführliche Erläuterung der HTML-Hyperlinks" ></p> <p>Abbildung 4.20 Hyperlink-Eingabeaufforderungstext</p> <p><strong><span style="font-size:18px"> 4.5.4 Was ist ein Anker </span></strong></p> <p>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. </p> <p>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. </p> <p>Code 4.20 Hyperlink-Anker: a_anchor.htm</p> <p><html></p> <p><head></p> <p> <title> Hyperlink-Einstellungen </title> ;</p><p></head></p> <p><body></p> <p><font size="5"></p> <p>< a name=" top">Hier ist der obere Anker</a><br /></p> <p><a href="#1">1. Semester</a>< ;br /></p> <p><a href="#2">2.</a><br /></p> <p><a href="#3 ">3. Semester</a>< ;br /></p> <p><a href="#4">4. Semester</a><br /></p> <p><a href="#5"> ;Das 5. Semester</a><br /></p> <p><a href="#6">Das 6. Semester< ;/a><br /></p> <p> <h2>Präsidenten der Vereinigten Staaten</h2></p> <p>●1. (1789-1797)<a name="1 ">Hier ist der 1. Anker</a><br /> ;</p> <p>Name: George Washington<br /></p> <p>George Washington<br /> ;</p> <p>Geburt und Tod: 1732-1799<br /></p> <p>Partei:: Föderation<br /></p> <p>● 2. Amtszeit (1797-1801)< ;a name="2">Hier ist der 2. Anker</a><br /> ;</p> <p>Name: John Adams<br /></p> <p> John Adams<br /></p> <p>Geburt und Tod: 1735-1826<br /></p> <p>Politische Partei:: Federal<br /></p> <p>●3. Amtszeit (1801-1809)<a name="3">Hier ist der 3. Anker</a><br / ></p> <p>Name: Thomas Jefferson<br /> </p> <p>Thomas Jefferson<br /></p> <p>Geburt und Tod: 1743-1826<br /></p> <p>Politische Partei:: Demokratische Partei<br /></p> <p>●Die 4. (1809-1817)<a name="4">Hier ist der Anker der 4.</a> <br /></p> <p>Name: James· James Madison br /></p> <p>●Der 5. (1817-1825)<a name="5">Das ist der Anker des 5.</a><br /></p> <p>Name: James Monroe<br /></p> <p>James Monroe<br /></p> <p>Geburt und Tod : 1758-1831<br /></p> <p>Partei: Demokratische Partei<br /></p> <p></font></p> <p></body></p> <p></html>l></p> <p>Vor dem Test können Leser anhand von Code 4.20 erkennen, dass das Tag <a></a> auch zum Definieren von Ankern verwendet wird und der Name des Ankers lautet definiert mit dem Namensattribut (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://www.php.cn/ in die Adressleiste des Browsers ein. Der Browsing-Effekt ist wie in Abbildung 4.21 dargestellt. </p> <p></p> <p></p>Abbildung 4.21 Hyperlink-Anker <p></p>Wenn der Betrachter auf den Hyperlink klickt, scrollt die Seite automatisch zur Ankerposition des href-Attributwertnamens. <p><img src="http://files.jb51.net/do/uploads/allimg/090304/2032442.jpg" alt="Ausführliche Erläuterung der HTML-Hyperlinks" > – Hinweis: Das Tag <a name=""></a>, das den Anker definiert, benötigt nicht unbedingt einen bestimmten Inhalt, es dient lediglich einer Positionierung. </p> <p></p> <p> 4.5.5 Links zu E-Mail, FTP und Telnet </p> <p></p> <p>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: <strong><span style="font-size:18px"><a href = "mailto:mail address">Senden Sie mir eine E-Mail</a></span></strong>Die E-Mail-Adresse muss vollständig sein, z als intel@qq.com. </p> <p>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: </p> <p><a href = " ftp://Server-IP-Adresse oder Domänenname ">Linktext</a></p> <p>Der 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: </p> <p><a href = "telnet://server IP address or domain name">Link text< /a></p> <p>Das Telnet-Protokoll wird selten verwendet, und das http-Protokoll wird meistens 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. </p> <p>Code 4.21 Weitere Einstellungen für Hyperlinks: mail.htm</p> <p><html></p> <p><head></p> <p> <title>Andere Einstellungen für Hyperlinks


Connect zum FTP-Server

Connect Telnet server

s

Geben Sie http:// ein www.php.cn/ in der Adressleiste des Browsers, und der Browsing-Effekt ist wie in Abbildung 4.22 dargestellt.

Ausführliche Erläuterung der HTML-Hyperlinks

Abbildung 4.22 Weitere Einstellungen für Hyperlinks

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der HTML-Hyperlinks. 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