Was ist ein Ankerpunkt in HTML?

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.

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>

(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 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed 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>

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

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> 
...文字省略

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 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed-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> 
...文字省略

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> 
...文字省略

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 3499910bf9dac5ae3c52d5ede7383485 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 fcbea58d2faf4985bbb60ccec2038694 und e359a43dd31c2ec0bd100aac4c3f36ab und es gibt kein Problem im Test. Ändern Sie dann „c1a436a314ed609750bd7c7d319db4da 48851e4b56484cc136ed2820d56732caKapitel 4 5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd" in „6df6139f728e20ad509be83df8b61d6aKapitel 4 2e9b454fa8428549ca2e64dfac4625cd". Nach dem Test ist der Effekt derselbe.

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-3499910bf9dac5ae3c52d5ede7383485-Tag ist der Wert, der mit # beginnt, plus dem Namen oder der ID des Ziels:

<html> 
<body> 
<p> 
<a href="#method1">页面锚点方法一</a> 
</p> 
<p> 
<a href="#method2">页面锚点方法二</a> 
</p> 
<h2><a name="method1">方法一</a></h2> 
<p>使用锚标签的 href 和 name 属性</p> 
<h2 id="method2">方法二</h2> 
<p>使用锚标签和 id 属性</p> 
</body> 
</html>

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!