Einführung in die Verwendung von Ankern (benannte Anker) in HTML-Webseiten
|
Die folgenden Informationen sind aus dem Internet zusammengestellt 1. Ein Anker ist eine Art Hyperlink bei der Erstellung von Webseiten, auch benannter Anker genannt . Ein benannter Anker ist ein Hyperlink innerhalb einer Seite, wie ein Schnelllokalisierer, und wird häufig verwendet. Englischer Name: anchor Benannte Anker ermöglichen Ihnen das Setzen von Markierungen in Ihrem Dokument, die meist an oder über einem bestimmten Thema im Dokument platziert werden. Sie können dann Links zu diesen benannten Ankern erstellen, die Besucher schnell zum angegebenen Ort führen. Das Erstellen eines Links zu einem benannten Anker ist ein zweistufiger Prozess. Erstellen Sie zuerst einen benannten Anker und dann einen Link zu dem benannten Anker. Beispielcode Definieren Sie an der entsprechenden Stelle der HTML-Seite folgenden Anker: <a name="top">Dies ist der OBERSTE Teil</a> <a name="content">Dies ist der Abschnitt „INHALT“</a> <a name="foot">Dies ist der FOOT-Teil</a> (Sie können ein ID-Attribut anstelle eines Name-Attributs verwenden; benannte Anker funktionieren auch. [1]) Es gibt zwei Möglichkeiten, auf die oben genannten Ankerpunkte zuzugreifen. Eine besteht darin, das Hyperlink-Tag <a></a> zu verwenden, um einen Ankerlink zu erstellen, der hauptsächlich für den Zugriff auf Ankerpunkte innerhalb der Seite verwendet wird. <a href="#top">Klicken Sie hier, um zum TOP zu gelangen</a> <a href="#content">Klicken Sie hier, um zum INHALT zu gelangen</a> <a href="#foot">Klicken Sie hier, um zu FOOT zu gelangen</a> Eine andere Möglichkeit besteht darin, direkt nach der Seitenadresse ein Anker-Tag hinzuzufügen, das hauptsächlich für den Ankerzugriff zwischen verschiedenen Seiten verwendet wird. Wenn die Adresse dieser Seite http://Dateipfad/index.html lautet, besuchen Sie zum Zugriff auf den Fußanker einfach den folgenden Link http://Dateipfad/index.html#foot 2. Wofür genau wird der HTML-Anker verwendet? Einfach ausgedrückt: Wenn Sie einen langen Artikel absatzgenau lesen möchten, können Sie Ankerpunkte verwenden. Code: <a href="#001">Zu 001 springen</a> ...Text ausgelassen <a name="001" id="001" ></a> ...Text ausgelassen Tatsächlich benötigt der Anker nur einen Namen und das Hinzufügen einer ID dient dazu, ihn kompatibler zu machen. Der Wert von href muss mit Name \ id übereinstimmen und davor muss ein "#" hinzugefügt werden. Der obige Code ist mit IE6/7, FF kompatibel, aber nicht mit IE8. Da der Wert unseres Ankerpunkts <a></a> leer ist, fügen wir einfach ein Leerzeichen hinzu, um das Erscheinungsbild nicht zu beeinträchtigen. Der folgende Code ist mit IE8 kompatibel <a href="#001">Zu 001 springen</a> ...Text ausgelassen <a name="001" id="001" > & nbsp </a> ...Text ausgelassen Eine andere Frage: Was ist, wenn Sie den Inhalt eines bestimmten Ankerpunkts einer bestimmten Seite anzeigen möchten (z. B.: 123.html)? Der Code lautet wie folgt <a href="123.html#001">Zu 001 springen</a> ...Text ausgelassen <a name="001" id="001" > & nbsp </a> ...Text ausgelassen Das passierte gestern, als ich am Hintergrund arbeitete. Ich wollte „Positionierung ändern“ implementieren, also habe ich die Ankermarkierung verschoben (normalerweise vergesse ich das). Aber das Programm sagt, dass sie den Wert abrufen müssen und in der Verbindung ein „?“ oder „&“ enthalten sein muss, daher ist mein Ankerpunkt inkompatibel … hehe! Es wird später eine Lösung geben! Obwohl es bei JSP-Seiten Probleme mit der Ankerkompatibilität gibt, gibt es bei statischen Seiten keine Probleme. Es lohnt sich also trotzdem, es zu lernen! 3. Bei der Web-Entwicklung werden Seitenanker verwendet . HTML-Seitenanker werden zum Verlinken auf einen Abschnitt einer Seite verwendet. Laut W3School werden zum Erstellen von Ankern das Tag <a> (Anker) und das Namensattribut verwendet. Dies ist jedoch nicht die einzige Möglichkeit zum Erstellen eines Seitenankers. Hier sind zwei Möglichkeiten zum Erstellen von HTML-Seitenankern. Zum Testen können wir das Online-Testtool von W3School verwenden. Der Testcode verwendet nach dem Öffnen des Links <a href="#C4"> und <a name="C4"> und der Test weist kein Problem auf. Ändern Sie dann „ <h2> <a name=”C4″>Kapitel 4 </a> </h2>“ in „ <h2 id=”C4″>Kapitel 4 </h2>“ und testen Sie es, der Effekt ist derselbe. Hinweis: Zusätzlich zur Verwendung des Name-Attributs des Anker-Tags können Sie auch das ID-Attribut verwenden, um einen Seitenanker zu erstellen. Der Wert des href-Attributs im Ankertag <a> beginnt mit #, gefolgt vom Namen oder der ID des Ziels: Code kopieren Der Code lautet wie folgt:<html> <Text> <p> <a href="#method1">Seitenankermethode 1</a> </p> <p> <a href="#method2">Seitenankermethode 2</a> </p> <h2><a name="method1">Methode 1</a></h2> <p>Verwenden Sie die href- und Name-Attribute des Anker-Tags</p> <h2 id="method2">Methode 2</h2> <p>Verwenden von Anker-Tags und ID-Attributen</p> </body> </html> |
<<: Mehrere Methoden zur horizontalen und vertikalen Zentrierung von Div-Inhalten mit CSS3 Flex
>>: Sechs Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten
Artikel empfehlen
Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden
Inhaltsverzeichnis Umfeld Zusammenfassung Modul F...
HTML-Tabellen-Markup-Tutorial (39): Das helle Rahmenfarbattribut der Kopfzeile BORDERCOLORLIGHT
Im Tabellenkopf können Sie die Farbe der hellen U...
Detaillierte Erläuterung der Lösung zur festen Positionierung von CSS-Unterelementen relativ zum übergeordneten Element
Grundlegende Konzepte Absolute Positionierung: Ei...
Detaillierte Erläuterung des Installationsprozesses von msf auf einem Linux-System
Oder schreiben Sie den Installationsvorgang selbs...
nginx generiert automatisch Konfigurationsdateien im Docker-Container
Wenn ein Unternehmen eine automatisierte Docker-B...
Beste Möglichkeit, den Schlüssel im JSON-Objekt zu ersetzen
JSON (JavaScript Object Notation, JS Object Notat...
So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis
Im vorherigen Artikel habe ich das ausführliche T...
Referenzen und Referenzdetails in Vue3
Der Editor teilt Ihnen auch die entsprechenden Pr...
Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker
Text 1) Laden Sie das Ubuntu-Image herunter Docke...
Einige Schlussfolgerungen zur Entwicklung mobiler Websites
Die mobile Version der Website sollte zumindest ü...
Navicat für MySQL-Tutorial
Zuerst müssen Sie Navicat für MySQL herunterladen...
Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)
Inhaltsverzeichnis Einführung Beispiel: Ereignisd...
So fügen Sie Nginx dynamisch Module hinzu
Vorne geschrieben Nachdem wir Nginx basierend auf...
Detaillierte Erläuterung des Problems, dass der Speicherplatz nach dem Löschen der Linux-Datei nicht freigegeben wird
Vorwort Wenn der Systemspeicherplatz zu groß ist ...
So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL
Vorwort Hinweis: Die Testdatenbankversion ist MyS...