XHTML でのハイパーリンク タグの使用に関するチュートリアル

XHTML でのハイパーリンク タグの使用に関するチュートリアル


ハイパーリンク。「リンク」とも呼ばれます。ハイパーリンクは、私たちが閲覧する Web ページのいたるところにあると言えます。Web ページ上のリンク アドレスをクリックすると、別の Web ページにリンクされます。これがハイパーリンクの動作です。
ハイパーリンクを定義するには、<a></a> タグを使用します。構文は次のとおりです。
<a href="url">表示されるテキストまたは画像</a>
例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "http://www.baidu.com/" > Baidu へのリンク</ a >   

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


ハイパーリンクのプロパティ
ハイパーリンクのプロパティ:
href リンク アドレス。絶対的な Web アドレスまたは相対的なアドレスを指定できます。
target リンクターゲット。値が _blank の場合、リンク アドレスは新しいウィンドウで開きます。デフォルトでは、リンク アドレスは現在のウィンドウで開きます。
名前アンカーリンクについては、以下で別途説明します。

相対ウェブリンクアドレス:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "/css"   target = "_blank" > DIV+CSS チュートリアル</ a >   

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

ターゲット属性を追加した例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "http://www.baidu.com/"   target = "_blank" > Baidu へのリンク</ a >   

リンクをもう一度クリックすると、ブラウザは新しいページを開いてリンク アドレスを開きますが、元のページ ウィンドウは保持されます。
ヒント: リンク アドレスが現在のトピックまたはプロセスと密接に関連していない場合、通常は target="_blank" 属性が有効になります。それ以外の場合は、閲覧者に使いやすいブラウジング エクスペリエンスを提供するために、新しいウィンドウを有効にしないようにしてください。
ページが複数のページフレームで構成されている場合、ターゲット属性には他の値も設定できます。

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <   href = "mailto:[email protected]" > xyz サイトのウェブマスターに連絡する</ a >   

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p > < a  名前= "コメント" > </ a > </ p >   

アンカーへのハイパーリンクを作成します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p > < a   href = "#comment" >コメントアンカーへのリンク</ a > </ p >   

例からわかるように、アンカーにアクセスするには、リンク アドレスの後に「#」記号とアンカーの名前を追加するだけです。上記の例では、このページのアンカーにリンクしているため、前のリンク アドレスは無視されます (注: 実際に無視されるのは相対アドレスですが、ここでは説明しません)。
ヒント: このアンカー タグの使用を試してみたい場合は、効果を確認するために、Web ページ上でアンカーへのハイパーリンクとアンカー タグの間に十分なスペースを確保するように注意してください。これをテストするには、上で学習した改行タグを使用して、上下に十分な空白を作成できます。
他のページにリンクするアンカー タグを作成することもできます。例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p > < a   href = " http://www.abc.com/#test " >アンカーへのリンク</a> </p>   

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

<<:  JavaScript ES6 分割演算子の理解と応用

>>:  MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します

推薦する

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

最高の無料英語フォント33選を紹介

チャンクファイブフリータイプファミリーCuprum JAH I フリーフォントイェセヴァブークレフィ...

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

nginx リクエスト ヘッダー データ読み取りプロセスの詳細な説明

前回の記事では、nginx がリクエスト ラインのデータを読み取って、リクエスト ラインを解析する方...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

CSS3 で実装された価格表

結果: 実装コードhtml <div id="価格表" class=&qu...

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

CentOS 7.4 に MySQL 5.7 を手動でインストールする方法

MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...

MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析

多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...

CSS3は三角形の連続拡大効果を実現します

1. CSS3の三角形は特殊効果でズームし続けます11.1 画像プレビュー 11.2 index.h...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

証明書を使用してリモート Docker サーバーに接続する方法

目次1. スクリプトを使用してDockerのTLSを暗号化する2. Dockerの設定を変更してリモ...

Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法

Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...

MySQLパスワードを変更するいくつかの方法

序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...