HTML中連結圖片、網站和電子郵件地址的區別
在本文中,我們將討論在HTML中連結圖片、網站和電子郵件地址的區別。
要在網站中連結或嵌入圖片,可以使用<img>標籤。
要連結網站,我們使用<a>錨點標籤以及href(超文字引用)屬性。
要連結電子郵件地址,我們在<a>錨點標籤的href屬性中使用mailto。
連結圖片
在HTML中,我們使用<img>標籤將圖片嵌入或連結到網站。此標籤需要“src”屬性來指定要連結的圖片路徑,以及“alt”屬性來指定圖片的文字描述。“alt”文字將在圖片由於某種原因無法載入時顯示在頁面上。
語法
以下是HTML <img> 標籤的語法:
<img src = "path of the image" alt = "text description">
示例
在下面的示例中,我們使用HTML <img> 標籤將圖片連結到網頁:
<!DOCTYPE html>
<html>
<head>
<title>Linking an image</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking an image-->
<img src="https://tutorialspoint.tw/images/logo.png?v2" alt="TP logo">
</body>
</html>
輸出
正如我們在輸出中看到的,我們提供的圖片已連結到網頁上。
連結網站
帶有href屬性的HTML <a>錨點標籤用於建立到任何網頁、檔案、電子郵件或同一網頁中特定部分的超連結。
語法
以下是使用HTML <a>錨點標籤連結網站的語法:
<a href = "website address"> Name of the link </a>
示例
在下面的示例中,我們使用帶有href屬性的HTML <a>錨點標籤來連結一個網站:
<!DOCTYPE html>
<html>
<head>
<title>Linking an website</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking a website-->
<a href="https://tutorialspoint.tw/index.htm"> Click here for Tutorialspoint</a>
</body>
</html>
輸出
執行上述程式後,如果點選“點選此處訪問Tutorialspoint”,它將跳轉到目標網頁。
連結郵件地址
要在HTML中連結電子郵件地址,我們使用<a>錨點標籤以及在href屬性中的mailto。
語法
以下是HTML中連結郵件地址的語法:
<a href = "mailto: example@mail.com"> name of the mail </a>
示例
在下面的示例中,我們使用HTML中<a>錨點標籤的href屬性中的mailto連結來連結一個電子郵件地址。
<!DOCTYPE html>
<html>
<head>
<title>Linking an image</title>
</head>
<body style="background-color: lightgrey; text-align: center;">
<h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
<!--Linking an email-->
<a href="mailto:support@tutorialspoint.org">Contact for support</a>
</body>
</html>
輸出
執行後,如果點選“聯絡以獲取支援”,它將跳轉到您的郵件應用程式。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP