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ベンチマークテストを実装します

推薦する

jsはシンプルなカウントダウンを実装します

この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています...

回転するフリップカードアニメーションの効果を実現するCSS

回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。 1. まず2つのボックス...

MySQLでトランザクションを開始する方法

序文この記事では主にMySQLでトランザクションを開始する方法について紹介します。関連情報については...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

IE6かどうかを判定する最短JS(IEの書き方)

ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

Dockerコンテナにホストディレクトリへの書き込み権限がない場合の解決策

Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...

初心者がHTMLタグを学ぶ(2)

関連記事:初心者が学ぶ HTML タグ (1)初心者は、いくつかの HTML タグを理解することで ...

mysqldumpデータエクスポートの問題に関する詳細な議論

1. mysqldump の使用時にエラー (1064) が報告されます。これは、mysqldump...

Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...