XHTMLにおけるハイパーリンクの例を詳しく解説

この記事では主に、アンカー リンクとリンク相対アドレスの使用法を含む、XHTML でのハイパーリンク タグの使用に関するチュートリアルを紹介します。必要な場合は、

ハイパーリンク (「リンク」とも呼ばれます) を参照してください。ハイパーリンクは、私たちが閲覧する Web ページのいたるところにあると言えます。Web ページ上のリンク アドレスをクリックすると、別の Web ページにリンクされます。
タグを使用してハイパーリンクを定義します。構文:
表示されるテキストまたは画像
例:

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

<a href="http://www.baidu.com/">链接至百度</a>

1. ブラウザの表示効果:

2. Baiduへのリンク

3. 上記の「Baiduへのリンク」という文字をクリックすると、ブラウザはBaiduのホームページにリダイレクトされます。

ハイパーリンク属性
ハイパーリンク属性:
hrefリンクアドレス。絶対 Web アドレスまたは相対アドレスを指定できます。
ターゲットリンクターゲット。値 _blank を指定すると、リンク アドレスが新しいウィンドウで開きます。デフォルトでは、リンク アドレスを開くために現在のウィンドウが使用されます。
アンカーリンクの名前。これについては以下で個別に説明します。

相対 Web リンク アドレス:

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

<a href="/css" target="_blank">p+CSS教程</a>

1. この例では相対アドレスを使用していますが、Baidu にリンクする上記の例では絶対アドレスを使用しています。

追加されたターゲット属性の例:

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

<a href="http://www.baidu.com/" target="_blank">链接至百度</a>

1. リンクを再度クリックすると、ブラウザによりリンク アドレスを開くための新しいページが有効になります。元のページウィンドウが保持されます。

2. ヒント

3. リンク アドレスが現在のトピックまたはプロセスとあまり密接に関連していない場合、通常、target="_blank" 属性が有効になります。それ以外の場合は、新しいウィンドウを開かないようにしてください。ビューアはフレンドリーなブラウジング体験を提供します。

4. ページが複数のページフレームで構成されている場合、ターゲット属性は他の値を持つこともできます

電子メールハイパーリンク
電子メールリンクの例:

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

<a href="mailto:admin@xyz.com">联系xyz站的站长</a>

1. このリンクをクリックすると、デフォルトの電子メール クライアントで電子メールを作成できるようになります。

アンカーリンク
アンカーリンクとはページ内のリンクのことを指しますが、現在ではテキストハイパーリンクのことをアンカーリンクと呼ぶ人も多くいます。
アンカーの役割を説明するために例を挙げてみましょう:
たとえば、よく書かれた記事があり、その記事の裏で多くの人がコメントを付けており、コメントを投稿するためのウィンドウは通常コメントの下部にあります。ウェブサイトでは、コメントが投稿される場所にアンカーリンクを設定し、「コメントを投稿する」のように、コメントが表示されるアンカーリンクへのリンクをデザインします。他の人が残したコメントを見たくなくて、すぐにコメント入力ウィンドウにジャンプしたい場合は、「コメントを投稿する」をクリックすると、業界内のコメント入力ウィンドウにすぐにジャンプできます。このデザインは間違いなく視聴者のユーザーエクスペリエンスを向上させます。
アンカーリンクの使用例
アンカーの作成:

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

<p><a name="comment"></a></p>

1. アンカーにリンクするハイパーリンクアドレスの作成:

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

<p><a href="#comment">链接至comment锚</a></p>

1. 例からわかるように、アンカーにアクセスするには、リンク アドレスの後に「#」記号とアンカーの名前を追加します。上の例では、このページにリンクしているアンカーであるため、以前のリンク アドレスは無視されます (注: 相対アドレスは実際には無視されるため、ここでは説明しません)。

2. ヒント

3. このアンカー タグの使用を試したい場合は、効果を確認するために、アンカーへのハイパーリンクとアンカー タグの間に十分な Web スペースを確保するように注意してください。上で学んだ改行タグを使用して、テスト用に十分な空白を上下に作成できます。

4. 他のページにリンクするアンカー タグを作成することもできます。例:

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

<p><a href="http://www.abc.com/#test">链接至锚</a></p>

もちろん、このページは www.abc にある必要があります.com このテスト アンカー タグは必須です。そうでない場合は、www.abc.com ページにリンクするだけで、このアンカー タグは無視されます

[関連推奨事項]

1 HTML 無料ビデオ チュートリアル

2. HTTPヘッダーの知識ポイントを画像とテキストで解説

3. HTMLでJSONデータを表示する方法の紹介

4. HTMLでのメッセージボタンの数量添字の実装例の詳細説明

非同期ファイルアップロードを完了するための HTML Jquery コードの例

以上がXHTMLにおけるハイパーリンクの例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。