Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erläuterung des Unterschieds zwischen rel und target des links_Experience-Austauschs

Detaillierte Erläuterung des Unterschieds zwischen rel und target des links_Experience-Austauschs

WBOY
Freigeben: 2016-05-16 12:05:34
Original
1915 Leute haben es durchsucht

Ob die Existenz von target="_blank" notwendig ist oder nicht, ich denke, es gibt immer noch viele Menschen im blinden Fleck. Ich habe die relevante Literatur überprüft und festgestellt, dass die Situation nicht unseren Vorstellungen entspricht. Tatsächlich ist target="_blank" nicht minderwertig und die Verwendung von rel und JS ist nicht erforderlich, da dies ein Missverständnis ist Wenn wir die wahre Bedeutung von rel und target kennen, verstehen wir, dass es hier keine Kontroversen geben sollte. Im Folgenden teile ich mit Ihnen die Erkenntnisse, die ich durch die Durchsicht der Literatur gewonnen habe. Lassen Sie uns zunächst die Bedeutung von target und rel verstehen:

target ermöglicht es Ihnen, anzugeben, wo der ausgewählte Hyperlink-Inhalt angezeigt werden soll. Das heißt, in welchem ​​Fenster der verlinkte Inhalt angezeigt wird. Der Attributwert von target hat vier reservierte Namen, nämlich: _blank, _self, _parent, _top. _blank bedeutet, dass der Browser das durch target="_blank" verlinkte Dokument immer in einem neu geöffneten, unbenannten Fenster lädt. Möglicherweise verstehen Sie nicht, was „unbenannt“ hier bedeutet. Tatsächlich kann Target dem neu geöffneten Fenster eine ID zuweisen, zum Beispiel: target="name". Dies bedeutet, dass das über den Link "target="name" geladene Dokument in einem Fenster mit dem Namen "name" angezeigt wird. Wenn kein Fenster mit der ID „name“ vorhanden ist, erstellt der Browser ein neues Fenster mit dem Namen „name“, um das verknüpfte Dokument anzuzeigen. Wenn die ID des aktuellen Fensters „name“ lautet, wird das verknüpfte Dokument im aktuellen Fenster angezeigt und ersetzt den ursprünglichen Inhalt. Und _self bedeutet eigentlich das aktuelle Dokument. Das Standardziel von ist _self. Dieser Attributwert wird im Allgemeinen nicht verwendet. _parent bewirkt, dass das verknüpfte Dokument im übergeordneten Fenster angezeigt wird. Dieser Attributwert wird nur in der Rahmenstruktur verwendet. Wenn es sich um einen Rahmen der obersten Ebene handelt, ist seine Funktion dieselbe wie _self. _top wird auch im Rahmen angewendet, aber seine Wirkung besteht darin, den Rahmen zu löschen, um das Zieldokument anzuzeigen. Dies ist nützlich für den Übergang von rahmenlosen zu rahmenlosen Strukturen.

Jetzt wissen wir, dass Ziel ein Attribut ist, das von einem Ziel angezeigt wird und eng mit dem Browser zusammenhängt. Was ist also rel? Warum betrachten viele Menschen es als alternatives Attribut des Ziels? Jetzt lernen wir rel kennen. Tatsächlich gibt es nicht nur ein rel, sondern auch ein entsprechendes Attribut namens rev. Die Bedeutung dieser beiden Attribute ist: die Beziehung vom Quelldokument zum Zieldokument; Das Quelldokument kann hier als das aktuelle Dokument verstanden werden, in dem sich der Link befindet, und das Zieldokument ist das Dokument, das durch den Link geöffnet wird. An dieser Stelle sollte uns klar sein, dass es sich bei rel und rev um eine Verknüpfungsbeziehung vor dem Dokument handelt und nicht um browserbezogene Attribute für die Anzeige des Zieldokuments.

Wie ist also die Beziehung zwischen rel und rev? Im Folgenden werden sie einzeln aufgelistet und ihre Bedeutung erklärt:

nächstes, Links zum nächsten Dokument
vorheriges, Links zum vorherigen Dokument;
Kopf, Links zum Dokument der obersten Ebene; in der Sammlung;
toc, Links zum Verzeichnis der Sammlung;
übergeordnetes Element, Links zum Dokument über der Quelle;
Index; der Index dieses Dokuments;
Glossar, ein mit diesem Dokument verknüpftes Glossar

wobei next und prev eine Gruppe sind. Es zeigt, dass die vorherige Beziehung zwischen dem aktuellen Dokument und dem Zieldokument eine Beziehung auf derselben Ebene ist, die wie folgt geschrieben werden kann
. Head und Toc können eine Kombination bilden, die darauf hinweist, dass das Inhaltsverzeichnis mit dem endgültigen Dokument verknüpft ist oder dass das Dokument mit dem Inhaltsverzeichnis verknüpft ist. Übergeordnetes und untergeordnetes Dokument bilden eine Gruppe, was darauf hinweist, dass das aktuelle Dokument mit dem übergeordneten oder untergeordneten Dokument verknüpft ist. Index und Glossar können jeweils mit head kombiniert werden, um „Dokumente zum Index“ oder „Index zu Dokumenten zu Glossar“ oder „Glossar zu Dokumenten“ zu bilden.

Vielleicht ist es immer noch nicht ganz klar. Hier ist ein Beispiel: Ich habe hier eine Filmdokument-Ressource zusammengestellt, also muss ich diese Ressourcen einteilen: Kampfkunstfilme, Kriegsfilme und Liebesfilme Filme, Horrorfilme, Dokumentationen. Wenn ich dann auf die folgende Unterkategorie im Stammverzeichnis des Films verlinken muss, sollte die Linkbeziehung lauten: rel=child rev=parent. Und wenn die aktuelle Kanalseite ein Martial-Arts-Film ist, muss ich zum Liebesfilmkanal wechseln oder andere Kanäle, dann sollte die Linkbeziehung lauten: rel=next rev=prev, wenn wir von einem Martial-Arts-Film auf das Dokument des Films „Crouching Tiger, Hidden Dragon“ verlinken, sollte die Linkbeziehung lauten: rel=head rev=toc, wenn von „Crouching Tiger, Hidden Dragon“ auf den Index verlinkt wird, lautet die Linkbeziehung: rel=index rev=head.

Da das aktuelle CSS die Attributwerte von ​​rel und rev nicht erfassen kann, gibt es keine Möglichkeit, unterschiedliche Stile für Links mit unterschiedlichen Beziehungen bereitzustellen. Daher werden rel und rev jetzt nur noch zur Erstellung der Semantik verwendet der Webseite vollständiger.

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage