HTML 文字連結

HTML 連結可以是連結或超連結。這會重定向到另一個頁面、圖像或網站；它可以是任何東西。它們也用於在同一頁面上導航特定部分。他們過去只需通過單擊即可呈現數據和文件。我們將文件、圖像、網址或資料包裝在文字中。根據要求，它還可以指向文件、物件或同一頁面或不同頁面上的任何內容。當我們將滑鼠懸停在 HTML 連結上時，它會將遊標變更為其他圖示。我們可以在文章的下一部分討論它們的工作原理以及如何創建它們。在本主題中，我們將學習 HTML 文字連結。

HTML 連結語法

我們可以使用下面的語法來建立我們的第一個 HTML 連結。我們將在下面給定的語法中使用不同的標籤、屬性和相應的屬性。

<a url>Link your corresponding text here</a>

在上面的語法中，我們使用錨標記來建立 html 連結或超連結。我們將詳細討論這個錨標記。

錨標記是我們可以附加或連結文字、短語或單字以建立外部或內部連結的標記。透過使用錨標籤；我們在頁面中建立一個 URL，可用於導航到任何其他頁面、網站或頁面上的同一部分。

使用錨標籤，我們有以下提到的許多優點。

• 組織：它有助於組織我們的資料。我們不需要製作多個網頁或將資料分成多個區塊來管理；我們可以輕鬆地將資料組織在一個地方。
• 無滾動：透過使用html鏈接或html內部鏈接，我們不需要擔心在很長的頁面上滾動；我們可以點擊該鏈接找到所需的部分頁面。因此，可以輕鬆找到頁面上的任何資料或部分。

如何建立錨標籤？

正如你在上面的語法中看到的，我們現在已經在那裡使用了很多東西；我們將更仔細地了解如何創建及其工作原理。

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

1. href 屬性
2. 目標屬性
3. 名稱屬性

1. href 屬性

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

所以，例如：

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

在此，http://www.google.com 是我們指派給 href 屬性的值。因此，每當我們點擊 Google 時，它都會將我們重新導向到 Google 主頁連結。因此 href 屬性包含文件位址。我們也可以在 href 中提及我們自己的 HTML 連結。

例如

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

2.目標屬性

目標屬性定義文件的開啟方式。它有很多種，我們可以根據自己的需求來使用。

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

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

這裡的 target=”_blank” 是使用它的語法。

3.名稱屬性

name屬性用於跳轉或導航到頁面上的某個點；當我們有一個包含大量內容的重要 VRU 頁面時，這會很有用。這有助於節省用戶的發現和時間，而無需滾動。文法如下：

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

在此，我們點擊以轉到頁面末尾而不向下滾動。

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

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

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

透過這個，我們可以在內部引用其他頁面的「標題」。另外，頁面位址末尾必須使用 (#)。

HTML 連結顏色

我們也可以為 html 連結提供顏色。預設情況下，它們具有三種連結顏色狀態；這將出現在所有瀏覽器中。

• 活動連結：當我們點擊任何連結時，它就會變成帶有下劃線和紅色的活動連結。
• 未造訪的連結：未造訪的連結的標準瀏覽器預設顏色為藍色並帶有下劃線。
• 造訪過的連結：這些是紫色的並帶有下劃線。

但我們也可以使用以下語法提供自訂顏色來連結。我們可以遵循這種不同的類型來為我們的連結賦予顏色。但我們在這裡使用內聯 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 文字連結的詳細內容。更多資訊請關注PHP中文網其他相關文章！