XHTML_HTML/Xhtml_Web ページ制作でのハイパーリンク タグの使用に関するチュートリアル

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

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

1. <a href="http://www .baidu.com/">百度へのリンクa>

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

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

相対 Web リンク アドレス:

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

1. <a href="/css" ターゲット="_blank">DIV CSS チュートリアル a>

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

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

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

1. <a href="http://www .baidu.com/" ターゲット="_blank">リンク百度 a>

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

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

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

1. <a href="mailto:admin@xyz .com">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 ページにリンクするだけで、アンカー タグは無視されます。