HTML の相対パスと絶対パスの違いの分析

HTML の相対パスと絶対パスの違いの分析
HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ページ内のハイパーリンクとして別の HTML ページを参照するにはどうすればよいでしょうか。ウェブページに画像を挿入する方法

ファイル参照(ハイパーリンクの追加や画像の挿入など)時に誤ったファイルパスを使用すると、参照が無効になります(リンクされたファイルが参照できない、挿入された画像が表示されないなど)。

これらのエラーを回避し、ファイルを正しく参照するには、HTML パスについて学習する必要があります。

HTML でパスを記述する方法には、相対パスと絶対パスの 2 つがあります。

HTML 相対パス
同じディレクトリ内のファイル参照 ソース ファイルと参照ファイルが同じディレクトリにある場合は、参照ファイル名を記述するだけです。

ここで、ソース ファイル info.html を作成し、info.html 内のハイパーリンクとして index.html ファイルを参照します。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。

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


親ディレクトリを指定する方法
../ はソース ファイルの親ディレクトリを表し、../../ はソース ファイルの親ディレクトリを表します。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。


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

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html のパスが c:\Inetpub\wwwroot\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。


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

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\wowstory\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。


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

サブディレクトリがサブディレクトリ内のファイルを参照していることを示すにはどうすればよいでしょうか? サブディレクトリ ファイルのパスを記述するだけです。

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\html\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。


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

info.html へのパスが c:\Inetpub\wwwroot\sites\blabla\info.html であると仮定します。
index.html へのパスが c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html であると仮定します。
info.html に index.html へのハイパーリンクを追加するコードは次のように記述する必要があります。


<a href = "html/tutorials/index.html">index.html</a>
HTML 絶対パス
HTML 絶対パスは、ドメイン名を含むファイルの完全なパスを指します。

ドメイン名 www.jb51.net を登録し、仮想ホストを申請するとします。仮想ホスト プロバイダーは www などのディレクトリを提供します。この www が Web サイトのルート ディレクトリです。

たとえば、index.html ファイルを www ルート ディレクトリに置いたとします。このファイルの絶対パスは https://www.jb51.net/index.html です。

www ルート ディレクトリに html_tutorials というディレクトリを作成し、そのディレクトリに index.html ファイルを置いたとします。このファイルの絶対パスは https://www.jb51.net/html_tutorials/index.html です。

<<:  JSネイティブ2列シャトル選択ボックスの実装例

>>:  CSSとHTMLを組み合わせる4つの方法

推薦する

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

MySQLインジェクションバイパスフィルタリング技術の概要

まず、GIF 操作を見てみましょう。ケース1: スペースがフィルタリングされるスペースの代わりに角括...

JavaScript が重複したネットワークリクエストを防ぐ方法の例

序文開発中は、インターフェース要求の繰り返しによってさまざまな問題が発生することがよくあります。ネッ...

ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

目次1. 背景知識1. ARM64レジスタの紹介2. STP命令の詳しい説明(ARMV8マニュアル)...

グループ化されたクエリでのGROUP BYの使用とSQL実行順序の説明

SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...

Vueはファイルのアップロードとダウンロード機能を実装します

この記事では、ファイルのアップロードとダウンロード機能を実装するためのVueの具体的なコードを例とし...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...

HTML での select optgroup タグの使用の概要

時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

JavaScriptタイマーの詳細な説明

目次簡単な紹介間隔の設定説明するパラメータ戻り値使用法タイムアウトの設定説明するパラメータ使用法:タ...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

CSSでサウンドを再生するいくつかのテクニック

CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れて...

速度、読み込み、Web アプリケーションなどにおける div と table の違い。

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...