如何在 HTML 中创建邮件和电话链接?

htmlweb developmentfront end technology更新于 2024/3/31 8:44:17

在 HTML 中创建邮件和电话链接是一种简单有效的方法，可以让虚拟访客与您的企业快速沟通。这些链接为用户提供了一种便捷的操作方式，让他们可以直接从您的网页发送电子邮件或建立电话对话，而无需费力地输入您的联系方式。本文将全面讨论在 HTML 中实现 mailto 和电话链接的必要步骤，并为您提供将这些便捷链接附加到您个人网站的基本机制。

Mailto 链接

HTML 中的 mailto 链接允许您创建一个超链接，点击后会打开默认电子邮件客户端并向指定的电子邮件地址发送一封新邮件。

语法

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

mailto 链接具有以下属性 -

Mailto - 这是 mailto 超链接的基本属性，表示为 mailto:email@example.com。
Subject - 使用"subject"属性，可以在电子邮件的主题行中预先填充特定消息，例如"?subject=Subject%20Line"。
Body - 可以使用"body"属性预先填充电子邮件的正文脚本，例如:"&body=This%20is%20the%20body%20text"。
CC - 您可以使用"抄送"属性，例如:"&cc=email1@example.com,email2@example.com"。
密送 − "密送"属性可用于标识要包含在"密送"段中的一个或多个电子邮件目的地，例如:"&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 链接中，以便预先填充电子邮件的主题和正文。

电话链接

HTML 中的电话链接允许您创建一个超链接，点击该超链接即可在移动设备上拨打电话。

语法

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

方法

我们将利用 <a> 标签中的电话链接来创建电话链接。

示例

以下是我们将在本示例中查看的完整代码 -

<!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 和电话链接是一项简单的任务，可以极大地提升您数字域名的访客体验。这些链接使访客能够轻松地与您的企业进行沟通，并且只需几行程序化语言即可将它们添加到您的网站。按照本文所述的步骤操作，您可以快速轻松地将这些有用的链接添加到您的网站，并扩大用户的访问量。无论您是新手还是经验丰富的网页设计师，这些链接都是打造精美且用户友好的网站不可或缺的一部分。