Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Ich beschäftige mich seit über einem Jahr mit Java-Webentwicklung und es ist unvermeidlich, HTML- oder JSP-Seiten zu schreiben. Die leistungsstarke Funktion von Webanwendungen liegt in ihren Hyperlinks (Hyperlink). Beispielsweise speichert Seite A die Linkadresse (d. h. URI), die auf Seite B verweist, aber genau hier liegt das Problem, wie eine Datei korrekt referenziert wird. Wie verweisen Sie beispielsweise in einer HTML-Seite als Hyperlink auf eine andere HTML-Seite? Wie fügt man ein Bild in eine Webseite ein? ......
Darüber hinaus sind relative Pfade in Struts sehr beliebt, sodass es leicht zu Verwirrung kommen kann, wenn Sie nicht aufpassen.

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 die Dokumente korrekt zu zitieren, habe ich die Unterschiede und Verwendungen zum späteren Nachschlagen aufgeschrieben.

In HTML gibt es zwei Möglichkeiten, Pfade 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: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<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: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

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

Angenommen, der Pfad von info.HTML lautet: d:\tomcat\webapps\hello\blabla\wowstory\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

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

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad „index.HTML“ lautet: d:\tomcat\webapps\hello\wowstory\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

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

So stellen Sie ein Unterverzeichnis dar <br />Um auf eine Datei in einem Unterverzeichnis zu verweisen, schreiben Sie einfach den Pfad der Unterverzeichnisdatei.

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\HTML\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

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

Angenommen, der Pfad zu info.HTML lautet: d:\tomcat\webapps\hello\blabla\info.HTML
Angenommen, der Pfad zu index.HTML lautet: d:\tomcat\webapps\hello\blabla\HTML\tutorials\index.HTML
Der Code zum Hinzufügen eines Hyperlinks zu index.HTML in info.HTML sollte wie folgt geschrieben werden:

Code kopieren

Der Code lautet wie folgt:

<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 haben den Domänennamen www.jb51.net registriert und einen virtuellen Host beantragt. Der Anbieter des virtuellen Hosts stellt Ihnen ein Verzeichnis wie www zur Verfügung. Dieses www ist das Stammverzeichnis der Website.

Angenommen, im Stammverzeichnis www gibt es eine Datei index.HTML. Der absolute Pfad dieser Datei lautet: https://www.jb51.net/index.html.

Angenommen, im Stammverzeichnis www wird ein Verzeichnis mit dem Namen HTML_tutorials erstellt und dann eine Datei index.HTML in dieses Verzeichnis eingefügt. Der absolute Pfad dieser Datei lautet https://www.jb51.net/article/32759.htm.

<<: Bringen Sie Ihnen bei, wie Sie coole Barcode-Effekte erstellen

>>: Vorteile von MySQL-Abdeckungsindizes

Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

In der Vergangenheit wurde Float häufig für das L...

Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern

Der einfachste Weg, einen neuen Benutzer zu erstellen und Berechtigungen für MySQL zu erteilen

Implementierung der CSS-Variableneinfügung im Vue3-Stil

Analyse der allgemeinen Konfigurationsmethoden für virtuelle Hosts von Apache

Zusammenfassung der Unterschiede zwischen Vues Überwachung, Berechnung und Methoden

Vue-Beispielcode für die Online-Vorschau von Office-Dateien

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Implementierung mehrerer Nginx-Standorte, die alle Anfragen weiterleiten oder auf statische Ressourcendateien zugreifen

Probleme bei der Konfiguration von https-Server und Reverse-Proxy mit Nginx unter Windows

Artikel empfehlen

Vue+echarts realisiert Fortschrittsbalken-Histogramm

Zählen Sie die Listen-Tags in HTML

Detaillierte Analyse der Rolle von HTML-Kommentar-Tags

Reines CSS zur Realisierung der Platzhalteranimation und Eingabeüberprüfung für Eingabefelder

Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

Berechtigungen für Cross-Origin-Image-Ressourcen (CORS-fähiges Image)

W3C Tutorial (1): W3C verstehen

So installieren Sie den Apache-Dienst im Linux-Betriebssystem

Vier Methoden zur Verwendung von JS zur Bestimmung von Datentypen

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows

HTML CSS3 streckt den Bildanzeigeeffekt nicht

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Linux: Kein Speicherplatz mehr auf Gerät 500 – Fehler aufgrund voller Inodes

Implementierung der Änderung von Konfigurationsdateien im Docker-Container