如何在 HTML 頁面中建立頁面連結?


連結是從一個網頁到另一個網頁的連線。

我們可以向網頁新增頁面連結。 HTML 連結 是超連結。 <a> 標籤定義了超連結,用於在頁面之間建立連結。 href 屬性與 <a> 標籤一起使用,指示連結的目標。

要在 HTML 頁面 中建立頁面連結,我們需要使用 <a></a> 標籤的 href 屬性。確保 <a></a> 標籤放置在 <body>…</body> 標籤 內。

連結文字是可見的。單擊連結文字將導航到指定的 URL 地址。預設情況下,連結在瀏覽器網頁上顯示如下。

  • 未訪問的連結是下劃線和藍色的

  • 已訪問的連結是下劃線和紫色的

  • 活動的連結是下劃線和紅色的

語法

以下是建立網頁頁面連結的語法。

<a href="https://www.Google.com/"> text of the link </a>

示例

以下示例程式演示如何在網頁文件上建立頁面連結。

<!DOCTYPE html> <html> <body> <h1>HTML Article on Links </h1> <p><a href="https://www.Google.com/">Click this to navigate to the Google home page</a></p> </body> </html>

以下是未訪問連結的輸出。當我們單擊連結時,它將引導我們到谷歌搜尋引擎的主頁。因此,連結將被訪問並顯示為下劃線和紫色。

示例

在下面的示例中,我們在網頁文件上鍊接了 tutorialspoint 的官方頁面。

<!DOCTYPE html> <html> <head> <title>HTML Links</title> </head> <body> <h1>Click the link below and navigate the official page of tutorialspoint</h1> <a href="https://tutorialspoint.tw/index.htm">TUTORIALSPOINT</a> </body> </html>

如果我們單擊連結,它將重定向到目標頁面。當我們單擊連結時,它將引導我們到 tutorialspoint 網頁的主頁。

使用影像作為超連結

我們可以新增影像作為連結,以及其他 HTML 元素作為連結。

語法

以下是將影像新增為網頁連結的語法。

<a href="link address"><img src="image destination"></a>

示例

以下是如何將影像設定為連結的示例程式。

<!DOCTYPE html> <html> <body> <h1>HTML Article on Links </h1> <p><a href="https://www.Google.com/"><img src="https://tutorialspoint.tw/javafx/images/javafx-mini-logo.jpg" style="width:50px;height:50px;"></a></p> </body> </html>

以下是影像作為連結的輸出,單擊影像將引導我們到谷歌主頁。

更新於: 2023-09-01

83K+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.