Heim > Web-Frontend > HTML-Tutorial > Ausführliche Erläuterung von Beispielen für Hyperlinks in XHTML

Ausführliche Erläuterung von Beispielen für Hyperlinks in XHTML

巴扎黑
Freigeben: 2017-05-22 10:39:15
Original
1813 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich das Tutorial zur Verwendung von Hyperlink-Tags in XHTML vor, einschließlich einer Einführung in die Verwendung von Ankerlinks und linkrelativen Adressen. Freunde in Not können auf


Hyperlinks, auch „ genannt“ verweisen. Link". Man kann sagen, dass sich Hyperlinks überall auf den Webseiten befinden, die wir durchsuchen. Wenn wir auf eine Linkadresse auf einer Webseite klicken, wird auf eine andere Webseite verwiesen.
Verwenden Sie das Tag , um einen Hyperlink zu definieren. Syntax:
Angezeigter Text oder Bild
Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<a href="http://www.baidu.com/">链接至百度</a>
Nach dem Login kopieren
  1. Browser-Anzeigeeffekt:

  2. Link zu Baidu

  3. Wenn wir oben auf die Worte „Link zu Baidu“ klicken, leitet der Browser zur Baidu-Homepage weiter.

Hyperlink-Attribut
Hyperlink-Attribut:
href-Link-Adresse. Dabei kann es sich um eine absolute Webadresse oder eine relative Adresse handeln.
Ziel-Link-Ziel. Der Wert _blank öffnet die Linkadresse in einem neuen Fenster. Standardmäßig wird das aktuelle Fenster zum Öffnen der Linkadresse verwendet.
Benennen Sie den Ankerlink, wir werden weiter unten separat darüber sprechen.

Relative Weblink-Adresse:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<a href="/css" target="_blank">p+CSS教程</a>
Nach dem Login kopieren
  1. In diesem Beispiel wird eine relative Adresse verwendet, während das obige Beispiel, das auf Baidu verlinkt, eine absolute Adresse verwendet.

Beispiel für ein Zielattribut hinzugefügt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<a href="http://www.baidu.com/" target="_blank">链接至百度</a>
Nach dem Login kopieren
  1. Wenn Sie erneut auf den Link klicken, ermöglicht der Browser das Öffnen einer neuen Seite unter der Linkadresse, während das ursprüngliche Seitenfenster beibehalten wird.

  2. Tipp

  3. Wenn eine Linkadresse nicht sehr eng mit dem aktuellen Thema oder Prozess zusammenhängt, ist dies normalerweise das Attribut target="_blank". Versuchen Sie andernfalls, keine neuen Fenster zu öffnen, um den Zuschauern ein benutzerfreundliches Surferlebnis zu bieten.

  4. Wenn die Seite aus mehreren Seitenrahmen besteht, kann das Zielattribut auch andere Werte haben

E-Mail-Hyperlink
Beispiel für einen E-Mail-Link:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>
Nach dem Login kopieren
  1. Wenn Sie auf diesen Link klicken, können Sie E-Mails in Ihrem Standard-E-Mail-Client verfassen.

Ankerlink
Ankerlink bezieht sich auf den Link innerhalb der Seite, aber mittlerweile bezeichnen viele Leute auch Text-Hyperlinks als Ankerlinks.
Nehmen wir ein Beispiel, um die Rolle von Ankern zu erklären:
Wir haben zum Beispiel einen gut geschriebenen Artikel und viele Leute haben am Ende des Artikels Kommentare abgegeben, und das Fenster zum Kommentieren befindet sich normalerweise unten des Kommentars. Die Website legt einen Ankerlink fest, auf dem der Kommentar gepostet wird, und entwirft einen Link zu dem Ankerlink, auf dem der Kommentar angezeigt wird, z. B. „Kommentar posten“. Wenn jemand die von anderen hinterlassenen Kommentare nicht sehen möchte und sofort zum Kommentareingabefenster springen möchte, dann klickt er auf „Kommentar posten“, um schnell zum Kommentareingabefenster innerhalb der Branche zu springen. Dieses Design verbessert zweifellos das Benutzererlebnis für die Zuschauer.
Beispiel für die Verwendung eines Ankerlinks
Anker erstellen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<p><a name="comment"></a></p>
Nach dem Login kopieren
  1. Erstellen Sie eine Hyperlink-Adresse zum Anker:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<p><a href="#comment">链接至comment锚</a></p>
Nach dem Login kopieren
  1. Wie Sie dem Beispiel entnehmen können, besteht der Zugriff auf einen Anker darin, das „#“-Zeichen und den Namen des Ankers nach der Linkadresse hinzuzufügen. Da es sich im obigen Beispiel um einen Anker handelt, der auf diese Seite verlinkt, wird die vorherige Linkadresse ignoriert (Hinweis: Die relative Adresse wird tatsächlich ignoriert und wird hier nicht besprochen).

  2. Tipp

  3. Wenn Sie mit der Verwendung dieses Ankertags experimentieren möchten, achten Sie darauf, den Hyperlink zum Anker mit dem Anker zu kombinieren Nur wenn genügend Platz auf der Webseite vorhanden ist, können Sie den Effekt sehen. Sie können die Zeilenumbruch-Tags, die wir oben kennengelernt haben, verwenden, um oben und unten genügend Leerraum zum Testen zu schaffen.

  4. Sie können auch ein Anker-Tag erstellen, das auf andere Seiten verweist, zum Beispiel:

XML/HTML-Code Kopieren Sie den Inhalt in die Zwischenablage

<p><a href="http://www.abc.com/#test">链接至锚</a></p>
Nach dem Login kopieren

Natürlich muss dieses Test-Anker-Tag auf der Seite www.abc.com vorhanden sein, sonst wird nur auf www.abc verlinkt .com-Seite und ignorieren Sie diesen Anker-Tag

【Verwandte Empfehlungen】

1. HTML Kostenloses Video-Tutorial

2. Bild- und Texterklärung der HTTP-Header-Wissenspunkte

3. Einführung in die Anzeige von JSON-Daten in HTML

4 . Detaillierte Erläuterung des Beispiels zur Implementierung des Mengenindex auf der Nachrichtenschaltfläche in HTML

5 HTML-JQuery-Codebeispiel zum Abschließen des asynchronen Hochladens von Dateien

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für Hyperlinks in XHTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage