Oben: Markup -Sprache - Phrasenelemente
Originalquelle Kapitel 7 Ankerpunkt
Die richtige Möglichkeit zu sagen, dass Links in HTML Anchors genannt werden. Sie erlauben uns nicht nur auf Dokumente, sondern auch auf bestimmte Absätze auf der Seite und können auch als bequemes Werkzeug für präzise Links verwendet werden. Lassen Sie das Link -Objekt dem Fokus näher kommen. In diesem Kapitel werden vier verschiedene Ankerpraktiken angezeigt, die die Vorteile jeder Methode erklären und auch vorstellen, wie das Titelattribut die einfache Verwendung von Links verbessern kann. Darüber hinaus werden wir CSS auch verwenden, um Stile für Links zu entwerfen. Wenn Sie einen bestimmten Teil der Seite angeben müssen, ist das Markieren von Ankern der beste Weg, dies zu tun.
Dies ist eine häufige Situation beim Entwerfen einer Website. Sie möchten zu einem bestimmten Teil einer bestimmten Seite verlinken, der Benutzer kann jedoch auf einer anderen Seite lesen. Wählen Sie eine der vier als neben Diskussion diskutierten Methoden, um Ihr Ziel zu erreichen.
Nehmen wir im Beispiel an, wir beabsichtigen, auf derselben Seite zu einem bestimmten Titel zu verlinken: Methode A: Der Name des Lochs
<p> <a href =#oranges> Über Orangen </a> </p>
... ein Text ...
<a name = oranges> </a>
<h2> Orangen sind lecker </h2>
... mehr Text ...
Verwenden Sie ein Anker -Tag mit leerem Inhalt und einem Namensattribut, um einen bestimmten Linkpunkt zu markieren. Vielleicht ist dies die Methode, mit der Sie vertraut sind. Stellen Sie einen leeren Inhalt vor den Titel und verbinden Sie ihn (mit dem # Symbol, gefolgt vom Wert des Namensattributs), mit dem wir eine Verbindung zu einem bestimmten Teil der Seite herstellen können. Wenn die Seite eine lange Liste von Elementen enthält, die gescrollt werden müssen, können wir durch diese Methode problemlos eine Verbindung zu einem bestimmten Projekt herstellen.
Abbildung 7-1 zeigt das Ergebnis nach dem Klicken auf den Link About Oranges, was bedeutet, zu dem Ort zu springen, den wir identifizieren <a name = oranges> </a>, was genau auf dem Titel steht.
Abbildung 7-1. Beispiel für das Klicken, um eine Verbindung zum bestimmten Ankerlink herzustellen
Der Effekt ist gut, aber ein leeres Tag zu verschwenden, um den Link -Standort zu identifizieren, ist ein wenig inkonsistent mit der Semantik. Methode B kann dies verbessern. Methode B: Alles innerhalb des Namens
<p> <a href =#oranges> Über Orangen </a> </p>
... ein Text ...
<H2> <a name = orangen> orangen sind lecker </a> </h2>
... mehr Text ...
Wie bei Methode A verwenden wir das <a> Tag mit dem Namensattribut immer noch, aber diesmal wickeln wir es außerhalb des Titels, auf den ich verlinkt möchte. Das sieht semantischer aus. In Methode A ist unser Verbindungsobjekt ... nun, es gibt nichts, aber in Methode B erklären wir nicht nur, dass dieser Text Teil des Titel -Tags ist, sondern auch eine der Verbindungsanker dieser Seite. Achten Sie auf den globalen Stil von <a>
Wenn Methode B verwendet wird, müssen Sie einen Ort achten. Wenn Sie globale CSS -Stile für alle <a> Elemente (Farbe, Textgröße, Textdekoration usw.) angeben, überschreiben diese Stile die Stile, die Sie für <h2> Elemente angeben. Der Grund dafür ist, dass das <a> Tag in diesem Beispiel ein untergeordnetes Element im <H2> -Tag ist, das es umgibt.
Wenn Sie beispielsweise eine solche Aussage in Ihrem CSS haben:
A{
Farbe: grün;
Schriftgewicht: fett;
Textdekoration: Unterstreichung;
}
Die Methode B und dieses CSS machen den Titel grün, fett und unterstrichen wie das <a> auf anderen Seiten, möglicherweise anders als der von Ihnen erwartete <H2> -Stil.
Wir können die: Link Pseudo-Klasse von <a> verwenden, um dieses Phänomen zu vermeiden (und auch andere Vorteile zu erzielen), das später in diesem Kapitel ausführlich erörtert wird. Reichere Namensattribute
Einer der Vorteile der Verwendung von Methode B (und Methode A) besteht darin, dass das Namensattribut mehr vorhandene Ankernamen verarbeiten kann. Insbesondere ist es die Fähigkeit, Symbole im Namen zu verwenden
Wenn Sie beispielsweise die Methode B verwenden, können Sie dies tun (hier repräsentiert das Symbol e):
<p> <a href =#resum é> Mein Resum é </a> </p>
... ein Text ...
<H2> <a name = resum é> dan's resum é </a> </h2>
... mehr Text ...
Diese Funktion ist sehr wichtig, wenn sie mit Zeichen zu tun haben, die nicht zu englischen Briefen gehören.
Aber es gibt mehrere erwähnte Methoden. Die folgende Methode erfordert nicht die Verwendung von <a>, um den Ankerpunkt festzulegen. Schauen wir uns die Methode C an C an.
Methode C: den Namen verwerfen
<p> <a href =#oranges> Über Orangen </a> </p>
... ein Text ...
<H2 ID = Orangen> Orangen sind lecker </h2>
... mehr Text ...
Ah, die Funktion des ID -Attributs entspricht dem Namensattribut, das auch Ankerpunkte für die Seite angeben kann. Zusätzlich verwendet Methode C die Methode A und B auch das Namensattribut als zusätzliches <a> Tag. Wir haben den Quellcode reduziert, was schon immer eine gute Sache war.
Da das ID -Attribut jedem Tag hinzugefügt werden kann, können wir jedem Element auf der Seite leicht Anker hinzufügen. In diesem Beispiel fügen wir dem Titel Anker hinzu, können jedoch auch leicht Anker zu <div>, <form>, <p>, <ul> ... und allen anderen Tags hinzufügen. Einer töten zwei Vögel mit einem Vogel
In den meisten Fällen können wir dem bereits bestehenden ID -Attribut Stile hinzufügen oder Scripting -Scripting hinzufügen. Daher müssen wir keinen zusätzlichen Code hinzufügen, um nur den Anker festzulegen.
Nehmen wir beispielsweise an, dass Sie über ein Formular verfügen, um Kommentare am Ende einer langen Seite zu hinterlassen, und möchten einen Link zum oberen Rand der Seite hinzufügen. Dieses Formular enthält ID = Kommentare, um einen eindeutigen Stil anzugeben. Auf diese Weise können wir IDs direkt als Anker anschließen, ohne ein <a> Tag mit dem Namensattribut hinzuzufügen.
Der Code sieht so aus:
<p> <a href =#Kommentare> Fügen Sie einen Kommentar hinzu! </a> </p>
... viele Text ...
<form id = comments action =/path/to/script>
... Formularelemente ...
</form>
Wenn Ihre Seite lang ist, fügen Sie unten einen Link hinzu, damit der Benutzer nach oben zurückkehren kann.
Erwähnenswert ist erwähnenswert, dass es zwar sehr geeignet aussieht, es jedoch am besten vermeiden kann, Top bei der Angabe von Ankernamen zu verwenden. Einige Browser behalten diesen Namen für besondere Zwecke. Die Verwendung dieses Namens kann zu inkonsistenten Ergebnissen führen. Es ist am besten, einen ähnlichen Namen zu wählen, aber keine Probleme verursacht. Vielleicht #Gemesis verwenden? Oder #ut Meiste? Sie haben Ihre eigene Idee.
Alter Browser mit ID -Attributen
Wenn nur das ID -Attribut als Anker verwendet wird, gibt es einen wichtigen Nachteil erwähnenswert, dh einige alte Browser unterstützen diese Methode nicht. Oh, dies ist in der Tat ein Muss, der bei der Identifizierung Ihres eigenen Ankers in Betracht gezogen wird, und es ist auch ein unglückliches Beispiel für die Vorwärtskompatibilität. Schauen wir uns das letzte Beispiel an, Methode D. Methode D: zusammen
<p> <a href =#oranges> Über Orangen </a> </p>
... ein Text ...
<H2> <a id = oranges name = oranges> orangen sind lecker </a> </h2>
... mehr Text ...
Wenn Sie beim Markieren von Ankern eine Vorwärtskompatibilität und Rückwärtskompatibilität erreichen möchten, werden Sie diese Methode wahrscheinlich mögen. Sowohl alte als auch zukünftige Browser können korrekt benannte Anchor -Tags identifizieren. Da W3C jedoch nicht das Namensattribut (http://www.w3.org/tr/xhtml1/#c_8) in der Empfehlung xHtml1.0 nicht empfiehlt, verwenden Sie auch die ID -Attribut, um zukünftige Browser zu unterstützen.
Gleich wie die Methode B müssen wir auf den globalen Stil achten, der das <a> Tag beeinflusst.
Gemeinsamer Name
Wenn Sie die Methode D verwenden, ist es akzeptabel, denselben Namen für die Attribute für ID und Name zu wählen (möglicherweise sehr bequem). Dies ist jedoch nur möglich, wenn sie sich auf demselben Tag befinden. Darüber hinaus gibt es nur wenige spezifische Tags, die dies zulassen, die genau sein, was <a>, <Applet>, <Reframe>, <Map>, <Map> umfasst. Daher verschieben wir ID = Orangen von <h2> zum Anker -Tag.
Nachdem wir vier Methoden zur Festlegung von Ankerpunkten gesehen haben, fassen wir die Vor- und Nachteile jeder Methode zusammen.
Vorherige Seite 1 2 3 Nächste Seite Lesen Sie den vollständigen Text