HTML 連結(jié)可以是連結(jié)或超連結(jié)。這會(huì)重定向到另一個(gè)頁(yè)面、圖像或網(wǎng)站；它可以是任何東西。它們也用於在同一頁(yè)面上導(dǎo)航特定部分。他們過(guò)去只需通過(guò)單擊即可呈現(xiàn)數(shù)據(jù)和文件。我們將文件、圖像、網(wǎng)址或資料包裝在文字中。根據(jù)要求，它還可以指向文件、物件或同一頁(yè)面或不同頁(yè)面上的任何內(nèi)容。當(dāng)我們將滑鼠懸停在 HTML 連結(jié)上時(shí)，它會(huì)將遊標(biāo)變更為其他圖示。我們可以在文章的下一部分討論它們的工作原理以及如何創(chuàng)建它們。在本主題中，我們將學(xué)習(xí) HTML 文字連結(jié)。

HTML 連結(jié)語(yǔ)法

我們可以使用下面的語(yǔ)法來(lái)建立我們的第一個(gè) HTML 連結(jié)。我們將在下面給定的語(yǔ)法中使用不同的標(biāo)籤、屬性和相應(yīng)的屬性。

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

在上面的語(yǔ)法中，我們使用錨標(biāo)記來(lái)建立 html 連結(jié)或超連結(jié)。我們將詳細(xì)討論這個(gè)錨標(biāo)記。

錨標(biāo)記是我們可以附加或連結(jié)文字、短語(yǔ)或單字以建立外部或內(nèi)部連結(jié)的標(biāo)記。透過(guò)使用錨標(biāo)籤；我們?cè)陧?yè)面中建立一個(gè) URL，可用於導(dǎo)航到任何其他頁(yè)面、網(wǎng)站或頁(yè)面上的同一部分。

使用錨標(biāo)籤，我們有以下提到的許多優(yōu)點(diǎn)。

• 組織：它有助於組織我們的資料。我們不需要製作多個(gè)網(wǎng)頁(yè)或?qū)①Y料分成多個(gè)區(qū)塊來(lái)管理；我們可以輕鬆地將資料組織在一個(gè)地方。
• 無(wú)滾動(dòng)：透過(guò)使用html鏈接或html內(nèi)部鏈接，我們不需要擔(dān)心在很長(zhǎng)的頁(yè)面上滾動(dòng)；我們可以點(diǎn)擊該鏈接找到所需的部分頁(yè)面。因此，可以輕鬆找到頁(yè)面上的任何資料或部分。

如何建立錨標(biāo)籤？

正如你在上面的語(yǔ)法中看到的，我們現(xiàn)在已經(jīng)在那裡使用了很多東西；我們將更仔細(xì)地了解如何創(chuàng)建及其工作原理。

它由三個(gè)不同的部分（屬性）組成：

1. href 屬性
2. 目標(biāo)屬性
3. 名稱屬性

1. href 屬性

Href 屬性代表超文本引用。假設(shè)我們要建立一個(gè)超鏈接，那麼第一個(gè)要求是一個(gè)文件地址，可以是任何其他網(wǎng)站、PDF等文件

所以，例如：

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

在此，http://www.google.com 是我們指派給 href 屬性的值。因此，每當(dāng)我們點(diǎn)擊 Google 時(shí)，它都會(huì)將我們重新導(dǎo)向到 Google 主頁(yè)連結(jié)。因此 href 屬性包含文件位址。我們也可以在 href 中提及我們自己的 HTML 連結(jié)。

例如

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

2.目標(biāo)屬性

目標(biāo)屬性定義文件的開(kāi)啟方式。它有很多種，我們可以根據(jù)自己的需求來(lái)使用。

• _parent:它只是將附加文件開(kāi)啟到父框架中。
• _blank:它將文件開(kāi)啟到新分頁(yè)或視窗中。
• _top:它會(huì)在全視窗中開(kāi)啟附件文件。
• _self: 它將文件開(kāi)啟到按一下它的相同視窗或相同標(biāo)籤中。預(yù)設(shè)情況下，此目標(biāo)已啟用。我們可以像下面這樣修改它：

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

這裡的 target=”_blank” 是使用它的語(yǔ)法。

3.名稱屬性

name屬性用於跳轉(zhuǎn)或?qū)Ш降巾?yè)面上的某個(gè)點(diǎn)；當(dāng)我們有一個(gè)包含大量?jī)?nèi)容的重要 VRU 頁(yè)面時(shí)，這會(huì)很有用。這有助於節(jié)省用戶的發(fā)現(xiàn)和時(shí)間，而無(wú)需滾動(dòng)。文法如下：

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

在此，我們點(diǎn)擊以轉(zhuǎn)到頁(yè)面末尾而不向下滾動(dòng)。

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

此瀏覽器將識(shí)別該部分，但我們必須使用 (#) 和 name 屬性。

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

透過(guò)這個(gè)，我們可以在內(nèi)部引用其他頁(yè)面的「標(biāo)題」。另外，頁(yè)面位址末尾必須使用 (#)。

HTML 連結(jié)顏色

我們也可以為 html 連結(jié)提供顏色。預(yù)設(shè)情況下，它們具有三種連結(jié)顏色狀態(tài)；這將出現(xiàn)在所有瀏覽器中。

• 活動(dòng)連結(jié)：當(dāng)我們點(diǎn)擊任何連結(jié)時(shí)，它就會(huì)變成帶有下劃線和紅色的活動(dòng)連結(jié)。
• 未造訪的連結(jié)：未造訪的連結(jié)的標(biāo)準(zhǔn)瀏覽器預(yù)設(shè)顏色為藍(lán)色並帶有下劃線。
• 造訪過(guò)的連結(jié)：這些是紫色的並帶有下劃線。

但我們也可以使用以下語(yǔ)法提供自訂顏色來(lái)連結(jié)。我們可以遵循這種不同的類型來(lái)為我們的連結(jié)賦予顏色。但我們?cè)谶@裡使用內(nèi)聯(lián) 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 文字連結(jié)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！