如何在 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+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.