如何在 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>

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

示例

在下面的示例中，我們在網頁文件中連結了 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>

以下是影像作為連結的輸出，單擊影像將導航到 Google 主頁。

更新於: 2023-09-01

83K+ 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

立即開始
廣告