如何在 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>
單擊影像後,它將重定向到目標網頁。
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP