1.ハイパーリンク
ハイパーリンクはコンテンツごとのリンクを指し、Web ページで最も一般的な要素の 1 つであり、インターネット全体はハイパーリンクに基づいて構築されています。すべての Web サイトは多数の Web ページで構成されています。各 Web ページがハイパーリンクによってリンクされて初めて、Web サイトが真に形成されます。インターネットの「ネット」はハイパーリンクの存在によって実現されます。
2.HTMLハイパーリンク(リンク) -- <a>タグ
HTML では、<a>タグを使用してハイパーテキスト リンクを設定します。
ハイパーリンクには、単語、単語、単語のグループ、または画像を指定できます。これらのコンテンツをクリックすると、新しい文書または現在の文書の特定の部分にジャンプします。
Web ページ上のリンク上にマウス ポインタを移動すると、矢印が小さな手に変わります。
href 属性は、リンクのアドレスを記述するために<a>タグ内で使用されます。
デフォルトでは、リンクはブラウザに次のように表示されます。
未訪問のリンクは青色のフォントと下線で表示されます。
訪問したリンクは紫色で下線付きで表示されます。
リンクをクリックすると、赤く下線が引かれて表示されます。
<a> リンク コードの形式:
<a href="url(跳转目标地址)" target="opentype(规定在何处打开链接)" title="text(提示文本)"> 链接文本 </a>3. <a>タグの各種属性
href 属性:
ハイパーリンク先の URL を指定します。href 属性がリンクとして指定されていない場合、<a>タグはリンクになりません。href にはさまざまな形式があります。たとえば、次のとおりです。
外部リンク:他の Web サイトのページにジャンプします。「http://」または「https://」を忘れずに追加してください。のように：
<a href="https://www.html.com">HTML</a>内部リンク:同じ Web サイト内の他のページにジャンプします。内部ページ名を直接リンクするだけです。href は Web ページ (.html、.php、.jsp、.asp などの形式) を指します。のように：
<a href="html.html">HTML</a>空のリンク:このページへのリンク、現在のページへのリンク。のように：
<a href="#">首页</a>ダウンロード リンク: href 内のアドレスがファイルまたは圧縮パッケージの場合、ファイルがダウンロードされます。href は、圧縮ファイル (.zip、.rar などの形式)、実行可能プログラム (.exe) などを指します。
<a href="./src/uploads/html_a.zip">下载文件</a>注: HTML5 の新しい属性: download は、ダウンロードされるターゲットを指定します。つまり、ターゲットはクリック後に直接ダウンロードされます。
<a href="./src/assets/img/img01.png" download="img01.png">下载图片</a>Web ページ要素のリンク:ハイパーリンクは、テキスト、画像、表、オーディオ、ビデオなど、Web ページ内のさまざまな Web ページ要素に追加できます。href は、次のような画像 (.jpg、.gif、.png などの形式)、オーディオ (.mp3、.wav などの形式)、ビデオ (.mp4、.mkv 形式) などのメディア ファイルを指します。
<a href="./src/assets/img/img01.png">加载图片</a>アンカーリンク:同じページ上の指定された位置に配置されます。
<!-- 目标位置标签，里面添加一个id属性=“相同的名字” -->
<h1 id="head"> top </h1>
...
<!-- 链接文本的href属性中,设置属性值为“#相同的名字”的形式 -->
<a href="#head"> 回顶部 </a>注: href (必須属性) は、リンク先の URL アドレスを指定するために使用され、ラベルに href 属性を適用すると、ハイパーリンクの機能を持ちます。href 属性が使用されていない場合、それはハイパーリンクではないため、hreflang、media、rel、target、および type 属性は使用できません。
href は基本的に、ほぼすべての形式のファイルを指します。ブラウザがこの形式をサポートしている場合、一般的な画像、音声、ビデオなどをブラウザ上に表示できます。ブラウザがこの形式をサポートしていない場合、ユーザーはダウンロードするように求められます。
href で使用されるパスは、アクセスしているページが内部ページか外部ページかに応じて、相対パスまたは絶対パスになります。href は、リンクにアクセスするために必ずしも書かれたテキストをクリックする必要はなく、画像、カルーセル、CSS モジュール、その他の要素でも構いません。
ターゲット属性:
ターゲット URL を開く場所を指定します。デフォルトでは、ハイパーリンクは現在のブラウザ ウィンドウで開きます。ジャンプ方法は次のとおりです。
target="_self" //默认，当前页面跳转。
target="_blank" //新窗口打开。
target="_parent" //在父窗口中打开链接。。
target="_top" //在当前窗体打开链接，并替换当前的整个窗体(框架页)。
target="_framename" //在指定的框架中打开网页。注: target 属性は、href 属性値が存在する場合にのみ使用されます。デフォルト値は「_self」です。現在のウィンドウで新しいページを開くと、現在のページが上書きされます。通常の状況では、ターゲット属性は書き込まれずにデフォルトのままになるか、「_blank」に設定されて新しいウィンドウでリンクが開かれます。
4.<a>タグのデフォルトスタイル
マウスのスタイル:
Web ページ上のリンク上にマウス ポインタを移動すると、矢印が小さな手に変わります。
リンクスタイル:
<a>タグには 3 つのデフォルト スタイルと 5 つの状態があります。
未訪問のリンクは青色のフォントと下線で表示されます。
訪問したリンクは紫色で下線付きで表示されます。
リンクをクリックすると、赤く下線が引かれて表示されます。
<!-- css样式设置，五种状态的设置 -->
:link //用于声明未访问状态链接的样式；
:visited //用于声明已经访问链接的样式；
:hover //用于声明鼠标悬停在链接上的样式；
:focus //用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；
:active //用于声明浏览器点击链接的样式。注:一般に、a:hover リンクと a:visited リンクのステータス (色、下線など) は同じである必要があります。<a> タグ スタイルの表示プロセス全体は、a:link ->a:hover ->a:active ->a:visited (:focus は順序に関係なく自由に設定できます) です。さらに、a:active は下線の有無にかかわらず設定できません (下線は常に存在します)。
W3C 仕様ではリンクの宣言順序が規定されているため、CSS 定義では、a:hover は a:link および a:visited の後に配置され、a:active は a:hover の後に配置されなければ有効になりません。
5. <a>タグのプロトコル修飾子と共通プロトコル
プロトコル修飾子:
JavaScript はプロトコル修飾子です。
<a href="javascript:alert('???');">点我</a>注: JavaScript を記述した後、<a> タグをクリックすると、JavaScript コードが強制的に実行されます。
一般的に使用されるプロトコル:
Mailto プロトコル (メール プロトコル) をクリックすると、メールを送信するためのウィンドウが自動的に表示されます。
<a href="mailto:[email protected]">发邮件给我</a>tel プロトコル（電話プロトコル）をクリックすると、電話をかけるためのウィンドウが自動的に表示されます。
<a href="tel:123456789">发邮件给我</a>ファイル プロトコル (ファイル プロトコル)、SMS メッセージ プロトコル、Thunder (Thunder のプロトコル)、ftp プロトコルなどもあります。
6.よく使われる<a>タグの例
画像をクリックするとリンクにジャンプします（カルーセル画像表示もよく使われます）。
<a href="https://html.com/" target="_blank">
<img src="./img01.png" alt="HTML">
</a>画像をクリックして画像をダウンロードします:
<a href="./src/assets/img/img01.png" download="img01.png" target="_blank">
<img src="./src/assets/img/img01.png"" alt="HTML">
</a>