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

推薦する

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...

MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...

Vueスロットの実装原理についての簡単な説明

目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...

jsとcssのブロッキング問題の詳細な分析

目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...

行の高さと垂直方向の配置についての深い理解

いくつかの概念行ボックス: インライン ボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ...

MYSQL updatexml() 関数のエラーインジェクション分析

まず、updatexml()関数を理解する UPDATEXML (XML ドキュメント、XPath ...

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

CSS を使用して三角形を実装する一般的な手法 (複数の方法)

面接の経験によっては、CSS に関する質問がよく見られ、CSS を使用して三角形を描画する方法につい...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

Win7x64でのMySQL 5.7.18解凍版のインストール方法

関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

Python の MySQL データベース LIKE 演算子の詳細な説明

LIKE 演算子は、列内の指定されたパターンを検索するため、WHERE 句で使用されます。文法: 列...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...