HTMLにおける絶対パスと相対パスの違いの分析

HTMLにおける絶対パスと相対パスの違いの分析
図に示すように:

1 つのページには多数のファイルが接続されているため、ファイルを参照するときには、パスの問題をある程度理解している必要があります。または、PHP ネットワーク プログラム開発に精通しているプログラマーは、define と include を組み合わせて変数のパスと参照を定義する方法について多くの洞察力を持っています。

例えば:

コードをコピー
コードは次のとおりです。

定義('ROOT_PATH'、ディレクトリ名(__FILE__));
ROOT_PATH."/inc/webconfig.php" を含めます。
ROOT_PATH."/inc/sysinfo.php"を含めます。
ROOT_PATH."/inc/functions.php"をincludeします。
ROOT_PATH."/inc/db_sql.php"を含めます。

これらは次に分析するものです。

主な内容:

• 相対パスと絶対パスの概念
• 相対パスと絶対パスの概念を詳細に分析する

オペレーティング システム クラスでは、ファイル検索について次のように説明しています。絶対パス: ツリー ディレクトリ構造では、ルート ノードからデータ ファイルまたはディレクトリ ファイルへのパスは 1 つだけです。ルート ノードからデータ ファイルまでのパス上のディレクトリ ファイル名とデータ ファイル名を「/」で接続して、データ ファイルにアクセスするために使用できるパス名を形成します。相対パス: 「現在のディレクトリ」(「作業ディレクトリ」とも呼ばれます) をプロセスごとに設定できるため、ファイルを検索するたびに機械的に絶対パスを使用する必要はありません。代わりに、現在のディレクトリを基準としたファイルのパスを使用します。これが相対パスです。もちろん、少し抽象的です。詳細については、主に HTML に適用した以下の分析を参照してください。

具体的な分析

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

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

これらのエラーを回避し、ファイルを正しく参照するには、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> で親ディレクトリを指定する方法
../ はソース ファイルの親ディレクトリを示し、 https://www.jb51.net/ はソース ファイルの親ディレクトリを示します。

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 = "https://www.jb51.net/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は星を消すケースを実現する

>>:  MySQL 分離列とプレフィックスインデックスの使用の概要

推薦する

MySQLの重複排除操作を極限まで最適化する方法

目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...

MySql 8.0.16 バージョンのインストールでは、「UTF8B3」ではなく「UTF8B4」が使用されるように求められます。

MySQL 8.0.16 にインストールする場合、「UTF8B3」ではなく「UTF8B4」が使用さ...

フロントエンド開発者のための HTML 入門

1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...

MySQL エンコーディング utf8 および utf8mb4 utf8mb4_unicode_ci および utf8mb4_general_ci

参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...

Tomcatのサーバーオプションの詳細な説明

1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...

Javascript 非同期プログラミング: Promise を本当に理解していますか?

目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...

Vue はグラフィック検証コードログインを実装します

この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...

MySQL の lru リンク リストの簡単な分析

1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

nginxのデフォルトポートを変更する方法の詳細な説明

まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル

Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...

docker を使用してシンプルな C/C++ プログラムをデプロイする方法

1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...