Mailto HTML

2025 年 2 月 26 日 | 阅读 10 分钟

Mailto HTML 链接简介

mailto 链接是一种 HTML 超链接，它将程序员重定向到默认邮件客户端，其中包含预定义的收件人地址。当用户单击 mailto 生成链接时，默认邮件客户端会在用户的计算机上打开以发送电子邮件。

邮件客户端具有预定义参数，例如抄送 (Cc)、密送 (Bcc)、主题和正文内容，用于向一个或多个收件人发送电子邮件。例如，如果您的系统安装了 Microsoft Outlook、Google、Yahoo! Mail、Apple Mail、Thunderbird 和其他帐户，当您在浏览器上按下 mailto 链接时，邮件客户端会将您重定向到它们。

网站的功能和目的

网页上的“mailto”链接具有多个重要目的并提供有价值的功能。

电子邮件通信：“mailto”链接旨在使电子邮件通信更容易。它为用户提供了一种简单直接的方式，可以向与网站关联的特定收件人或部门发送电子邮件。
减少用户工作量： 用户可以通过点击“mailto”链接而不是手动复制和粘贴电子邮件地址到电子邮件客户端来节省时间。它简化了通信并提高了用户兴趣。
联系信息： 人员或组织的电子邮件地址经常通过“mailto”链接显示和链接在网站上。这使用户能够相互联系以进行一般查询、帮助、反馈或通信。
可自定义因素：“mailto”链接可以包含各种因素，包括收件人的电子邮件地址、主题行，甚至电子邮件正文。这通过预填充用户的电子邮件客户端数据来促进电子邮件撰写。
可访问性： 如果使用正确，“mailto”链接可以通过向可能难以使用其他通信形式的用户提供替代联系方式来提高网站的可访问性。
动态内容： 使用 JavaScript 等脚本语言，Web 开发人员可以动态生成“mailto”链接。这使得可以根据用户输入或其他因素创建自定义连接。

语法和用法

HTML 中“mailto”链接的语法很简单，并且具有特定格式

电子邮件链接的协议是“mailto:”。

收件人的电子邮件地址是“john@example.com”。将其更改为预期收件人的电子邮件地址。

“subject={subject}”参数指定电子邮件主题。动态创建链接时，您通常将占位符“subject”替换为实际主题。

在您的网站上显示为可点击链接的措辞是“点击发送消息”。当用户点击此链接时，他们的默认电子邮件客户端将打开一个新消息，收件人是“john@example.com”，主题由“subject”指示。

在 HTML 中创建 Mailto 标签

要在 HTML 中创建 mailto 链接，我们需要使用 HTML <a> 标签及其 href 属性，然后使用 mailto 链接。

让我们在 HTML 中创建一个简单的 mailto 程序。

示例：基本“mailto”链接

<!DOCTYPE html>
<html>
<head>
    <title>Basic "mailto" Link</title>
</head>
<body>
    <a href="mailto:john@example.com">Contact Us</a>
</body>
</html>

输出

当您单击上述网页上的“联系我们”链接时，一封地址为 john@example.com 的新电子邮件将在您的默认电子邮件客户端中打开。

示例：带有主题的“mailto”链接

<!DOCTYPE html>
<html>
<head>
    <title>"mailto" Link with Subject</title>
</head>
<body>
    <a href="mailto:support@example.com?subject=Support Request">Email Support</a>
</body>
</html>

输出

当您单击“发送电子邮件支持”链接时，电子邮件客户端会打开，主题行已预先填充为“支持请求”。

示例：带有多个收件人的“mailto”链接

如果我们要向多个用户发送电子邮件，我们需要用逗号或 &（和号）符号分隔每个地址，如 mailto 标签的语法所示。

<a href = "mailto: {email address} ?{subject}= {subject} & cc ={cc addresses} & body = {body}" > {clickable text link or image} </a>

在上述语法中，mailto 属性可以按任何顺序排列，但要确保 {电子邮件地址} 在最前面，后面直接跟着一个问号。

<!DOCTYPE html>
<html>
<head>
    <title>"mailto" Link with Multiple Recipients</title>
</head>
<body>
    <a href="mailto:sales@example.com, marketing@example.com? subject=Product Inquiry">Click here to Inquire</a>
</body>
</html>

输出

用户可以使用此链接向 sales@example.com 和 marketing@example.com 发送主题为“产品咨询”的电子邮件。

示例：带有正文文本的“mailto”链接

<!DOCTYPE html>
<html>
<head>
    <title>Body Text</title>
</head>
<body>
    <a href="mailto:support@example.com?subject=Feedback&body=Dear Support Team,">Send Feedback</a>
</body>
</html>

输出

当用户点击“发送反馈”时，会打开一个电子邮件客户端，主题为“反馈”，开头的正文文本为“尊敬的支持团队，”，允许他们继续撰写消息。

示例：使用 JavaScript 的动态“mailto”链接

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic "mailto" Html Link with JavaScript</title>
</head>
<body>
    <script>
        var recipient = "info@expe.com";
        var linkText = "Email Us";
        document.write('<a href="mailto:' + recipient + '">' + linkText + '</a>');
    </script>
</body>
</html>

输出

此 JavaScript 代码在收件人或链接文本可能动态变化的场景中非常有用，因为它根据变量构建“mailto”链接。

“mailto”HTML 链接的参数和选项

HTML“mailto”链接允许您指定影响电子邮件消息行为的各种变量和参数。这些参数通过和号和问号分隔，并添加到“mailto”链接中。以下是一些常用参数及其功能

Mailto： 它是指定收件人电子邮件地址的主要参数，包括可选参数，如抄送 (CC)、密送 (BCC) 以及消息的主题和正文。
电子邮件地址： 它是 mailto 标签的主要参数，用于定义收件人邮件字段的地址。
抄送 (Cc)： 它是 mailto 标签的可选参数，它保存另一个邮件的地址，并被收件人作为邮件的副本接收。
密送 (Bcc)： 它是 mailto 标签的可选参数，它保存另一个邮件的特定地址，并被收件人作为邮件的密送副本接收。
主题： 它是 mailto 标签的可选参数。它用于编写邮件的主题。
正文： 它是 mailto 标签的可选参数。它用于填充或编写邮件内容。
?：它是 mailto 标签的可选参数，它包含定界符的第一个参数。
&：它也是 mailto 标签的可选参数，它包含其他定界符参数。
可点击的文本或图像： 它是 HTML 超链接字段，显示给浏览器上的用户。
附件： 当用户点击“mailto”链接时，“Attachment”参数表示一个或多个文件附件。您可以通过提供此参数，让用户更轻松地通过电子邮件传输文件。例如，命令 <a href="mailto:info@example.com?attach=file1.txt,file2.pdf">发送附件</a> 生成一个链接，当激活时，它会打开用户的默认电子邮件客户端，并提供将“file1.txt”和“file2.pdf”附加到电子邮件的选项。

示例： 编写一个程序，使用 HTML 中的 mailto 标签添加多个用户地址、主题和正文以发送电子邮件。

<html>  
<head>   
<title> Use of MailTo tag in HTML </title>  
<body>  
<a href="mailto:john@example.com,jtp@gmail.com, javatpoint@gmail.com?  
subject= Learn how to add multiple mail Addresses using the mailto tag in html&body=Welcome to the JavaTpoint.com">  
Give feedback  
 </a>  
</body>  
</head>  
</html>  

输出

单击“提供反馈”链接；它会重定向到已安装的邮件帐户，如下所示。

在上面的图片中，我们添加了多个用户帐户，例如 john@example、jtp@gmail.com 和 javatpoint@gmail.com，并附带了电子邮件主题和正文内容。

示例： 编写一个程序，使用 html 中的 mailto 标签自动填充邮件的抄送、密送、主题和正文。

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Welcome to JavaTpoint </title>  
</head>    
<body align = "center">  
    <h1> JavaTpoint </h1> <br>  
    <b> <h2> Use of mailto tag in html </h2> </b>  
    <a href = "mailto:abc@gmail.com?  
    cc=xyz@outlook.com&  
    bcc=abc@example.com  
    &subject= Learn Computer Science related technologies.&  
    body=JavaTpoint is a platform that facilitates better learning on various technologies related to Computer Science.   
    We assure you that you will be fine with our tutorials. But if there is any mistake, please post the problem in our contact form.">  
    Send your queries through mail  
    </a>  
</body>  
</html>  

输出

点击“通过邮件发送您的查询”链接；它会重定向到已安装的邮件帐户，如下所示。

在上面的输出中，我们已经建立了指向抄送、密送、主题和电子邮件正文的链接，自动填充访问者。

示例： 使用 html 中的 mailto 标签为发送电子邮件创建自定义布局。

<!DOCTYPE html>   
<html>   
<head>   
    <title>Using mailto link</title>   
    <style>   
        h1 {   
            color: brown;   
        }   
          h3{  
          color: green  
          }  
        .container {   
            width: 600px;   
            border: 2px solid black;   
            padding: 25px;   
              
        }   
    </style>   
</head>   
    
<body align = center>   
    <div class="container">   
        <h1>JAVATPOINT.COM</h1>   
        <b> <h3> Using mailto link </h3> </b>   
        <form method="POST"   
              action="mailto: javatpoint@gmail.com? Subject= Feedback/ Suggestion"   
              enctype="multipart/form-data">   
            <div class="control">   
                Name:   
                <input aria-required=""  
                       id="name"  
                       type="text" />   
            </div>   
            <br>   
            <div class="control">   
                Mob no:   
                <input aria-required=""   
                       id="mobile_number"   
                       type="tel" />   
            </div>   
            <br>   
            <div class="control">   
                Suggestion/ Feedback:   
                <br>  
                <textarea rows="8" cols="25"  
                          name="comment">   
    
                </textarea>   
            </div>   
            <br>   
            <div class="control">   
                <input type="submit"   
                       value="Submit" />   
            </div>   
    
        </form>   
    </div>   
</body>   
</html>

输出

填写完表单后，单击“提交”按钮；它会重定向我们到电子邮件帐户以发送消息。

编码和特殊字符

处理“mailto”链接中的特殊字符和空格

为了确保链接正常工作并且电子邮件客户端正确理解数据，在 HTML 中建立“mailto”链接时，正确处理特殊字符和空格至关重要。处理这些因素的方法如下

空格： 电子邮件地址、主题行和正文内容中的空格都应进行 URL 编码以避免空白。URL 中的空格用 %20 符号表示。例如，如果您想在主题行中包含空格，请使用 %20 替换空格。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Report an Issue</title>
</head>
<body>
    <a href="mailto:support@example.com?subject=Report%20Issue">Report Issue</a>
</body>
</html>

输出

此代码生成一个链接，当激活时，它会打开用户的默认电子邮件客户端，电子邮件地址为 support@example.com，主题行是“报告问题”。

特殊字符： 在 URL 中具有特殊含义的特殊字符，例如 @、& 和 ?，也需要正确编码。例如，“@”表示为 %40，“&”表示为 %26，“?”表示为 %3F。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <a href="mailto:contact%40example.com?subject=Question%3A%20Web%20Development">Contact Us</a>
</body>
</html>

输出

此代码演示了如何处理空格和特殊字符。显示“联系我们”链接，当单击时，它会打开电子邮件客户端，电子邮件地址为 contact@example.com，主题行为“问题：Web 开发”，其中“@”符号编码为 %40，空格编码为 %20，以确保功能正常。

URL 编码的重要性

在管理“mailto”链接中的空格和特殊字符时，URL 编码（也称为百分比编码）至关重要，原因有多种

数据完整性： URL 编码保证了在“mailto”链接中发送的数据的准确性。它避免了字符歧义和误解。
一致性： 特殊字符和空格可能被不同的电子邮件程序和网络浏览器以不同的方式解释。URL 编码是一种表达这些字符的标准化方式。
可访问性： 对于可访问性，URL 编码至关重要。为了向残障人士提供准确的信息，屏幕阅读器和其他辅助技术依赖于正确编码的内容。
跨浏览器兼容性： URL 编码确保“mailto”链接在不同的电子邮件客户端和网络浏览器上正常工作。它减少了链接损坏或数据无法理解的可能性。

网站上“mailto”链接的实际用例

在 Web 开发中，“mailto”链接是增加用户参与度并促进网站用户与其所有者或管理员之间流畅通信的宝贵工具。以下是“mailto”连接在实际网站中有用的几个实例

联系信息： 为了给消费者提供一个简单的选项来联系网站管理员或客户服务团队，网站通常包含“mailto”按钮。当“mailto”按钮放置在电子邮件地址等联系信息旁边时，用户只需单击一下即可开始电子邮件对话。
反馈机制： 通过为特定反馈类别设置“mailto”链接，网站可以促进用户反馈。例如，通过包含“报告错误”链接和指向技术支持人员的“mailto”连接，可以简化报告问题。
新闻简报订阅： 网站通常包含用于查询或新闻简报订阅的“mailto”按钮。用户可以通过点击链接发送订阅请求或问题，从而更轻松地与网站内容或服务互动。
联系表单： 作为联系表单的替代方案，可以使用“mailto”URL。虽然电子邮件客户端通常用于发送消息，但有些用户更喜欢使用联系表单。网站可以通过提供这两种选择来满足更广泛的用户偏好。
申请提交： “mailto”连接对于招聘信息和基于申请的服务很有用。如果用户有兴趣申请工作或提交申请，他们可以单击链接以打开其电子邮件客户端，预填收件人电子邮件，并开始申请流程。
自定义消息： “mailto”链接可以考虑正文文本和主题行等变量。当消费者单击链接时，网站可以利用此功能生成个性化消息。例如，“请求报价”链接的电子邮件内容可能包含有关用户查询的信息。
可访问性增强： “mailto”链接可以通过向可能难以使用联系表单或其他网站功能的残障人士提供替代通信方法来提高可访问性。
快速帮助访问： “mailto”链接可用于在在线帮助或文档部分中快速获取客户协助。遇到问题的用户可以单击链接以打开其电子邮件客户端并填写必要的联系详细信息。
活动注册： 宣传活动或网络研讨会的网站可以使用“mailto”链接来简化注册流程。通过单击链接可以打开电子邮件客户端，并预填活动信息和注册详细信息。

下一主题Html-disabled-attribute

Mailto HTML

Mailto HTML 链接简介

网站的功能和目的

语法和用法

在 HTML 中创建 Mailto 标签

“mailto”HTML 链接的参数和选项

编码和特殊字符

处理“mailto”链接中的特殊字符和空格

URL 编码的重要性

网站上“mailto”链接的实际用例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

Mailto HTML

Mailto HTML 链接简介

网站的功能和目的

语法和用法

在 HTML 中创建 Mailto 标签

“mailto”HTML 链接的参数和选项

编码和特殊字符

处理“mailto”链接中的特殊字符和空格

URL 编码的重要性

网站上“mailto”链接的实际用例

相关帖子

HTML 图片大小

如何在 HTML 中移动图片

HTML 容器

使用 HTML/CSS 将图片转换为灰度图像

如何在 HTML 中创建下拉列表

HTML 嵌套表格

HTML a name 标签

如何调用 HTML 中的 JavaScript 函数

HTML 中的 Colspan 是什么意思

HTML CSS 中的自动图片滑块

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器