Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks

Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks

Der Hyperlink-Tag stellt einen Linkpunkt dar und ist die Abkürzung des englischen Wortes Anchor. Seine Funktion besteht darin, den Text oder das Bild an der aktuellen Position mit anderen Seiten, Texten oder Bildern zu verbinden. Dies ist bekannt, aber seine grammatikalische Struktur ist möglicherweise etwas unbekannt. Um es effektiv nutzen zu können, müssen Sie seine grammatikalische Struktur verstehen. Das Hyperlink-Tag <a> stellt einen Linkpunkt dar, der die Abkürzung des englischen Ankers ist. Seine Funktion besteht darin, den aktuellen Text oder das aktuelle Bild mit anderen Seiten, Texten oder Bildern zu verbinden. Dies ist bekannt, aber seine grammatische Struktur ist möglicherweise etwas unbekannt, und Sie müssen seine grammatische Struktur verstehen, um es effektiv verwenden zu können. Die grundlegende Syntax des <a>-Tags lautet:
<a
Klasse=Typ
id=Wert
href=Referenz
Name＝Wert
rel=gleich|nächstes|übergeordnetes|vorheriges
Drehzahl＝Wert
Ziel=Fenster
Stil=Wert
title=Titel
onclick＝Funktion
onmouseout＝Funktion
onMouseOver=Funktion> </a>
Aus der grammatikalischen Struktur des Tags können wir erkennen, dass beim Setzen eines Hyperlinks viele Parameter zur Auswahl stehen, um unterschiedliche Linkeffekte zu erzielen. Ist das ein wenig unerwartet? !
Die Optionen „Klasse“ und „ID“ werden verwendet, um den Typ des Linkpunkts und die zugewiesene ID-Nummer festzulegen und werden normalerweise nicht festgelegt. Die beiden am häufigsten verwendeten Parameter sind href und name. Unter diesen ist href die Abkürzung für Hypertext-Referenz, die zum Festlegen der Linkadresse verwendet wird. Die Linkadresse muss eine URL-Adresse sein. Wenn kein spezifischer Pfad angegeben ist, ist der Standardpfad derselbe wie der Pfad der aktuellen Seite. Auch die verlinkten Dateien werden in mehrere Situationen unterteilt: Handelt es sich um eine HTML-Datei, wird sie direkt im aktuellen Browser geöffnet; handelt es sich um eine ausführbare Datei (.exe-Datei), wird sie direkt ausgeführt oder heruntergeladen. Die Dateien, die wir zum Download bereitstellen, sind mit dieser Funktion erstellt; handelt es sich um eine Textdatei, z. B. eine Word-Datei, wird sie im Browser geöffnet und kann bearbeitet werden.
rel: gibt die Beziehung des festgelegten Links an: rel=same bedeutet, dass die zu verknüpfende Datei dieselbe wie diese Datei ist, rel=next bedeutet, dass die zu verknüpfende Datei die nächste Seite ist, rel=parent bedeutet, dass diese Datei die übergeordnete Datei der zu verknüpfenden Datei ist und rel=previous bedeutet, dass die zu verknüpfende Datei die vorherige Seite ist.
rev: wird zum Setzen des Reverse-Links verwendet.
target: wird verwendet, um festzulegen, auf welches Fenster bei Verwendung eines Rahmenfensters verwiesen werden soll, und target="_bank" bedeutet, dass zum Öffnen der Webseite ein neues Fenster geöffnet wird.
Titel: Wird verwendet, um den Titel festzulegen, der angezeigt wird, wenn der Linkpunkt ausgewählt wird.
onclick: entspricht einem Ereignis. Wenn auf den Linkpunkt geklickt wird, wird dieses Ereignis ausgelöst und die entsprechende Subroutine ausgeführt.
onmouseover: Ähnlich wie onclick wird das entsprechende Event ausgelöst, wenn die Maus über den Linkpunkt bewegt wird.
onmouseout: Das entsprechende Event wird ausgelöst, wenn die Maus den Kontaktpunkt verlässt.
Hier einige Beispiele: <a href="index.htm">Zurück zur Startseite</a>
<a href="sound.wav">Audiodatei abspielen</a>
<a href="javascipt.open()">Führen Sie das entsprechende Programm aus</a>
<a herf="document.doc">Öffnen Sie das entsprechende Dokument zur Bearbeitung</a>
Anwendungskenntnisse 1. Download-Dateien bereitstellen <br />Viele Internetnutzer haben geschrieben und gefragt, wie man Download-Effekte bereitstellt. Tatsächlich handelt es sich immer noch um einen Hyperlink, allerdings muss die herunterzuladende Datei auf die Website hochgeladen werden. Beispiel: Es steht ein Dateipaket mit „Web Page Skills“ zum Download bereit, der Dateiname lautet „homepagejq.zip“ und es wurde auf die Website hochgeladen, dann lässt sich der Code dieses Links folgendermaßen schreiben: <a href="homepagejq.zip">Klicken Sie hier, um das Dateipaket „Web Page Skills“ herunterzuladen</a>.
2. Öffnen Sie die verlinkte Webseite in einem neuen Fenster
 Setzen Sie den Wert von „target“ auf „_blank“. Beispiel: Öffnen Sie die Webseite „aboutme.htm“ in einem neuen Fenster. Der Code, der diesen Effekt erzeugt, lautet: <a href="aboutme.htm" target="_blank">Über mich…</a>.
3. Bewegen Sie die Maus über den Link, um eine Zeile Beschreibungstext anzuzeigen
 Diesen Effekt können Sie erzielen, indem Sie den Parameterwert „Titel“ festlegen. Beispiel: Wenn die Maus über den Link „123WORDPRESS.COM“ bewegt wird, wird die Beschreibung „Dies ist eine professionelle Website, die Techniken zur Webseitenerstellung vorstellt“ angezeigt. Der Code dieses Links lautet wie folgt: <a href="hscf.htm" title="Dies ist eine professionelle Website, die Fähigkeiten zur Webseitenerstellung vorstellt">123WORDPRESS.COM</a>.
4. Wenn die Maus über einen Link bewegt wird, öffnet sich ein Fenster .<br />Diesen Effekt erzielen Sie, wenn Sie den Parameter „onmouseover“ setzen. Beispiel: Wenn die Maus über einen Link bewegt wird, öffnet sich ein Fenster mit der Anzeige „Demo des Mouse-Hover-Effekts!“. Der Code für diesen Link lautet wie folgt: <a href="other web pages.htm" onmouseover="alert('Mouse hover effect demonstration!')">link</a>. Mit einer ähnlichen Methode lässt sich der Effekt eines Popup-Eingabeaufforderungsfensters beim Drücken der Maustaste und eines Popup-Eingabeaufforderungsfensters beim Loslassen der Maustaste erzeugen.
5. Auf den angegebenen Inhalt dieser Seite verlinken <br />Um auf einen bestimmten Teil des Inhalts dieser Seite zu verlinken (also „innerhalb der Datei zu springen“), müssen Sie mit dem Parametername den Namen des Linkpunkts angeben. Wählen Sie einen Textblock aus und benennen Sie ihn mit dem Namensparameter für die Verwendung im Link. Das sogenannte Springen innerhalb derselben Datei bedeutet, dass der Leser beim Lesen einer sehr langen Datei eine Sprunglesemethode anwenden kann, wenn er nur an einem bestimmten Teil des Inhalts interessiert ist. Das Grundformat ist:
<a href="＃Link Point Name">Teil 2</a>Teil 1 Inhalt......
...........................................
<a name="Linkpunktname"></a>Der eigentliche Inhalt des zweiten Teils......
...........................................
Auf diese Weise werden Sie beim Anklicken des Hyperlinks „Teil 2“ automatisch zu den „Eigentlichen Inhalten von Teil 2“ weitergeleitet. Der durch den Parameter „name“ definierte Linkpunktname kann beliebig sein, aber der Linkpunktname im Parameter „href“ des Links muss damit übereinstimmen. Vergessen Sie nicht, davor „#“ hinzuzufügen.
6. Link zum angegebenen Inhaltsort anderer Seiten <br />Die Methode ähnelt dem obigen Beispiel, allerdings muss der Dateiname der Webseite vor dem Linkpunktnamen im Parameter „href“ hinzugefügt werden. Beispiel: Es gibt zwei Webseiten, Seite1.htm und Seite2.htm, jede Seite hat zwei Inhaltsteile. Nun möchten Sie in Seite1.htm einen Hyperlink erstellen. Wenn Sie auf den Link klicken, werden Sie zum zweiten Inhaltsteil von Seite2.htm weitergeleitet. Dann können wir Folgendes tun: Schreiben Sie zunächst an den Anfang des zweiten Teils des Inhalts von Seite2.htm einen Code wie diesen: <a name="Linkpunktname"></a>; schreiben Sie in Seite1.htm einen Linkcode wie diesen: <a href="pagw2.htm#Linkpunktname">Zweiter Teil des Inhalts von Seite2</a>.
7. Link zur E-Mail
 Nach dem Anklicken eines Hyperlinks wird die E-Mail-Verwaltungssoftware auf dem Client-Computer gestartet, um Ihnen einen Brief zu schreiben. Beispielsweise diese Codezeile: <a href="mailto:[email protected]">Bitte schreiben Sie mir</a>. Sobald Sie auf den Link „Bitte schreiben Sie mir“ klicken, wird automatisch die Schreibfunktion der E-Mail-Verwaltungssoftware (z. B. OE) gestartet und die E-Mail-Adresse in die Adressleiste des Empfängers eingefügt.
Links können nicht nur durch Text, sondern auch durch Bilder und sogar durch Teile eines Bildes getragen werden und alle können die oben genannten Effekte erzielen. Die Methoden sind auch dieselben, der einzige Unterschied ist der Träger, also der Teil zwischen den beiden Paaren eckiger Klammern des Links, daher werde ich kein weiteres Beispiel geben.

<<:  Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

>>:  Implementierung der MySQL Master-Slave-Statusprüfung

Artikel empfehlen

Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS

Hier stellen wir den CentOS-Server mit installier...

Häufige Browserkompatibilitätsprobleme (Zusammenfassung)

Browserkompatibilität ist nichts anderes als Stil...

Detaillierte Erklärung des Unterschieds zwischen in und exists in MySQL

1. Bereiten Sie sich im Voraus vor Zu Ihrer Beque...

Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine

CentOS7 herunterladen Das Image, das ich herunter...

MySQL Server IO 100 % Analyse- und Optimierungslösung

Vorwort Während des Stresstests besteht das unmit...

Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons

0. Einleitung 18. August 2016 Heute ist mir aufge...

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Ich habe viele Projekte geschrieben, bei denen de...

Detaillierte Erläuterung des Prozesses, mit dem Nginx die echte Quell-IP erhält, nachdem mehrere Proxy-Ebenen durchlaufen wurden

Frage Nginx nimmt $remote_addr als echte IP-Adres...

XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung

<br />Das sinnvolle Hinzufügen von Bildern k...

22 Vue-Optimierungstipps (Projektpraxis)

Inhaltsverzeichnis Code-Optimierung Verwenden der...

Implementierung der Docker-Batch-Container-Orchestrierung

Einführung Der Dockerfile-Build-Ausführungsvorgan...

So installieren Sie Docker mithilfe von Skripten unter Linux Centos

Was ist die Hauptfunktion von Docker? Derzeit gib...

Vue3 AST Parser-Quellcode-Analyse

Inhaltsverzeichnis 1. Generieren Sie einen abstra...

Centos7-Installation und Konfiguration von Mysql5.7

Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...

So gehen Sie mit dem Problem um, dass die Datei gelöscht wird, der Speicherplatz in Linux jedoch nicht freigegeben wird

Hintergrund des Problems Das Serverüberwachungssy...