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つの方法

推薦する

Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法

目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...

HTMLページの文字セットを指定する2つの方法

1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

MySQL 8の新機能ROLEの詳しい説明

MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...

Linuxホスト名変更コマンドの詳しい説明

Linux ホスト名変更コマンド1. ホスト名を一時的に変更するだけの場合は、hostname コマ...

Docker で MySQL 接続と設定ファイルの最大数を変更する

1. MySQLイメージを見つける ドッカーps 2. ミラーmysqlイメージを入力する dock...

mysql indexof関数の使用手順

以下のように表示されます。 LOCATE(部分文字列、文字列)文字列 str 内の部分文字列 sub...

haslaylout と bfc 解析の理解

1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

div を下から上にスライドさせる CSS3 の例

1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

MySQL でのトリガーとカーソルの紹介と使用

トリガーの紹介トリガーは、テーブルに関連付けられた特別なストアド プロシージャであり、テーブル内のデ...