HTMLのaタグのhref属性で相対パスと絶対パスを指定する使い方を解説

href は、フロントエンド ファイルをリンクするために最も一般的に使用される重要な属性の 1 つです。ここでは、相対パスと絶対パスを指定するための HTML タグの href 属性の使用法を見ていきます。

実際のWeb開発では、CSSファイルを含め画像の挿入には必ずパスが必要です。ファイルパスの追加を間違えると参照が無効になります（リンク先のファイルが閲覧できない、挿入した画像が表示できないなど）。 ）。多くの初心者が混乱するでしょう。ここでは相対パスと絶対パスについて詳しく説明します。

HTML相対パス
は、このファイルが配置されているパスによって生じる他のファイル(またはフォルダー)とのパス関係を指します。
例:
ファイル 1.htm の絶対パスは: d:/www/html/1.htm
ファイル 2.htm の絶対パスは: d:/www/html/2.htm
その後: 1 .htm は相対です 2.htm へのパスは: 1.htm です

相対リンクの使用方法:
同じディレクトリにリンクする場合は、リンクするドキュメントの名前を入力するだけです。 :

XML/HTML コード コンテンツをクリップボードにコピーします

<a href =”1 htm”>网页链接 </a>  
<img src=”bg.jpg” />

下位レベルのディレクトリにリンクする場合は、最初にディレクトリ名を入力し、次に「/」を追加してからファイルを入力する必要があります名前 (例:

XML/HTML コード) コンテンツをクリップボードにコピーします。 Board

<a href =”html/ next.htm”>  
<img src=”images/bg.jpg” />

上位レベルのディレクトリに接続する場合は、最初に「../」を入力し、次にディレクトリに入る必要があります。名前とファイル名。例:

XML/HTML コードコンテンツをクリップボードにコピーします

<a href = “．．/ www/index.htm”>

例の概要
現在、4 つの HTML ファイル、つまり aaa.html bbb.html ccc があります。 htmlindex.html
aaa.html パスは次のとおりです: D:/www/adminwang/html/aaa.html
bbb.html のパスは次のとおりです: D:/www/adminwang/ bbb.html
ccc のパス。 html は次のとおりです: D:/www/ ccc.html
index.html のパスは D:/www/index.html です

1. 同じディレクトリ内のファイルをリンクします
たとえば、ccc.html ファイルのコードlink Index.html は次のとおりです:

XML/HTML コード内容をクリップボードにコピーします

<a href="index.html">链接index网页</a>

2. 前のディレクトリ ファイルにリンクします
たとえば、bbb.html を ccc にリンクするコード.html は次のとおりです:

XML/HTML コード内容をクリップボードにコピーします

<a href="../ccc.html">链接ccc网页</a>

3. 上の 2 レベルのディレクトリにあるファイルをリンクします
例: aaa のコード。 ccc.html にリンクする html は次のとおりです:

XML/HTML コード内容をクリップボードにコピーします

<a href=”../../ccc.html”>链接ccc网页</a>

4. 下位レベルのディレクトリにあるファイルをリンクします
たとえば、ccc のコードです。 bbb.html にリンクする html は次のとおりです:

XML/HTML コード内容をクリップボードにコピーします

<a href="adminwang/bbb.html">链接bbb网页</a>

5. 2 レベルのディレクトリ内のファイルをリンクします
たとえば、 aaa.html にリンクする ccc.html は次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー

<a href="adminwang/html/aaa.html">链接aaa网页</a>

HTML 絶対パス
該当するプロトコルまたはドライブ文字を含む、ファイルへのフルパスを指定します。つまり、ハードディスク上のホームページ上のファイルまたはディレクトリの実際の完全パスです。例:
http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg

相対パスをマスターすれば、絶対パスについて言うことはありません。絶対パスは非常に簡単です。

HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法の詳細については、PHP 中国語 Web サイトを参照してください。