Analyse des Unterschieds zwischen relativem und absolutem HTML-Pfad

Gerade HTML-Anfänger stehen häufig vor dem Problem, eine Datei richtig zu referenzieren. Wie verweisen Sie beispielsweise in einer HTML-Seite als Hyperlink auf eine andere HTML-Seite? So fügen Sie ein Bild in eine Webseite ein

Wenn Sie beim Verweisen auf eine Datei (z. B. beim Hinzufügen eines Hyperlinks oder Einfügen eines Bildes usw.) den falschen Dateipfad verwenden, wird der Verweis ungültig (die verknüpfte Datei kann nicht durchsucht werden oder das eingefügte Bild kann nicht angezeigt werden usw.).

Um diese Fehler zu vermeiden und Dateien richtig zu referenzieren, müssen wir uns mit HTML-Pfaden vertraut machen.

Es gibt zwei Möglichkeiten, Pfade in HTML zu schreiben: relative Pfade und absolute Pfade.

Relativer HTML-Pfad
Dateiverweise im selben Verzeichnis. Wenn sich die Quelldatei und die referenzierte Datei im selben Verzeichnis befinden, schreiben Sie einfach den referenzierten Dateinamen.

Wir erstellen jetzt eine Quelldatei info.html und referenzieren die Datei index.html als Hyperlink in info.html.

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad zu index.html lautet: c:\Inetpub\wwwroot\sites\blabla\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "index.html">index.html</a>

So geben Sie das übergeordnete Verzeichnis an
../ stellt das übergeordnete Verzeichnis der Quelldatei dar, ../../ stellt das übergeordnete Verzeichnis der Quelldatei dar und so weiter.

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad zu index.html lautet: c:\Inetpub\wwwroot\sites\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "../index.html">index.html</a>

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad von index.html lautet: c:\Inetpub\wwwroot\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "../../index.html">index.html</a>

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad zu index.html lautet: c:\Inetpub\wwwroot\sites\wowstory\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "../wowstory/index.html">index.html</a>

Wie gibt man an, dass ein Unterverzeichnis auf eine Datei in einem Unterverzeichnis verweist? Schreiben Sie einfach den Pfad der Unterverzeichnisdatei.

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad zu index.html lautet: c:\Inetpub\wwwroot\sites\blabla\html\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "html/index.html">index.html</a>

Angenommen, der Pfad zu info.html lautet: c:\Inetpub\wwwroot\sites\blabla\info.html
Angenommen, der Pfad zu index.html lautet: c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
Der Code zum Hinzufügen eines Hyperlinks zu index.html in info.html sollte wie folgt geschrieben werden:

<a href = "html/tutorials/index.html">index.html</a>
Absoluter HTML-Pfad
Der absolute HTML-Pfad bezieht sich auf den vollständigen Pfad der Datei mit dem Domänennamen.

Angenommen, Sie registrieren den Domänennamen www.jb51.net und beantragen einen virtuellen Host. Ihr virtueller Host-Anbieter stellt Ihnen ein Verzeichnis wie www zur Verfügung. Dieses www ist das Stammverzeichnis Ihrer Website.

Angenommen, Sie legen eine Datei index.html im WWW-Stammverzeichnis ab. Der absolute Pfad dieser Datei lautet: https://www.jb51.net/index.html.

Angenommen, Sie haben im Stammverzeichnis www ein Verzeichnis mit dem Namen html_tutorials erstellt und dann eine Datei index.html in das Verzeichnis eingefügt. Der absolute Pfad dieser Datei lautet https://www.jb51.net/html_tutorials/index.html.

<<: Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld

>>: Vier Möglichkeiten, CSS und HTML zu kombinieren

So verwenden Sie die JSX-Syntax richtig in Vue

Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

Vorwort Excel ist leistungsstark und weit verbrei...

Analyse des Unterschieds zwischen relativem und absolutem HTML-Pfad

So verwenden Sie die JSX-Syntax richtig in Vue

So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie

Analyse des Prinzips der Verwendung von PDO zur Verhinderung von SQL-Injection

JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus

MySQL-Schritte vollständig löschen

Tutorial zu HTML-Formular-Tags (4):

Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

So implementieren Sie die Seiten-Screenshot-Funktion in JS

JavaScript implementiert einfache Rechnerfunktion

Artikel empfehlen

Lösung für den Fehler bei der Verbindung mit MySQL in Docker

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System

So passen Sie die Höhe eines Divs an die Höhe des Browsers an

MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse

Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele

Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

Informationen zum Ausdruck „wenn Komma enthält“ in JavaScript

Verwenden einer MySQL-Datenbank im Docker, um LAN-Zugriff zu erhalten

Lösen Sie das Problem, dass die CentOS-Zeit der virtuellen VMWare-Maschine nicht mit der Ortszeit übereinstimmt

Detaillierte Erklärung der Verwendung gängiger Linux-Befehle (Teil 2) ———— Texteditor-Befehle vi/vim

Wichtige Updates für MySQL 8.0.23 (neue Funktionen)

Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings

Herausforderung des HTML-Symbol-zu-Entity-Algorithmus