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
Artikel empfehlen
Prototyp und Prototypenkette Prototyp und Protodetails
Inhaltsverzeichnis 1. Prototyp 2. Prototypenkette...
Erläuterung der Anwendungsfälle von JavaScript setTimeout und setTimeinterval
Mit beiden Methoden kann ein JavaScript-Code nach...
Zusammenfassung des Wissens über Einbettungsanweisungen, die Vue-Ingenieure kapseln müssen
Inhaltsverzeichnis Vorwort Unterrichtsgrundlagen ...
Lassen Sie uns über die Größen- und Längenbeschränkungen verschiedener Objekte in MySQL sprechen
Inhaltsverzeichnis Beschränkung der Bezeichnerlän...
Konfigurationsmethode für die Serverzeitsynchronisierung von Centos 7.4 [basierend auf dem NTP-Dienst]
Dieser Artikel beschreibt, wie man die Zeitsynchr...
Detaillierte Erläuterung der Implementierung der Nginx-Prozesssperre
Inhaltsverzeichnis 1. Die Rolle der Nginx-Prozess...
Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).
Im vorherigen Artikel habe ich die Funktion von V...
Schritte zum Ändern des MySQL-Datenbankdatendateipfads unter Linux
Nach der Installation der MySQL-Datenbank mit der...
So installieren Sie Tomcat in Docker und stellen das Springboot-Projekt-War-Paket bereit
Es ist ganz einfach, gehen Sie einfach zum Tutori...
So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage
Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...
Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte
Dieser Artikel beschreibt anhand eines Beispiels,...
Umfassende Zusammenfassung der MySQL-Funktionen
Inhaltsverzeichnis 1. Häufig verwendete Zeichenfo...
Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4
Routenplanung vue-router4 behält den Großteil der...
Eine kurze Diskussion über drei Methoden der asynchronen Replikation in MySQL 8.0
In diesem Experiment konfigurieren wir die standa...
Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl
Die Kapselung und Verwendung der Vue-Komponente z...