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 分離列とプレフィックスインデックスの使用の概要

推薦する

Centos7 で Java8 と MySQL をインストールしてデプロイする

通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

Vueで親子コンポーネント通信を実装する方法

目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...

ROS2のインストールとdocker環境の使い方について

目次Docker を使用する理由は何ですか? DockerのインストールROSイメージを取得するRO...

JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

目次単一条件単一データフィルタリング単一条件複数データフィルタリング複数の条件付きデータフィルタリン...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...

条件付きコメント形式の書き方とサンプルコード

フロントエンドエンジニアとして、IE は私たちにとって馴染み深いものであるはずです。設計案を実装する...

Centos7にnginxをインストールする方法

必要な環境をインストールする1. gccのインストールnginx をインストールするには、公式サイト...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

Vue で jsx 構文を正しく使用する方法

目次序文仮想DOM仮想DOMとは仮想DOMの利点レンダリング関数とは何ですか? jsx Vue3 で...

HTML テーブル マークアップ チュートリアル (4): 境界線の色属性 BORDERCOLOR

テーブルを美しくするために、テーブルにさまざまな境界線の色を設定できます。基本的な構文<テーブ...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...