Auszeichnungssprache - Anker
|
Zurück: Markup Language - Phrasenelemente Originalquelle Kapitel 7 Anker Der korrekte Begriff für Links in HTML ist „Anker“. Sie ermöglichen es uns nicht nur, auf Dokumente zu verweisen, sondern auch auf bestimmte Absätze einer Seite. Sie können auch als praktisches Werkzeug für „präzise Links“ verwendet werden. Lassen Sie das Linkobjekt in der Nähe des Fokus sein. In diesem Kapitel werden wir uns vier verschiedene Ankermethoden ansehen, die Vorteile jeder Methode erklären und vorstellen, wie das Titelattribut die Benutzerfreundlichkeit von Links verbessern kann. Darüber hinaus werden wir CSS verwenden, um Links zu gestalten. Wenn Sie einen bestimmten Teil der Seite angeben müssen, ist das Markieren von Ankern die beste Methode. Dies ist eine häufige Situation beim Entwerfen einer Website. Sie möchten auf einen bestimmten Teil einer Seite verlinken, aber der Benutzer liest möglicherweise auf einer anderen Seite. Jede der vier unten beschriebenen Methoden kann Ihnen helfen, Ihr Ziel zu erreichen. In diesem Beispiel möchten wir auf einen bestimmten Titel innerhalb derselben Seite verlinken: Methode A: Leerer Titel
Verwenden Sie ein leeres Anker-Tag mit einem Namensattribut, um einen bestimmten Linkpunkt zu markieren. Vielleicht sind Sie mit dieser Methode vertraut. Wenn wir vor den Titel ein leeres <a> setzen und darauf verlinken (mit dem Symbol #, gefolgt vom Wert des Namensattributs), können wir auf einen bestimmten Teil der Seite verlinken. Wenn die Seite eine lange Liste von Elementen enthält, die gescrollt werden müssen, können wir diese Methode verwenden, um auf ein bestimmtes Element zu verlinken. Abbildung 7-1 zeigt das Ergebnis, wenn wir auf den Link „Über Oranges“ klicken. Dadurch gelangen wir zu der Stelle, an der wir <a name="oranges"></a> markiert haben, direkt über dem Titel.  Abbildung 7-1. Das Klicken auf einen bestimmten Ankerlink funktioniert gut, aber es ist etwas unsemantisch, ein leeres Label zu verschwenden, um die Linkposition zu markieren. Methode B kann dies verbessern. Methode B: Alles im Namen
Wie bei Methode A verwenden wir noch immer das <a>-Tag mit dem Namensattribut, aber dieses Mal umschließen wir es mit dem Titel, auf den ich verlinken möchte. Dies scheint tatsächlich semantischer zu sein. Bei Methode A ist unser Linkobjekt... nun ja, nichts, aber bei Methode B geben wir nicht nur an, dass dieser Text Teil des Titel-Tags ist, sondern auch einer der Link-Anker auf dieser Seite. Seien Sie vorsichtig mit globalen Stilen von <a>. Wenn Sie Methode B verwenden, gibt es eine Sache, bei der Sie vorsichtig sein müssen. Wenn Sie globale CSS-Stile für alle <a>-Elemente angeben (Farbe, Textgröße, Textdekoration usw.), überschreiben diese Stile die Stile, die Sie für das <h2>-Element angeben. Der Grund dafür ist, dass in diesem Beispiel das <a>-Tag ein untergeordnetes Element des <h2>-Tags ist, das es umgibt. Wenn Ihr CSS beispielsweise eine Deklaration wie diese enthält:
Methode B mit diesem CSS macht den Titel grün, fett und unterstrichen wie die anderen <a>-Tags auf der Seite, er kann sich aber vom erwarteten <h2>-Stil unterscheiden. Um dies zu vermeiden (und auch andere Vorteile zu erzielen), können wir die :link-Pseudoklasse von <a> verwenden, wie im Abschnitt „Erweiterte Techniken“ weiter unten in diesem Kapitel ausführlicher erläutert wird. Umfangreichere Namensattribute Einer der Vorteile der Verwendung von Methode B (sowie von Methode A) besteht darin, dass das Namensattribut umfangreichere Ankernamen verarbeiten kann, insbesondere die Möglichkeit, Symbole innerhalb des Namens zu verwenden. Mit Methode B könnten Sie beispielsweise Folgendes tun (wobei & das Symbol „e“ darstellt):
Diese Funktion ist sehr wichtig, wenn Sie mit Zeichen arbeiten, die nicht zum englischen Alphabet gehören. Es gibt jedoch einige erwähnenswerte Methoden. Bei der folgenden Methode ist die Verwendung von <a> zum Festlegen des Ankerpunkts nicht erforderlich. Sehen wir uns Methode C an. Methode C: Den Namen verlieren
Ahaha, das ID-Attribut funktioniert genau wie das Name-Attribut und kann auch einen Anker für eine Seite angeben. Darüber hinaus eliminiert Methode C das zusätzliche <a>-Tag, das die Methoden A und B benötigten, um das Name-Attribut zu verwenden. Wir haben den Quellcode reduziert, was immer eine gute Sache ist. Da das ID-Attribut zu jedem Tag hinzugefügt werden kann, können wir problemlos Anker zu jedem Element hinzufügen, das wir auf der Seite benötigen. In diesem Beispiel haben wir uns entschieden, Anker zum Titel hinzuzufügen, aber wir können genauso einfach Anker zu <div>, <form>, <p>, <ul>... und allen anderen Tags hinzufügen. Zwei Fliegen mit einer Klappe schlagen Die Tatsache, dass wir in den meisten Fällen Stile oder Skripts zu bereits vorhandenen ID-Attributen hinzufügen können, ist ein weiterer Vorteil von Methode C. Aus diesem Grund müssen wir keinen zusätzlichen Code hinzufügen, nur um den Anker zu setzen. Angenommen, Sie haben ein Formular zum Hinterlassen von Kommentaren am Ende einer langen Seite und möchten es mit dem Anfang der Seite verknüpfen. Das Formular hat die ID „comments“ erhalten, um eine eindeutige Gestaltung zu gewährleisten. So können wir die ID als Anker verwenden, anstatt ein <a>-Tag mit einem Namensattribut hinzufügen zu müssen. Der Code könnte ungefähr so aussehen:
Wenn Ihre Seite lang ist, möchten Sie möglicherweise außerdem unten einen Link einfügen, der zum oberen Anker führt, damit die Benutzer „wieder zum Anfang gelangen“ können. Es ist erwähnenswert, dass es zwar sehr angemessen erscheint, aber am besten ist, die Verwendung von „top“ bei der Angabe des Ankernamens zu vermeiden. Einige Browser reservieren diesen Namen für besondere Zwecke, und die Verwendung dieses Namens kann zu inkonsistenten Ergebnissen führen. Es ist besser, einen ähnlichen Namen zu wählen, der keine Probleme verursacht. Vielleicht #gemesis? Oder #utmost? Sie entscheiden. Alte Browser und ID-Attribute Wenn Sie nur das ID-Attribut als Anker verwenden, gibt es einen wichtigen Nachteil, der erwähnt werden sollte: Einige alte Browser unterstützen diese Methode nicht. Ups, das ist tatsächlich ein Problem, das bei der Identifizierung Ihrer eigenen Anker berücksichtigt werden muss, und es ist auch ein unglückliches Beispiel für Vorwärtskompatibilität. Schauen wir uns das letzte Beispiel an, Methode D. Methode D: Zu einem kombinieren
Wenn Sie beim Markieren Ihrer Anker sowohl Vorwärts- als auch Rückwärtskompatibilität erreichen möchten, ist dieser Ansatz wahrscheinlich die bessere Wahl. Benannte Anker-Tags werden sowohl von alten als auch von neuen Browsern korrekt erkannt. Da das W3C jedoch die Verwendung des Name-Attributs in der XHTML 1.0-Empfehlung ( http://www.w3.org/TR/xhtml1/#C_8 ) abgelehnt hat, müssen Sie zur Unterstützung zukünftiger Browser auch das ID-Attribut verwenden. Wie bei Methode B müssen wir auf die globalen Stile achten, die das <a>-Tag beeinflussen. Gemeinsame Namen Wenn Sie Methode D verwenden, ist es vollkommen akzeptabel (und wahrscheinlich praktisch), für die ID- und Namensattribute denselben Namen zu verwenden, aber nur, wenn sie sich im selben Tag befinden. Darüber hinaus erlauben dies nur einige wenige bestimmte Tags, nämlich <a>, <applet>, <frame>, <img>, <map>. Daher verschieben wir id="oranges" aus <h2> in den Ankertag. Vorherige Seite 1 2 3 Nächste Seite Mehr lesen |
>>: Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
Artikel empfehlen
Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen
Inhaltsverzeichnis 1 Versprechen Unterbrechen Sie...
Design Association: Warum haben Sie am falschen Ort gesucht?
Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...
Detaillierte Erklärung zur Verwendung von MySQL, wobei
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL
Als ich vor einiger Zeit an einer kleinen Funktio...
Verwenden Sie Tomcat, um die gemeinsam genutzte Bibliothek so einzurichten, dass sie dasselbe JAR teilt.
Da immer mehr Projekte bereitgestellt werden, wer...
Detailliertes Tutorial zur Installation von OpenStack Ussuri in CentOS8 mit minimaler Bereitstellung
Das Tutorial zur Installation von OpenStack Ussur...
IIS7 IIS8 Reverse-Proxy-Regeln schreiben, installieren und konfigurieren
Zweck: Station A als sekundäres Verzeichnis von S...
HTML-Code Textfeld Eingabe begrenzen Textfeld wird grau Textfeldeingabe begrenzen
Methode 1: Setzen Sie das schreibgeschützte Attrib...
Erste Schritte Tutorial für Anfänger ⑨: So erstellen Sie eine Portal-Website
Darüber hinaus wird eine mit einem Blog-Programm e...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
Details zur Verwendung des Vue-Slots
Inhaltsverzeichnis 1. Warum Slots verwenden? 1.1 ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.11
Ich habe vor Kurzem angefangen, mich mit Datenban...
Detaillierte Erläuterung des Nest.js-Hashing- und Verschlüsselungsbeispiels
0x0 Einführung Zunächst einmal: Was ist ein Hash-...
Detaillierte Erklärung der neuen Erfahrung von Vite
Was ist Vite? (Es ist ein neues Spielzeug im Fron...
Detaillierte Erklärung der Beziehung zwischen Linux- und GNU-Systemen
Inhaltsverzeichnis Was ist das Linux-System, das ...