Heim Web-Frontend Front-End-Fragen und Antworten Was ist ein Ankerpunkt in HTML?

Was ist ein Ankerpunkt in HTML?

May 12, 2021 pm 03:11 PM
html Ankerpunkt

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles