So verwenden Sie Anker in HTML-Webseiten

Dieses Mal zeige ich Ihnen, wie Sie Anker in HTML-Webseiten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Ankerpunkten in HTML-Webseiten gelten. Hier sind praktische Fälle Schauen Sie gemeinsam rein. Schauen Sie mal rein.

Anchor ist eine Art Hyperlink in der Webseitenproduktion, auch benannter Anker genannt. Ein benannter Anker ist ein Hyperlink innerhalb einer Seite, ähnlich einer Schnellsuche, und wird häufig verwendet.
Englischer Name: Anker
Verwenden Sie benannte Anker, um Tags im Dokument festzulegen. Diese Tags werden normalerweise an einem bestimmten Thema oder oben im Dokument platziert. Anschließend können Links zu diesen benannten Ankern erstellt werden, die Besucher schnell zum angegebenen Ort führen.
Das Erstellen eines Links zu einem benannten Anker ist ein zweistufiger Prozess. Erstellen Sie zunächst einen benannten Anker und dann einen Link zum benannten Anker.
Beispielcode
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 verwenden, um das zu ersetzen benennen Sie das Attribut und benennen Sie es [1])
Es gibt zwei Methoden für den Zugriff auf die oben genannten Anker
Eine besteht darin, das Hyperlink-Tag3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed zu verwenden . , wird hauptsächlich für den Ankerpunktzugriff innerhalb der Seite verwendet

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

Die andere Möglichkeit besteht darin, den Ankertag direkt nach der Seitenadresse hinzuzufügen, der hauptsächlich für den Ankerpunktzugriff zwischen verschiedenen Seiten verwendet wird
Wenn die Adresse dieser Seite http://file path/index.html lautet, greifen Sie zum Zugriff auf den Fußanker einfach auf den folgenden Link
http://file path/index.html#foot
2.html zu Was genau machen Ankerpunkte?
Vereinfacht ausgedrückt: Wenn Sie beispielsweise einen 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 benötigt der Ankerpunkt nur einen Namen. Die ID wird hinzugefügt, um die Kompatibilität zu verbessern.
Der Wert von href muss mit dem Namen i übereinstimmen d. „#“ muss vorangestellt werden. Der obige Code ist in ie6/7 und ff kompatibel, jedoch nicht in 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> 
...文字省略

Noch eine Frage: Möchten Sie einen bestimmten Ankerinhalt einer bestimmten Seite anzeigen (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 „Positionierung ändern“ implementieren, also habe ich die Ankermarkierung nach außen verschoben (normalerweise). ist von mir vergessen).
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!
3. Bei der WEB-Entwicklung werden Seitenanker verwendet. HTML-Seitenanker werden verwendet, um auf einen 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.
Zum Testen können wir das Online-Testtool von W3School verwenden. Der Testcode verwendet nach dem Öffnen des Links fcbea58d2faf4985bbb60ccec2038694 und e359a43dd31c2ec0bd100aac4c3f36ab, und im Test gibt es kein Problem. Ändern Sie dann „c1a436a314ed609750bd7c7d319db4da 48851e4b56484cc136ed2820d56732caKapitel 4 5db79b134e9f6b82c0b36e0489ee08ed 2e9b454fa8428549ca2e64dfac4625cd" in „6df6139f728e20ad509be83df8b61d6aKapitel 4 2e9b454fa8428549ca2e64dfac4625cd". Nach dem Test ist der Effekt derselbe.
Beachten Sie, dass Sie beim Erstellen eines Seitenankers zusätzlich zur Verwendung des Namensattributs des Ankertags auch das ID-Attribut verwenden können. Der Wert des href-Attributs im Anker3499910bf9dac5ae3c52d5ede7383485-Tag beginnt mit # plus dem Wert des Namens oder der ID des Ziels:

Code kopieren

Der Code lautet wie folgt:

<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>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Welche Symbole gibt es zum Markieren von Textkommentaren in HTML?

Wie implementiert man ein HTML- wie Befehlszeilenschnittstelle

html+css+javascript So implementieren Sie das zirkuläre Scrollen von Listen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Anker in HTML-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!