首頁 > 文章 > web前端 > HTML 中的圖片連結

HTML 中的圖片連結

PHPz原創: 2024-09-04 16:42:50849瀏覽

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

HTML 錨標記

HTML 錨標記用於建立指向其他網頁或網路上託管的多媒體內容的 HTML 超連結。讓我們參考下面的語法來了解錨標籤的工作原理及其基本屬性

點此！！

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

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

HTML 中的圖片連結

輸出

–>

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

未造訪的連結將顯示為藍色底線。對於，例如這是一個未訪問過的連結
造訪過的連結將顯示下劃線並呈現紫色。對於，例如這是一個已經訪問過的連結
活動連結顯示為紅色底線。對於，例如這是一個活躍的連結

HTML 影像標籤

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

文法

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

現在讓我們來了解 img 標籤中的每個屬性是如何運作的：

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

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

HTML 中的圖片連結

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

HTML 中的圖片連結

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

D:/image_test/sunset.html

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

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

HTML 中的連結圖

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

1。谷歌

HTML 中的圖片連結