Was ist ein Ankerpunkt in HTML?

青灯夜游
Freigeben: 2023-01-06 11:12:36
Original
8400 Leute haben es durchsucht

Ein Ankerpunkt in HTML ist eine Art Hyperlink auf einer Webseite, auch benannter Ankerpunkt genannt, der den Ort, an dem Besucher nach dem Klicken auf einen Hyperlink ankommen, genau steuern kann. Von Ankern spricht man, wenn Benutzer Tags in einem Dokument setzen. Diese Tags werden normalerweise an einem bestimmten Thema oder oben im Dokument platziert und erstellen dann Links zu diesen benannten Ankern, die den Betrachter schnell zur angegebenen Stelle führen können.

Was ist ein Ankerpunkt in HTML?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Ankerpunkt – ist eine Art Hyperlink auf einer Webseite, auch benannter Ankerpunkt genannt, der namentlich lokalisiert wird. Ein benannter Anker ist ein Hyperlink innerhalb einer Seite, ähnlich einer Schnellsuche, und wird häufig verwendet.

Benannte Anker: Benutzer setzen Tags in Dokumenten. Diese Tags werden normalerweise an einem bestimmten Thema oder oben im Dokument platziert. Erstellen Sie dann diese benannten Ankerlinks, die Zuschauer schnell zu einem bestimmten Ort führen können.

Vorteile der Erstellung von Ankerlinks:

Ankerlinks geben Ihnen eine genaue Kontrolle darüber, wo Ihre Besucher auf den Hyperlink klicken, nachdem sie am Ort angekommen sind. Links ohne benannte Anker führen Besucher zum Anfang der Zielseite. Wenn der Artikel auf der Seite sehr lang ist, ist es mühsam, die Bildlaufleiste einfach nach oben und unten zu bewegen, um den gewünschten Teil zu finden. In diesem Fall können Sie einen Hyperlink innerhalb der Seite erstellen, um die erforderlichen Informationen schnell zu finden.

So erstellen Sie einen benannten Anker:

Der Vorgang zum Erstellen eines Links zu einem benannten Anker ist in zwei Schritte unterteilt. Erstellen Sie zunächst einen benannten Anker und dann einen Link zum benannten Anker.

Definieren Sie den folgenden Ankerpunkt an der entsprechenden Stelle in der HTML-Seite:

<a name="top">这里是TOP部分</a> 
<a name="content">这里是CONTENT部分</a> 
<a name="foot">这里是FOOT部分</a>
Nach dem Login kopieren

(Sie können das id-Attribut anstelle des name-Attributs verwenden. Benannte Anker sind ebenfalls gültig.)

Es gibt zwei Methoden, um auf die oben genannten Punkte zuzugreifen Ankerpunkte

Eine Möglichkeit besteht darin, das Hyperlink-Tag zu verwenden, um einen Ankerlink zu erstellen, der hauptsächlich für den Ankerzugriff innerhalb der Seite verwendet wird

<a href="#top">点击我链接到TOP</a> 
<a href="#content">点击我链接到CONTENT</a> 
<a href="#foot">点击我链接到FOOT</a>
Nach dem Login kopieren

Die andere Möglichkeit besteht darin, das Anker-Tag hinzuzufügen direkt nach der Seitenadresse, die hauptsächlich für den Ankerzugriff zwischen verschiedenen Seiten verwendet wird

Wenn die Adresse dieser Seite http://file path/index.html lautet, greifen Sie einfach auf den folgenden Link zu, um auf den Fußanker zuzugreifen

http://文件路径/index.html#foot
Nach dem Login kopieren

html Was genau ist der Ankerpunkt?

Vereinfacht ausgedrückt: Wenn Sie beispielsweise einen sehr langen Artikel segmentweise genau lesen möchten, können Sie Ankerpunkte verwenden.

Code:

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" ></a> 
...文字省略
Nach dem Login kopieren

Tatsächlich muss dem Ankerpunkt nur der Name hinzugefügt werden, um die Kompatibilität zu verbessern.

Der href-Wert muss mit dem Namen / der ID übereinstimmen und „#“ muss vorangestellt werden. Der obige Code ist mit ie6/7 und ff kompatibel, jedoch nicht mit ie8.

Da der -Wert unseres Ankerpunkts leer ist, können wir einfach ein Leerzeichen hinzufügen, um die Ästhetik nicht zu beeinträchtigen

Der folgende Code ist mit ie8 kompatibel

<a href="#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略
Nach dem Login kopieren

Another Frage, ich möchte: Wie wäre es mit der Anzeige eines Ankerinhalts einer bestimmten Seite (z. B. 123.html)?

Der Code lautet wie folgt:

<a href="123.html#001">跳到001</a> 
...文字省略 
<a name="001" id="001" > & n b s p </a> 
...文字省略
Nach dem Login kopieren

Das war gestern, als ich am Hintergrund gearbeitet habe, ich wollte die „Positionierung“ ändern, also habe ich die Ankermarkierung entfernt (normalerweise vergesse ich sie).

Aber das Programm sagte, dass in der Verbindung ein „?“ oder „&“ stehen muss, um den Wert zu erhalten, also ist mein Ankerpunkt inkompatibel ...

Haha! Es wird in Zukunft eine Lösung geben!

Obwohl es bei JSP-Seiten ein Problem mit der Ankerpunktkompatibilität gibt, gibt es bei statischen Seiten kein Problem und es lohnt sich trotzdem, es zu lernen!

Bei der WEB-Entwicklung werden Seitenanker verwendet.

HTML-Seitenanker werden verwendet, um auf einen bestimmten Abschnitt einer Seite zu verlinken. Laut W3School werden beim Erstellen von Ankern das Tag und das Namensattribut verwendet. Dies ist jedoch nicht die einzige Möglichkeit, Seitenanker zu erstellen. Lassen Sie uns kurz über zwei Möglichkeiten sprechen, HTML-Seitenanker zu erstellen.

Wir können zum Testen das Online-Testtool von W3School verwenden. Der Testcode verwendet nach dem Öffnen des Links und und es gibt kein Problem im Test. Ändern Sie dann „

Erklärung: Zusätzlich zur Verwendung des Namensattributs des Ankertags können Sie beim Erstellen eines Seitenankers auch das ID-Attribut verwenden. Der Wert des href-Attributs im Anker--Tag ist der Wert, der mit # beginnt, plus dem Namen oder der ID des Ziels:

Lernvideo-Freigabe: css-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist ein Ankerpunkt in HTML?. 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