如何在 HTML 中使用絕對 URL 連結頁面？

在 HTML 中，不同的 HTML 元素具有包含指向其他資源連結的屬性。這些屬性的值是 URL，可以是絕對 URL 或相對 URL。

  • 絕對 URL 用於連結網頁上的資源，它包含網站地址。

  • 絕對 URL 永遠不會改變。

  • 我們也可以使用絕對 URL 來連結網頁上同一站點內的資源。

以下連結包含協議和域名（主機名），這使其成為一個絕對 URL。

<a href="www.Google.com">Link text…</a>

絕對 URL 以檔案所在的域開始。

語法

以下是使用絕對 URL 連結頁面的語法。

<a href="absolute URL">Link text…</a>

示例

以下是使用絕對 URL 連結頁面的示例程式。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU">HTML tutorial</a>
</body>
</html>

以下是上述示例程式的輸出。域名是 YouTube，當我們點選連結時，它會直接將我們導航到同一網站的不同頁面。

示例

以下是使用絕對 URL 連結頁面的示例程式。

<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
</head>
<body>
   <h2>Click the link below to redirect to instagram login page</h2>
   <a href="https://www.instagram.com/accounts/login/">Instagram login</a>
</body>
</html>

示例

以下是使用絕對 URL 連結頁面的示例程式，並使用 CSS 更改了超連結的樣式。

<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
   <style>
      a:link {
         text-decoration: none;
      }
      a:visited {
         text-decoration: none;
      }
      a:hover {
         text-decoration: underline;
      }
      a:active {
         text-decoration: underline;
      }
   </style>
</head>
<body>
<h2>Click the link below to redirect to facebook login page</h2>
<a href="https://#/login/">facebook login</a>
</body>
</html>

更新於：2022年11月11日

3K+ 次瀏覽

啟動你的 職業生涯

完成課程獲得認證

開始學習
廣告