如何在 HTML 中使用影像作為連結?


我們可以將影像新增為連結,以及其他HTML元素作為連結。連結是網頁之間的一種連線。

我們可以在網頁中新增頁面連結。HTML 連結 是超連結。<a> 標籤定義了一個超連結,用於在頁面之間建立連結。 href 屬性與 <a> 標籤一起使用,它指示連結的目標。

要在 HTML 頁面中建立頁面連結,請使用 <a> 和 </a> 標籤,並使用 href 屬性定義連結。我們應該在 <body>…</body> 標籤內使用 <a>…</a> 標籤。

語法

以下是將影像新增為網頁連結的語法。

<a href="link address"><img src="image destination"></a>

示例

以下是如何將影像作為連結的示例程式。

<!DOCTYPE html> <html> <body> <p><a href="https://www.Youtube.com/"><img src="https://tutorialspoint.tw/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p> </body> </html>

以下是影像作為連結的輸出,單擊影像將導航到谷歌主頁。

示例

以下是如何將影像作為連結的示例程式。

<!DOCTYPE html> <html> <body> <center> <h2>Image as a Link</h2> <a href="https://tutorialspoint.tw"><img src="https://tutorialspoint.tw/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;"></a> </center> </body> </html>

以下是影像作為連結的輸出,單擊影像將導航到目標網頁。

示例

以下是另一個將影像作為連結的示例程式。

<!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head> <body> The following image works as a link:<br> <a href="https://www.qries.com/"> <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width=150" height="70"> </a> </body> </html>

單擊影像後,它將重定向到目標網頁。

更新於: 2023年8月29日

336K+ 瀏覽量

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.