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>

輸出

執行後,如果點選“聯絡以獲取支援”,它將跳轉到您的郵件應用程式。

更新於:2023年8月4日

278 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.