Festlegen der Dokumentbasis-URL mit dem HTML-Element

Websites bestehen aus einer Reihe von Links, die auf Seiten und Quellen wie Bilder und Stylesheets verweisen. Es gibt zwei Möglichkeiten Geben Sie die URL an, die auf diese Quellen verweist: Verwenden Sie entweder einen absoluten Pfad oder einen relativen Pfad.

Der absolute Pfad bezieht sich auf ein bestimmtes Ziel. Normalerweise wird er mit dem Domänennamen (zusammen mit HTTP) gestartet www.domain.com/destination/source.jpg. Der relative Pfad ist das Gegenteil: Das Linkziel hängt vom Stammort oder in den meisten Fällen vom Domainnamen Ihrer Website ab.

Ein typischer relativer Pfad würde wie folgt aussehen:

Wenn Ihre Website Domain ist, zum Beispiel, hongkiat.com Der Bildpfad würde sich auflösen hongkiat.comimages_2 / specifying-document-base-url-with-html-base-element.png. Sie sollten dies verstehen, wenn Sie seit einiger Zeit eine Website entwickeln.

Aber die meisten von Ihnen haben wahrscheinlich noch nichts davon gehört Element. Dieses HTML-Tag gibt es bereits seit HTML4, jedoch ist nur sehr wenig von seiner Implementierung in freier Wildbahn zu sehen. W3C beschreibt dieses Element als:

“Das Basiselement ermöglicht die Angabe von Autoren die URL der Dokumentbasis zum Auflösen relativer URLs und des Namens von Der Standard-Browserkontext um Hyperlinks zu folgen.”

Diese Das Element legt im Wesentlichen die Basis-URL für den relativen Pfad in Webseiten fest. Anstatt sich vom Stammspeicherort oder der Domäne Ihrer Website abhängig zu machen, können Sie dies auch an anderer Stelle angeben, z. B. auf die URL, unter der sich Ihre Ressourcen in CDN (Content Delivery Network) befinden. Mal sehen, wie das tatsächlich funktioniert.

Basiselement verwenden

Das ist entlang der Seite definiert und Tags innerhalb der . Im folgenden Beispiel setzen wir die Basis-URL auf Google.

Diese Angabe wirkt sich auf alle Pfade innerhalb des Dokuments aus, einschließlich eines Pfads, der im angegeben ist href Attribut und die src der Bilder. Angenommen, wir haben ein Stylesheet, Bilder und Links im Dokumentensatz mit einem relativen Pfad wie dem folgenden Beispiel:

  Ankerverbindung

Obwohl unsere Webseite unter ist demo.hongkiat.com der relative Pfad wird sich beziehen hongkiat.maxcdn.com, dem Basispfad folgen, der in angegeben ist Etikett. Bewegen Sie den Mauszeiger über den Link, und der Browser zeigt Ihnen an, wohin sich der Pfad gerade bewegt.

Alle relativen Pfade werden schließlich sein:

  Ankerverbindung

Festlegen des Default-Link-Ziels

Abgesehen von der Definition der Basis-URL Tag kann auch das Standard-Link-Ziel über festlegen Ziel Attribut. Angenommen, Sie möchten, dass der gesamte Link im Dokument geöffnet wird im Browser neue Registerkarte, stellen Sie das ein Ziel mit _leer, wie so.

Einschränkungen

Das tag hat jedoch in einigen Fällen einige Vorbehalte:

Zuerst die Browser-Unterstützung ist großartig; es funktioniert im IE6. IE6 glaubt jedoch, dass es ein schließendes Tag erfordert . Dies kann zu einem Hierarchieproblem im Dokument führen, wenn das schließende Tag nicht angegeben wird. Eine einfache Möglichkeit, dieses Problem zu lösen, ist das Hinzufügen Schließen innerhalb eines Kommentars, .

Wenn Sie verwenden # In Verbindung mit Um zu Abschnitten innerhalb des Dokuments zu verlinken, kann in Internet Explorer 9 möglicherweise ein Problem auftreten. Anstatt zu dem betreffenden Abschnitt zu springen, lädt Internet Explorer 9 die Seite neu.

Außerdem ein Leerzeichen href führt dazu, dass die Basis-URL nicht auf das aktuelle Verzeichnis verweist, in dem sich die Seite befindet (dies ist das Standardverhalten des Browsers). Dies kann zu unerwarteten Problemen beim Verweisen führen.

Einpacken

Das ist eine praktische HTML-Funktion, die das Link-Verweisen in einem Webdokument vereinfachen kann. Verwenden Sie den Tag mit Bedacht, um die Fallstricke zu minimieren. Befolgen Sie diese Hinweise unten für weitere Informationen Etikett:

Absolute und relative URLs - MSDN
HTML-Basiselement - W3C