HTML リンクは、リンクまたはハイパーリンクです。これにより、別のページ、畫像、または Web サイトにリダイレクトされます。それは何でも構(gòu)いません。これらは、同じページ內(nèi)の特定のセクションに移動するためにも使用されます。以前は、データやドキュメントをクリックするだけでレンダリングされていました。ドキュメント、畫像、URL、またはデータをテキスト內(nèi)にラップします。要件に応じて、同じページまたは別のページ上のファイル、オブジェクト、またはその他のものを指すこともできます。 HTML リンクの上にマウスを置くと、カーソルが別のアイコンに変わります。これらがどのように機能するか、およびそれらを作成する方法については、記事の次のセクションで説明します。このトピックでは、HTML テキスト リンクについて學(xué)習(xí)します。

HTML リンクの構(gòu)文

以下の構(gòu)文から最初の HTML リンクを作成できます。以下の指定された構(gòu)文では、別のタグ、屬性、および対応するプロパティを使用します。

<a?href="your url">Link your corresponding text here</a>

上記の構(gòu)文では、アンカー タグを使用して HTML リンクまたはハイパーリンクを作成します。このアンカー タグについては後で詳しく説明します。

アンカー タグは、テキスト、フレーズ、または単語を添付またはリンクして、外部リンクまたは內(nèi)部リンクを作成できるタグです。アンカータグを使用する。他のページ、ウェブサイト、またはページ上の同じセクション內(nèi)に移動するために使用できる URL をページ內(nèi)に作成します。

アンカータグを使用すると、以下に示す多くの利點があります。

• 整理: データを整理するのに役立ちます。管理のために複數(shù)の Web ページを作成したり、データをいくつかのチャンクに分割したりする必要はありません。データを 1 か所だけで簡単に整理できます。
• スクロールなし: HTML リンクまたは HTML 內(nèi)部リンクを使用すると、非常に長いページのスクロールを心配する必要がなくなります。そのリンクをクリックすると、目的のセクション ページを見つけることができます。そのため、ページ上のデータやセクションを簡単に見つけることができます。

アンカー タグを作成するには?

上記の構(gòu)文でわかるように、ここでは非常に多くのものを使用しています。作成方法とその仕組みを詳しく見ていきます。

これは 3 つの異なる部分 (屬性) で構(gòu)成されます:

1. href 屬性
2. ターゲット屬性
3. 名前屬性

1. href 屬性

Href 屬性はハイパーテキスト參照を表します。ハイパーリンクを作成したいとします。そのため、最初の要件は、別の Web サイトや PDF などのファイルなど、任意のドキュメント アドレスです。

たとえば:

<a href="http://www.google.com">Google</a>

この例では、http://www.google.com が href 屬性に割り當(dāng)てられる値です。したがって、Google をクリックするたびに、Google ホームページのリンクにリダイレクトされます。したがって、 href 屬性にはドキュメントのアドレスが含まれます。 href への獨自の HTML リンクを言及することもできます。

たとえば

<a href="demo.html">My page</a>

2.ターゲット屬性

target 屬性は、ドキュメントを開く方法を定義します。種類も豊富で、用途に合わせて使い分けられます。

• _parent: 添付されたドキュメントを親フレームに開くだけです。
• _blank: ドキュメントを新しいタブまたはウィンドウで開きます。
• _top: 添付文書を全ウィンドウで開きます。
• _self: クリックしたのと同じウィンドウまたは同じタブでドキュメントを開きます。デフォルトでは、このターゲットは有効になっています。以下のように変更できます:

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

ここでの target=”_blank” は、それを使用するための構(gòu)文です。

3.名前屬性

name 屬性は、ページ上の特定のポイントにジャンプまたは移動するために使用されます。これは、非常に多くのコンテンツを含む重要な VRU ページがある場合に役立ちます。これにより、スクロールせずにユーザーの発見と時間を節(jié)約できます。以下の構(gòu)文:

<a name="to end"></a> or

ここでは、クリックして下にスクロールせずにページの最後に移動します。

<a href="#SomeSection">Section</a>

このブラウザはセクションを識別しますが、name 屬性には (#) を使用する必要があります。

<a href="otherpage.html#title">Link your text</a>

これにより、內(nèi)部的に他のページの「タイトル」を參照することができます。ここでも、ページのアドレスの末尾に (#) を使用する必要があります。

HTML リンクの色

HTML リンクに色を指定することもできます。デフォルトでは、リンクの色には 3 つの狀態(tài)があります。これはすべてのブラウザに表示されます。

• アクティブ リンク: リンクをクリックすると、赤色の下線付きのアクティブ リンクになります。
• 未訪問のリンク: 未訪問のリンクの標(biāo)準(zhǔn)ブラウザのデフォルト色は青で下線付きです。
• 訪問したリンク: これらは紫色で下線が引かれています。

ただし、以下の構(gòu)文を使用してリンクにカスタムカラーを提供することもできます。この異なるタイプに従って、リンクに色を付けることができます。ただし、ここではインライン CSS を使用しています。必要に応じて、外部 CSS を作成することもできます。

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion –?HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

以上がHTMLテキストリンクの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。