如何在 HTML 中建立郵件和電話連結?


在 HTML 中建立 mailto 和電話連結是一種簡單有效的方法,可以讓網站訪客快速聯絡您的企業。這些連結為使用者提供了一種方便的方式,可以直接從您的網頁傳送電子郵件或撥打電話,而無需費力地鍵入您的聯絡資訊。本文將全面介紹在 HTML 中建立 mailto 和電話連結的必要步驟,為您提供在個人網站上新增這些便捷連結的必要工具。

Mailto 連結

HTML 中的 mailto 連結允許您建立一個超連結,單擊該連結後會開啟預設的電子郵件客戶端並建立一封傳送到指定電子郵件地址的新電子郵件。

語法

<a href=mailto:email@example.com>Email Us</a>

mailto 連結具有以下屬性:

  • Mailto − 這是 mailto 超連結的基本屬性,表示為 mailto:email@example.com。

  • 主題 − 使用“subject”屬性,可以預先填寫電子郵件的主題行,例如:“?subject=主題行”。

  • 正文 − 可以使用“body”屬性預先填寫電子郵件正文,例如:“&body=這是正文文字”。

  • 抄送 (CC)− 你可以使用“cc”屬性指定一個或多個電子郵件地址包含在“抄送”部分,例如:"&cc=email1@example.com,email2@example.com"。

  • 密送 (BCC) − 可以使用“bcc”屬性指定一個或多個電子郵件地址包含在“密送”部分,例如:"&bcc=email1@example.com,email2@example.com"。

  • 附件 − 可以使用“附件”屬性將檔案附加到電子郵件,例如:“&annex=file:///C:/example.txt”

方法

我們將使用 <a> 標籤中的 mailto 連結來建立一個郵件連結。

示例

以下是我們將在這個例子中看到的完整程式碼:

<!DOCTYPE html>
<html>
<head>
   <title>How to create mail and phone link in HTML?</title>
</head>
<body>
   <h4>How to create mail and phone link in HTML?</h4>
   <a href="mailto:email@example.com?subject=Subject%20Line&body=This%20is%20the%20body%20text">Email Us</a>
</body>
</html>

這段程式碼是用 HTML 編寫的,用於展示 mailto 屬性的用法。正文內容包含一個標題標籤 <h4>,它顯示文字“如何在 HTML 中建立郵件和電話連結?”作為小標題。在標題下面,有一個錨標籤 <a>,這是一個超連結,可以用來導航到網頁或執行操作。在這種情況下,錨標籤用於建立一個電子郵件連結,這將開啟使用者的預設電子郵件應用程式並起草一封傳送到“email@example.com”的新郵件。主題和正文引數也已新增到 mailto 連結中,以便預先填充電子郵件的主題和正文文字。

Tel 連結

HTML 中的 tel 連結允許您建立一個超連結,單擊該連結後會在移動裝置上發起電話呼叫。

語法

<a href="tel:+[country code][phone number]">[Link Text]</a>

方法

我們將使用 <a> 標籤中的 tel 連結來建立一個電話連結。

示例

以下是我們將在這個例子中看到的完整程式碼:

<!DOCTYPE html>
<html>
<head>
   <title>How to create mail and phone link in HTML?</title>
</head>
<body>
   <h4>How to create mail and phone link in HTML?</h4>
   <a href="tel:+911234567890">Call Us</a>
</body>
</html>

這段程式碼是用 HTML 編寫的,用於展示 tel 屬性的用法。正文內容包含一個標題標籤 <h4>,它顯示文字“如何在 HTML 中建立郵件和電話連結?”作為小標題。在標題下面,有一個錨標籤 <a>,這是一個超連結,可以用來導航到網頁或執行操作。在這種情況下,錨標籤用於建立一個電話連結,這將開啟使用者的預設撥號應用程式並撥打 +911234567890。

結論

總之,在 HTML 中建立 mailto 和電話連結是一項簡單的任務,可以極大地提高您網站上的訪客參與度。這些連結使訪客可以輕鬆地與您的企業聯絡,並且只需幾行程式碼即可新增到您的網站。按照本文中列出的步驟,您可以快速輕鬆地將這些有用的連結新增到您自己的網站,並提高使用者訪問您的網站的便捷性。無論您是新手還是經驗豐富的網頁設計師,這些連結都是建立完善且使用者友好的網站的重要組成部分。

更新於:2023年4月13日

2K+ 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告