在 HTML 中，可以通过多种方式实现邮箱功能，包括使用 mailto 链接、动态生成邮箱地址以及表单输入框等。以下是几种常见的实现方式及其特点。

使用 mailto 链接

mailto 是一种简单直接的方法，允许用户点击链接后打开默认的邮件客户端，并自动填充收件人地址。示例如下：

<a href="mailto:example@example.com">发送邮件</a>

此方法支持添加多个收件人、主题和正文内容：

<a href="mailto:example@example.com?cc=cc@example.com&bcc=bcc@example.com&subject=主题&body=这是邮件内容">发送邮件</a>

注意：mailto 链接容易被垃圾邮件机器人抓取，可能导致垃圾邮件问题。

动态生成邮箱地址

为了防止邮箱地址被抓取，可以使用 JavaScript 动态生成邮箱链接：

<script type="text/javascript">
function createEmailLink(user, domain) {
var email = user + "@" + domain;
document.write('<a href="mailto:' + email + '">' + email + '</a>');
}
</script>
<script type="text/javascript">
createEmailLink('example', 'example.com');
</script>

这种方法有效保护邮箱地址，减少垃圾邮件的风险。

使用 HTML5 表单输入框

HTML5 提供了 input 元素的 email 类型，用于验证邮箱格式并提交表单：

<form action="https://example.com/submit-email" method="post">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>

此方法适用于需要用户输入邮箱地址的场景，并支持浏览器的格式验证。

防止垃圾邮件的高级方法

可以结合 CAPTCHA 验证或对邮箱地址进行加密来防止垃圾邮件。例如：

<form action="https://example.com/submit-email" method="post">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<input type="submit" value="提交">
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

这种方法需要额外配置，但能显著提高安全性。

总结

  • mailto 链接适合简单场景，但存在垃圾邮件风险。

  • 动态生成邮箱地址能有效保护邮箱安全。

  • HTML5 表单适用于用户输入邮箱的场景，并支持格式验证。

  • 高级防护措施如 CAPTCHA 可进一步提升安全性。