Heim >Web-Frontend >HTML-Tutorial >Wie fügen wir einen Anker in HTML ein?
Wie fügen wir einen Anker in HTML ein?
- WBOYnach vorne
- 2023-08-31 15:21:06896Durchsuche
In diesem Artikel werden wir die Aufgabe ausführen, wie man Anker in HTML einfügt. Lassen Sie uns in diesen Artikel eintauchen, um Anker in HTML zu verstehen.
Das Ankerelement wird verwendet, um den Quellanker mit dem Zielanker zu verknüpfen. Das Ziel ist die Ressource, mit der der Quellanker verbunden ist, während die Quelle der Text, das Bild oder die Schaltfläche ist, die auf eine andere Site verweist.
Hyperlinks sind eine der Schlüsseltechnologien, die das Internet zu einer Informationsautobahn machen.
Um besser zu verstehen, wie man Anker in HTML einfügt, schauen wir uns das folgende Beispiel an
Beispiel 1
Im folgenden Beispiel erstellen wir einen Jump Anchor-Link.
<!DOCTYPE html>
<html>
<head>
<style>
.main-content {
height: 90vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="tutorials">Tutorials Point</h2>
<p class="main-content">
Tutorials Point originated from the idea that there exists a class of readers who
respond better to online content and prefer to learn new skills at their own pace
from the comforts of their drawing rooms.The journey commenced with a single tutorial
on HTML in 2006 and elated by the response it generated, we worked our way to adding
fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing to academics
and much more.</p>
<p>Click To
<a href="#tutorials">Jump</a>.
</p>
</body>
</html>
Wenn das obige Skript ausgeführt wird, erscheint ein Ausgabefenster mit dem im obigen Skript verwendeten Text zusammen mit dem erwähnten Ankertag „Click to Jump“, das es dem Benutzer ermöglicht, beim Drücken zum Anfang der Seite zu springen.
Beispiel 2
Unter Berücksichtigung des folgenden Szenarios erstellen wir ein Beispiel für die Verlinkung zu einem Anker von einer anderen Webseite.
<!DOCTYPE html>
<html>
<body>
<h2 id="Tutorials">TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers
who respond better to online content and preferto learn new skills at their own
place from the comforts of their drawing rooms.</p>
<p>
<a href="https://www.tutorialspoint.com/market/index.asp">Go To The Course Page.</a>
</p>
<p>
<a href="https://www.tutorialspoint.com/latest/ebooks">Search For Ebooks.</a>
</p>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe mit dem im obigen Skript verwendeten Text und dem Link, der mithilfe von Ankertags an die Webseite angehängt ist. Wenn der Benutzer auf den Link klickt, öffnet sich eine neue Seite.
Beispiel 3: Verwendung von JavaScript
Sehen Sie sich das Beispiel unten an, in dem wir einen Link zu Javascript erstellen.
<!DOCTYPE html>
<html>
<body>
<a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a>
</body>
</html>
Wenn das angegebene Skript ausgeführt wird, stellt es eine Ausgabe bereit, die einen Link enthält, der mithilfe eines Ankers mit dem Text „Zum Ausführen klicken“ auf der Webseite platziert wird.
Wenn der Benutzer auf den Link klickt, wird das Skript ausgelöst und die Warnung „Willkommen beim Tutorial Point“ angezeigt.
Das obige ist der detaillierte Inhalt vonWie fügen wir einen Anker in HTML ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!