鏈接簡(jiǎn)單地定義為可單擊的文本,因此只要單擊此文本,它就可以幫助從一個(gè)頁面移動(dòng)到另一個(gè)頁面。您可以提供指向頁面、圖像或網(wǎng)站等任何元素的鏈接,以便從一個(gè)頁面移動(dòng)到另一頁面。 HTML 鏈接使用 帶有 href 屬性的標(biāo)簽,其中包含實(shí)際上要跳轉(zhuǎn)的路徑。默認(rèn)情況下,HTML 代碼中包含的任何鏈接都以藍(lán)色顯示。如果該鏈接之前已被用戶訪問過,它將顯示為紫色。我們也可以使用 CSS 來更改此鏈接的顏色。在本主題中,我們將學(xué)習(xí) HTML 中的鏈接頁面。
HTML 鏈接頁面的語法
讓我們看看如何使用 HTML 來實(shí)際完成頁面鏈接,如下所示:
語法:
<a href="url"> Text_Content </a>
在上述語法中,錨標(biāo)記有助于使用目標(biāo)鏈接等定義的屬性來定義和打開新的目標(biāo)頁面或文檔。
這與我們之前在 HTML 文件路徑內(nèi)容中看到的絕對(duì)文件路徑完全一樣。
語法:
<a href="url"></a<strong>>
我們還可以通過使用相同的語法定義該內(nèi)容的簡(jiǎn)單路徑來打開網(wǎng)站的特定頁面或部分。
如果我們必須打開特定頁面,那么也可以使用相對(duì)文件路徑,例如
語法:
<a href="page_name.html"></a>
我們可以使用 HTML 鏈接做一件更有趣的事情,因?yàn)槲覀兛梢允褂谜Z法打開一個(gè)空白瀏覽器窗口或在新窗口中打開網(wǎng)頁。
語法:
<a href="Browser's _URL" target="_blank"></a>
如果我們想在父窗口中打開網(wǎng)頁,那么也可以使用如下語法:
語法:
<a href="path" target="_parent"> </a>
如何使用 HTML 鏈接頁面?
如前所述,我們已經(jīng)了解了如何使用帶有 href 屬性的錨標(biāo)記來鏈接網(wǎng)頁、圖像和其他文檔,即定義絕對(duì)路徑和相對(duì)路徑等文件路徑。
我們還熟悉如何處理鏈接的目標(biāo)來執(zhí)行功能,例如打開新的空白窗口、在父窗口中打開網(wǎng)頁、在自身窗口中打開頁面(就像我們默認(rèn)使用的那樣)、打開文檔在完整的瀏覽器窗口中使用 _top 屬性和更多東西。
創(chuàng)建書簽的鏈接
讓我們看看如何使用 HTML 中的鏈接創(chuàng)建書簽錨點(diǎn)。這些功能可用作我們網(wǎng)頁的書簽;每當(dāng)我們想要從大頁面數(shù)據(jù)中查找某些內(nèi)容時(shí),只需定義一些文本或文檔作為鏈接即可直接跳轉(zhuǎn)到該目標(biāo)位置。
要定義書簽,我們必須將 id 作為屬性添加到特定元素,通過傳遞名為“#”的符號(hào)(包含在標(biāo)簽 內(nèi)的 href 中)來跳轉(zhuǎn)到比其值實(shí)際要跳轉(zhuǎ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>
還可以直接從另一個(gè)頁面打開特定部分,只需將該頁面的 url 定義到帶有 href 屬性的錨標(biāo)記中即可;如下:
示例:
<a href="Demo.html #contactus"> Contact US </a>
下載文檔的鏈接
借助 HTML 鏈接,我們還可以創(chuàng)建幫助我們下載文檔的鏈接。它與將文本定義為鏈接相同,只是將目標(biāo)文件的路徑添加為 URL,因此每當(dāng)我們單擊此鏈接時(shí),就會(huì)自動(dòng)下載連接的文檔或網(wǎng)頁。所以我們可以下載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 鏈接的另一個(gè)功能是將圖像視為 HTML 文檔中的鏈接;這可以定義如下:
示例:
<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>
按鈕作為鏈接:也可以在 HTML 中將按鈕定義為鏈接;此外,我們還必須添加一些 JavaScript 代碼。因此,每當(dāng)發(fā)生點(diǎn)擊事件時(shí),就會(huì)打開鏈接的頁面。
HTML 鏈接頁面示例
以下是下面提到的示例
示例#1
在此示例中,我們向一個(gè)網(wǎng)站添加一個(gè)簡(jiǎn)單的 HTML 鏈接,另一個(gè)是本地存儲(chǔ)在我們系統(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>
輸出:

對(duì)于第一個(gè)鏈接,它將打開網(wǎng)站

對(duì)于第二個(gè)鏈接,它將打開本地系統(tǒng)中存儲(chǔ)的網(wǎng)頁

示例#2
這個(gè)示例說明我們使用鏈接在單擊時(shí)在新選項(xiàng)卡中打開網(wǎng)頁,并使用圖像作為鏈接來打開新文檔。
代碼:
<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 中的鏈接頁面的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!