HTML 中的連結頁面-html教學-PHP中文網

HTML 連結頁面的語法

如何使用 HTML 連結頁面？

建立書籤的連結

下載文件的連結

HTML 連結頁面範例

範例#2

Example #3

Conclusion

首頁

web前端

html教學

HTML 中的連結頁面

PHPz

Sep 04, 2024 pm 04:51 PM

html html5 HTML Tutorial HTML Properties HTML tags

連結簡單地定義為可單擊的文本，因此只要單擊此文本，它就可以幫助從一個頁面移動到另一個頁面。您可以提供指向頁面、圖像或網站等任何元素的鏈接，以便從一個頁面移動到另一個頁面。 HTML 連結使用帶有 href 屬性的標籤，其中包含實際上要跳躍的路徑。預設情況下，HTML 程式碼中包含的任何連結都以藍色顯示。如果該連結之前已被使用者造訪過，它將顯示為紫色。我們也可以使用 CSS 來更改此連結的顏色。在本主題中，我們將學習 HTML 中的連結頁面。

HTML 連結頁面的語法

讓我們看看如何使用 HTML 來實際完成頁面鏈接，如下所示：

文法：

<a href="url"> Text_Content </a>

登入後複製

在上述語法中，錨標記有助於使用目標連結等定義的屬性來定義和開啟新的目標頁面或文件。

這與我們之前在 HTML 檔案路徑內容中看到的絕對檔案路徑完全一樣。

文法：

<a href="url"></a<strong>>

登入後複製

我們也可以透過使用相同的語法定義該內容的簡單路徑來開啟網站的特定頁面或部分。

如果我們必須開啟特定頁面，那麼也可以使用相對檔案路徑，例如

文法：

<a href="page_name.html"></a>

登入後複製

我們可以使用 HTML 連結做一件更有趣的事情，因為我們可以使用語法開啟一個空白瀏覽器視窗或在新視窗中開啟網頁。

文法：

<a href="Browser's _URL" target="_blank"></a>

登入後複製

如果我們想要在父親視窗中開啟網頁，那麼也可以使用以下語法：

文法：

<a href="path" target="_parent"> </a>

登入後複製

如何使用 HTML 連結頁面？

如前所述，我們已經了解如何使用帶有 href 屬性的錨標記來連結網頁、圖像和其他文檔，即定義絕對路徑和相對路徑等文件路徑。

我們也熟悉如何處理連結的目標來執行功能，例如開啟新的空白視窗、在父視窗中開啟網頁、在自身視窗中開啟頁面（就像我們預設使用的那樣）、開啟文件在完整的瀏覽器視窗中使用_top 屬性和更多東西。

建立書籤的連結

讓我們看看如何使用 HTML 中的連結建立書籤錨點。這些功能可用作我們網頁的書籤；每當我們想要從大頁面資料中尋找某些內容時，只需定義一些文字或文件作為連結即可直接跳到該目標位置。

要定義書籤，我們必須將id 作為屬性新增至特定元素，透過傳遞名為「#」的符號（包含在標籤內的href 中）來跳到比其值實際要跳到的位置。。如下圖：

範例：

<a href="#home"> Homepage </a>
<h4 id="home"> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>

登入後複製

也可以直接從另一個頁面開啟特定部分，只需將該頁面的 url 定義到帶有 href 屬性的錨標記中即可；如下：

範例：

<a href="Demo.html #contactus"> Contact US </a>

登入後複製

下載文件的連結

借助 HTML 鏈接，我們還可以創建幫助我們下載文件的鏈接。它與將文字定義為連結相同，只是將目標文件的路徑新增為 URL，因此每當我們單擊此連結時，就會自動下載連接的文件或網頁。所以我們可以下載PDF、zip、jpg等檔案類型

範例：

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

登入後複製

圖片作為 HTML 連結：HTML 連結的另一個功能是將圖片視為 HTML 文件中的連結；這可以定義如下：

範例：

<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>

登入後複製

按鈕作為連結：也可以在 HTML 中將按鈕定義為連結；此外，我們還必須添加一些 JavaScript 程式碼。因此，每當發生點擊事件時，就會開啟連結的頁面。

HTML 連結頁面範例

以下是下面提到的範例

範例#1

在此範例中，我們為一個網站添加一個簡單的 HTML 鏈接，另一個是本地儲存在我們系統中的網頁。

代碼：

<!DOCTYPE html>
<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
</body>
</html>

登入後複製

輸出：

HTML 中的連結頁面

對於第一個鏈接，它將打開網站

HTML 中的連結頁面

對於第二個鏈接，它將打開本地系統中儲存的網頁

HTML 中的連結頁面

範例#2

這個範例說明我們使用連結在點擊時在新分頁中開啟網頁，並使用圖片作為連結來開啟新文件。

代碼：

<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>

登入後複製

輸出：

HTML 中的連結頁面

The first link to open another page in the new target window:

HTML 中的連結頁面

Image as a link to open another webpage:

HTML 中的連結頁面

Example #3

In this example, we are using Button as a link.

Code:

<!DOCTYPE html>
<html>
<body>
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
</body>
</html>

登入後複製

Output:

HTML 中的連結頁面