Schnelltipp Relative URLs mit dem base -Tag festlegen

Das Tag in HTML ist ein relativ wenig bekanntes Element, das erst vor kurzem zu einem vollwertigen Teil von HTML5 geworden ist. Sie können zwei Dinge tun:

1. Legen Sie eine beliebige URL als Basis für alle relativen URLs fest.
2. Legen Sie Standard-Link-Ziele fest.

Die Basis-Iics

Das Element ist in der definiert Abschnitt und Sie können es nur einmal pro Dokument verwenden. Sie sollten es so früh wie möglich in Ihrem Kopfbereich platzieren, damit Sie es ab diesem Zeitpunkt verwenden können. Seine zwei möglichen Attribute sind href und Ziel. Sie können eines dieser Attribute alleine oder beide gleichzeitig verwenden.

Beispiel 1: Verknüpfung zum Laden von Assets

Angenommen, Sie haben eine Site, auf der alle Bilder und CSS in einem Ordner mit dem Namen "Assets" gespeichert werden. Sie könnten Ihre definieren Tag wie folgt:

Dann können Sie Bilder oder CSS wie folgt laden:

Der Link zu style.css würde zu lösen http://www.myepicsite.com/assets/style.css und images_14 / quick-tip-set-relative-urls-with-the-base-tag.png würde von laden http://www.myepicsite.com/assets/images_14/quick-tip-set-relative-urls-with-the-base-tag.png.

Beispiel 2: Interne Seiten-URLs

Was ist, wenn Sie eine Top-Level-Domain haben, die auf etwas weiterleitet? http://thisrocks.com/app/ und alle internen Links müssen enthalten sein app / in ihren URLs.

Sie können Ihre Basis-URL folgendermaßen einstellen:

Wann immer Sie von einer internen Seite auf eine andere verlinken wollten, können Sie einfach Folgendes verwenden:

VERKNÜPFUNG 

Dieser Link würde sich auf lösen http://thisrocks.com/app/anotherpage.htm.

Beispiel 3: Standard-Link-Ziel

Sie können auch verwenden um das Standardziel für alle Links auf Ihrer Seite festzulegen. Wenn Sie verwenden würden:

… Würde jeder Link, der kein eigenes Ziel festgelegt hat, in einem neuen Fenster geöffnet. Du kannst den ... benutzen Ziel Attribut mit oder ohne Begleitung href Attribut.

Diese Funktion kann für Inhalte, die über einen iFrame geladen werden, möglicherweise nützlich sein, da Sie automatisch alle Links auf den übergeordneten Frame richten können.

Nachteile

Während Die URL kann praktisch sein, ihre Nachteile liegen im Wesentlichen darin, dass sie nach der Definition erst einmal festgehalten werden. Sie können es nur auf eine einzige Weise verwenden und wirkt sich dann auf alle URLs aus. Wo auch immer Sie die in Ihrem System eingestellten Standardwerte nicht verwenden möchten Tag müssen Sie sie gezielt überschreiben.

Sollten Sie es verwenden, um Ihr Problem zu lösen Vermögenswerte Ordner wie oben beschrieben, und Sie wollten später von einer Seite Ihrer Website auf eine andere verlinken, was Sie nicht mit dem üblichen HTML-Code von tun könnten Seite. 

Dies liegt daran, dass die Basis-URL lautet http://www.myepicsite.com/assets/ Ihre Besucher würden an gesendet http://www.myepicsite.com/assets/page.html.

Als solche müssten Sie Ihre überschreiben Tag-Einstellungen unter Verwendung der absoluten URL, d. h. Seite.

In-Page-Anker

Beim Benutzen Sie können auch auf Probleme stoßen, die auf In-Page-Anker verweisen.

Normalerweise ist ein Link wie Zurück nach oben würde Sie auf derselben Seite halten, aber zur Position eines Elementes springen id = "top", z.B. es würde sich zu lösen http://thisrocks.com/app/article.html#top.

Wenn Sie jedoch eine tag mit einem href Attribut, mit dem Sie stattdessen an die Basis-URL gesendet werden #oben an das Ende angehängt, z.B.. http://thisrocks.com/app/#top.

Auch in diesem Fall müssen Sie die in Ihrem festgelegten Standardeinstellungen überschreiben Tag, indem Sie die Seite angeben, zu der Ihr Link relativ sein soll, z. Zurück nach oben.

Woher Funktioniert am besten

Das Tag wird am besten in einem Szenario verwendet, in dem Sie wissen, dass Sie die vollständige Kontrolle über die Verwendung aller URLs ausüben können, d. h. Sie können die Standardeinstellungen bei Bedarf überschreiben. Wenn Sie ein Design für ein CMS mit vielen unbekannten Variablen erstellen, ist es wahrscheinlich eine gute Idee, das Fenster zu verlassen aus der mischung.

Wenn Sie jedoch eine statische HTML-Site erstellen kann sehr hilfreich sein. Dies ist umso mehr der Fall, wenn Sie eine Templatiersprache wie Jade oder Handlebars verwenden, mit der Sie Verknüpfungen platzieren können Zurück nach oben, Wenn Sie also die Standardeinstellungen überschreiben müssen, ist dies dennoch schnell und einfach.

Wenn Sie eine gute Vorstellung davon haben, was der Inhalt Ihres Projekts sein wird und die Verwendung von URLs und Links vollständig unter Ihrer Kontrolle steht, finden Sie möglicherweise das Ein Tag spart viel Zeit.

Lesen Sie mehr über im W3C-Wiki und HTML5-Spezifikation:

• http://www.w3.org/wiki/HTML/Elements/base
• http://www.w3.org/TR/html5/document-metadata.html#the-base-element