連結(jié)簡單地定義為可單擊的文本,因此只要單擊此文本,它就可以幫助從一個頁面移動到另一個頁面。您可以提供指向頁面、圖像或網(wǎng)站等任何元素的鏈接,以便從一個頁面移動到另一個頁面。 HTML 連結(jié)使用 帶有 href 屬性的標(biāo)籤,其中包含實際上要跳躍的路徑。預(yù)設(shè)情況下,HTML 程式碼中包含的任何連結(jié)都以藍色顯示。如果該連結(jié)之前已被使用者造訪過,它將顯示為紫色。我們也可以使用 CSS 來更改此連結(jié)的顏色。在本主題中,我們將學(xué)習(xí) HTML 中的連結(jié)頁面。
HTML 連結(jié)頁面的語法
讓我們看看如何使用 HTML 來實際完成頁面鏈接,如下所示:
文法:
<a href="url"> Text_Content </a>
在上述語法中,錨標(biāo)記有助於使用目標(biāo)連結(jié)等定義的屬性來定義和開啟新的目標(biāo)頁面或文件。
這與我們之前在 HTML 檔案路徑內(nèi)容中看到的絕對檔案路徑完全一樣。
文法:
<a href="url"></a<strong>>
我們也可以透過使用相同的語法定義該內(nèi)容的簡單路徑來開啟網(wǎng)站的特定頁面或部分。
如果我們必須開啟特定頁面,那麼也可以使用相對檔案路徑,例如
文法:
<a href="page_name.html"></a>
我們可以使用 HTML 連結(jié)做一件更有趣的事情,因為我們可以使用語法開啟一個空白瀏覽器視窗或在新視窗中開啟網(wǎng)頁。
文法:
<a href="Browser's _URL" target="_blank"></a>
如果我們想要在父親視窗中開啟網(wǎng)頁,那麼也可以使用以下語法:
文法:
<a href="path" target="_parent"> </a>
如何使用 HTML 連結(jié)頁面?
如前所述,我們已經(jīng)了解如何使用帶有 href 屬性的錨標(biāo)記來連結(jié)網(wǎng)頁、圖像和其他文檔,即定義絕對路徑和相對路徑等文件路徑。
我們也熟悉如何處理連結(jié)的目標(biāo)來執(zhí)行功能,例如開啟新的空白視窗、在父視窗中開啟網(wǎng)頁、在自身視窗中開啟頁面(就像我們預(yù)設(shè)使用的那樣)、開啟文件在完整的瀏覽器視窗中使用_top 屬性和更多東西。
建立書籤的連結(jié)
讓我們看看如何使用 HTML 中的連結(jié)建立書籤錨點。這些功能可用作我們網(wǎng)頁的書籤;每當(dāng)我們想要從大頁面資料中尋找某些內(nèi)容時,只需定義一些文字或文件作為連結(jié)即可直接跳到該目標(biāo)位置。
要定義書籤,我們必須將id 作為屬性新增至特定元素,透過傳遞名為「#」的符號(包含在標(biāo)籤 內(nèi)的href 中)來跳到比其值實際要跳到的位置。 。如下圖:
範(fàn)例:
<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 屬性的錨標(biāo)記中即可;如下:
範(fàn)例:
<a href="Demo.html #contactus"> Contact US </a>
下載文件的連結(jié)
借助 HTML 鏈接,我們還可以創(chuàng)建幫助我們下載文件的鏈接。它與將文字定義為連結(jié)相同,只是將目標(biāo)文件的路徑新增為 URL,因此每當(dāng)我們單擊此連結(jié)時,就會自動下載連接的文件或網(wǎng)頁。所以我們可以下載PDF、zip、jpg等檔案類型
範(fàn)例:
<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 連結(jié):HTML 連結(jié)的另一個功能是將圖片視為 HTML 文件中的連結(jié);這可以定義如下:
範(fàn)例:
<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>
按鈕作為連結(jié):也可以在 HTML 中將按鈕定義為連結(jié);此外,我們還必須添加一些 JavaScript 程式碼。因此,每當(dāng)發(fā)生點擊事件時,就會開啟連結(jié)的頁面。
HTML 連結(jié)頁面範(fàn)例
以下是下面提到的範(fàn)例
範(fàn)例#1
在此範(fàn)例中,我們?yōu)橐粋€網(wǎng)站添加一個簡單的 HTML 鏈接,另一個是本地儲存在我們系統(tǒng)中的網(wǎng)頁。
代碼:
<!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>
輸出:

對於第一個鏈接,它將打開網(wǎng)站

對於第二個鏈接,它將打開本地系統(tǒng)中儲存的網(wǎng)頁

範(fàn)例#2
這個範(fàn)例說明我們使用連結(jié)在點擊時在新分頁中開啟網(wǎng)頁,並使用圖片作為連結(jié)來開啟新文件。
代碼:
<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>
輸出:

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

Image as a link to open another webpage:

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:

Whenever we are going to click on the button, it will work as a link to open another page:

Conclusion
Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.
以上是HTML 中的連結(jié)頁面的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!