Wie fügen wir einen Anker in HTML ein?

WBOY
Freigeben: 2023-08-31 15:21:06
nach vorne
800 Leute haben es durchsucht

Wie fügen wir einen Anker in HTML ein?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:tutorialspoint.com
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!