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.html リンク ccc.html のコード

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

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

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

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

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

5. 2 レベルのディレクトリ内のファイルをリンクします
たとえば、ccc.html のコードは aaa.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 での タグの使用の詳細な説明

以上がHTMLのaタグのhref属性で相対パスと絶対パスを指定する使い方を解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。