1. ハイパーリンクとは何ですか?
ハイパーリンクは Web ページの一部であり、Web ページを他の Web ページに接続する要素です。複数の Web ページがハイパーリンクを通じて接続されている場合にのみ、それは Web サイトとみなされます。ハイパーリンクは、ある Web ページから別のターゲットへの接続関係を指します。ターゲットには、Web ページ、場所 (同じ Web ページ上の別の場所)、画像などが含まれます。 Web ページのハイパーリンクに使用されるオブジェクトは、テキスト、画像などです。
2. ハイパーリンクコードタグ
a タグは、ハイパーリンクを実装する HTML コードであり、ハイパーリンクを定義するために使用されます。次にaタグの使い方を見ていきましょう。
構文形式:ハイパーリンク オブジェクト
注: href は、接続のターゲットを指定する a タグの最も重要な属性です。この属性がないと、hreflang、media、rel、target、および type 属性は使用できません。
3. タグの共通属性
注: href 属性と target 属性の 2 つの共通属性に加えて、a タグには、download、name、rel およびその他の属性などの多くの属性もあります。一般的に使われていないものは紹介しませんので、興味のある方はご自身で調べてください。
1. ハイパーリンクの構文仕様
<ahref=https://www.dotcpp.com/target=_blank>C 言語ネットワーク リンク</a>
このうち、a はアンカーの略で、中国語の意味は「錨」です。
このうち、href は対象ページの URL アドレスを指定するために使用します **(省略不可)** タグに href 属性がある場合のみハイパーリンク機能を持ちます。
Target は、ターゲット ページを開く方法を指定するために使用されます。現在のページで開く場合は _self を入力し、新しいウィンドウで開く場合は、Target を省略できます。 _self、デフォルトのウィンドウで開きます。
2. ハイパーリンクの分類
(1) 外部リンク、現在のプロジェクト外のリンク:
<ahref=https://www.dotcpp.com/target=_blank>C 言語ネットワーク リンク</a>
(2) 内部リンク、現在のディレクトリ内のリンクは、このプロジェクトの異なるページ間のリンクとも言えます。
<aherf=index.htmltarget=_blank>ホームページ</a><br/>
(3) 空のリンク、つまり、まだ完了していない現在のプロジェクトのページ。代わりに # を使用します。クリックすると、現在のページが再度開きます。
<ahref=#target=_blank>未完成のページ</a><br/>
(4) ダウンロードリンク：内部リンクのアドレスがファイルまたは圧縮ファイルの場合：
<ahref=New MicrosoftExcel worksheet.xlsx>ファイルのダウンロード</a><br/><ahref=New MicrosoftExcel worksheet.zip>ファイルのダウンロード</a><br/>
(5) Web ページ要素リンク: テキスト、画像、表、音声、ビデオなどの Web ページ内のさまざまな要素をハイパーリンクとして使用できます。
(6) アンカー リンク: このリンクをクリックすると、ページ上の特定の場所にすばやく移動できます (ディレクトリ リンクと同様)。
リンク テキストの href 属性で、次のような #+text の形式に属性値を設定します。<ahref=#anchor>これはアンカーです</a> ターゲットの場所タグを見つけて、ID 属性を追加します = just now 属性値 (例: <h3id=anchor>anchor</h3>)
3. <a>タグのデフォルトスタイル
ブラウザでは、<a> タグのデフォルトのスタイルがいくつか設定されています。
(1) マウススタイル
マウスがリンク領域に入ると小さな手の形に変わり、リンク領域から出ると矢印の形に戻ります。
(2) 色と下線
ハイパーリンクは、クリックされる前は青ですが、クリックされると紫に変わります。ハイパーリンクにはデフォルトで下線が付き、下線の色はテキストの色と一致します。
ブラウザは、履歴レコードに基づいてハイパーリンクがクリックされたかどうかを判断します。href 属性が履歴レコード内の URL と一致する場合、リンクがクリックされたことを意味します。ブラウザの履歴をクリアすると、ハイパーリンクの色が再び青色に戻ります。
[例] さまざまな形式の HTML ハイパーリンク:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>HTML<a>タグのデモ</title></head><body><p><ahref=https://www.dotcpp .com/course/html/target=_blank>HTML チュートリアル (新しいウィンドウが開きます)</a><br><ahref=https://www.dotcpp.com/course/css/>CSS チュートリアル (現在のウィンドウが開きます) </a><br><ahref=https://www.dotcpp.com/course/algorithm/>アルゴリズム コンテストのチュートリアル (クリック)</a></p></body></html>
効果は次のように示されます。
