HTML 中的圖像連結(jié)幾乎存在於所有頁面中，因為它們幫助我們從網(wǎng)站上的一個頁面導(dǎo)航到另一個頁面。一種流行的組合是使用 HTML 錨標(biāo)記 。帶有 HTML 的 img 標(biāo)籤 。透過這種組合，我們可以允許使用者透過點擊圖像從一個頁面移動到另一個頁面。在我們進(jìn)一步深入討論這個主題之前，讓我們先了解錨點和圖像元素的工作和渲染，然後將它們組合起來以實現(xiàn)連結(jié)圖像。

HTML 錨標(biāo)記

HTML 錨標(biāo)記用於建立指向其他網(wǎng)頁或網(wǎng)路上託管的多媒體內(nèi)容的 HTML 超連結(jié)。讓我們參考下面的語法來了解錨標(biāo)籤的工作原理及其基本屬性

點此！ ！

在上面的範(fàn)例中，「href」屬性指定了我們希望在使用者點擊文字「點擊這裡??！」時將其重定向到的網(wǎng)頁的 URL。

讓我們來看看下面的完整程式碼：

輸出

–>

透過上面的例子，您將能夠做出以下觀察

1. 未造訪的連結(jié)將顯示為藍(lán)色底線。對於，例如這是一個未訪問過的連結(jié)
2. 造訪過的連結(jié)將顯示下劃線並呈現(xiàn)紫色。對於，例如這是一個已經(jīng)訪問過的連結(jié)
3. 活動連結(jié)顯示為紅色底線。對於，例如這是一個活躍的連結(jié)

HTML?影像標(biāo)籤

在瀏覽網(wǎng)路時，我相信您一定看過幾個包含各種形式多媒體的網(wǎng)頁。特別是圖像是一種流行的多媒體形式，幾乎可以在當(dāng)今所有互動式網(wǎng)頁和網(wǎng)站中找到。讓我們透過下面的範(fàn)例來了解圖像標(biāo)籤及其在 HTML 中的實現(xiàn)：

文法

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

現(xiàn)在讓我們來了解 img 標(biāo)籤中的每個屬性是如何運作的：

1. src: src 屬性定義我們嘗試使用此標(biāo)籤載入的圖片檔案路徑。它可以連結(jié)到網(wǎng)路上託管的圖像（格式如 example.com/images/dummy.png）或本地託管在與網(wǎng)頁相同的伺服器上的圖像檔案。
2. alt: alt 屬性定義我們想要顯示的圖像的文字和描述，以防圖像因網(wǎng)路連接或任何其他問題而無法載入。
3. 寬度和高度：這兩個屬性的寬度和高度定義了我們要在網(wǎng)頁上顯示的圖像的寬度和高度。否則，圖像將預(yù)設(shè)使用 100% 的高度和寬度。

現(xiàn)在讓我們看看在網(wǎng)頁上載入圖片所需的完整 HTML 程式碼。將下列映像以「sunset.png」名稱儲存到本機(jī)磁碟機(jī)中名為「image_test」的資料夾中。

現(xiàn)在，在同一資料夾中，讓我們使用以下 HTML 程式碼建立一個名為 Sunset.html 的 HTML 檔案：

現(xiàn)在轉(zhuǎn)到您電腦上的瀏覽器並輸入 .html 檔案的路徑。我的檔案儲存在D盤，所以我的路徑是

D:/image_test/sunset.html

現(xiàn)在我們可以看到渲染的 HTML 頁面已在瀏覽器中載入了日落圖像。借助 CSS 和

標(biāo)籤，我們還可以根據(jù)我們的要求在圖像周圍顯示文字。錨點和 img 標(biāo)籤均與所有瀏覽器相容，如 Google Chrome、Safari、Microsoft Edge、Firefox 和 Internet Explorer。

HTML 中的連結(jié)圖

現(xiàn)在我們已經(jīng)透過範(fàn)例了解了錨標(biāo)記和圖像標(biāo)記如何單獨工作，現(xiàn)在讓我們了解如何將這兩種功能結(jié)合起來以實現(xiàn)我們希望用戶透過點擊重定向到新網(wǎng)頁的場景圖像的。要使圖像可點擊並將用戶重定向到另一個網(wǎng)頁，我們只需將圖像嵌套在錨標(biāo)記中即可。在下面的範(fàn)例中，我們將嘗試列出全球使用的前 3 個網(wǎng)路搜尋引擎。在我們的清單中，我們將顯示 3 個搜尋引擎的徽標(biāo)，透過點擊任何徽標(biāo)，使用者將被重定向到相應(yīng)的搜尋引擎頁面。讓我們建立一個名為「redirection test」的資料夾，並在同一資料夾中儲存以下映像

1。谷歌

2。雅虎

3。兵

現(xiàn)在我們將在同一檔案中建立一個名為 imageredirection.html 的 .html。 imageredirection.html 將包含下列程式碼。

現(xiàn)在我們需要從瀏覽器存取 HTML 頁面，為此我將輸入本機(jī)路徑「D:/redirectiontest/ imageredirection.html」。然後瀏覽器將渲染 HTML 檔案以產(chǎn)生以下結(jié)果：

–>

使用者將能夠透過點擊其徽標(biāo)導(dǎo)航到相應(yīng)的搜尋引擎。從上面的例子中，我們可以看出HTML是一種簡單而靈活的語言，它允許我們將多個標(biāo)籤組合在一起並實現(xiàn)這樣的複雜功能。使用 img 和錨標(biāo)記的組合是一種流行的組合。透過額外的 HTML 編碼，我們還可以添加不同的 HTML 元素，例如使用

在有序或無序列表中顯示連結(jié)圖像?；?/ol>
。 HTML 為每個發(fā)布的版本提供了極大的靈活性和簡單性，可協(xié)助 UI 和 UX 設(shè)計師設(shè)計我們在瀏覽網(wǎng)路進(jìn)行日?；顒訒r看到的互動式且直覺的網(wǎng)頁。

推薦文章

這是 HTML 中圖像連結(jié)的指南。在這裡，我們討論不同類型的 HTML 標(biāo)籤以及語法。您也可以閱讀我們其他推薦的文章以了解更多資訊 –
1. HTML 屬性
2. HTML 格式標(biāo)籤
3. HTML 影像標(biāo)籤
4. HTML 框架

以上是HTML 中的圖片連結(jié)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！