HTML 邮件链接：mailto 主题、正文、抄送与 tel

如何创建邮件链接

让链接的 href 以 mailto: 加地址开头。点击它会在读者的邮件应用中新建一封发往该地址的邮件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

预览不会打开其他应用：在预览中点击这些链接，会显示它将要打开的地址。在真实页面上，第一个链接会新建一封邮件，第二个会在手机上拨打电话。

把地址本身用作链接文字。没有设置邮件应用的读者（在浏览器中使用网页邮箱的电脑上很常见）仍然可以复制它，而只写着“给我们发邮件”的链接会让他们无从下手。

主题、正文、抄送和密送

mailto 链接还可以预填邮件的更多内容。像 URL 查询字符串一样，在 ? 后面添加参数，并用 & 连接：

多个收件人写在地址部分，用逗号分隔：mailto:ana@example.com,bob@example.com。

这些值必须经过 URL 编码：空格是 %20，换行是 %0D%0A，& 是 %26，? 是 %3F。这个示例中的脚本会解码每个链接，让你看到邮件应用收到的内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

主题 Order #123 必须写成 Order%20%23123：直接写 # 会让 URL 在那里结束，正文就丢失了。也不要用 + 表示空格。在 mailto 链接中，+ 就是字面意义上的加号，很多邮件应用会把它显示为加号。

用 JavaScript 生成 mailto 链接

手动编码很容易出错。encodeURIComponent 可以帮你完成。在字段中输入内容，下面的链接会随之更新：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent 把 & 转成 %26，把换行转成 %0A；replace 则把换行变成邮件所需要的 %0D%0A 组合。地址部分保持原样即可：@ 和 , 在那里不需要编码。

用 tel: 和 sms: 创建电话链接

tel: 用来创建一键拨号链接。href 中的号码要带国家代码，不加空格；显示的文字可以随意排版。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

• tel:+442079460958 在任何国家都能用。像 tel:02079460958 这样的本地号码只有在该国境内拨打才有效。
• 可以用连字符作为分隔符（tel:+1-555-123-4567）；空格不属于该格式，所以不要写进 href。
• sms: 会打开短信应用。用 ?body= 预填短信内容在很多应用中都有效，但支持情况不一，所以不要依赖它。
• 在电脑上，如果装有通话应用（比如 FaceTime 或软电话），tel: 会打开它，否则什么也不做。

iPhone 上的 Safari 会自动把纯文本中的电话号码变成链接。如果这会破坏订单号之类的内容，可以用 <meta name="format-detection" content="telephone=no"> 关闭它。

垃圾邮件与邮箱地址

mailto 链接中的地址，任何下载了页面的机器人都能读到。把地址写成 hello [at] example [dot] com 或用 JavaScript 拼接地址之类的技巧能挡住一些简单的爬虫，但也会让链接更难用。联系表单（参见 HTML 表单）则完全不会把地址放在页面上。对大多数网站来说，给收件箱配一个好的垃圾邮件过滤器是更简单的办法。

避免使用 <form action="mailto:...">。它依赖读者的邮件应用，发送的字段经过 URL 编码、难以阅读，而且你也无法确认是否真的发送了。

常见错误

• 忘了写 mailto:。 href="hello@example.com" 是一个相对链接，指向以该地址命名的页面。
• 主题或正文中有未编码的空格或 #。 用 %20、%23 或 encodeURIComponent 对值进行编码。
• 用 + 表示空格。 它会显示为加号。
• 用第二个 ? 代替 &。 只有第一个参数跟在 ? 后面；其余参数用 & 连接。
• 链接文字只有“给我们发邮件”，使用网页邮箱的用户就没有可以复制的内容。
• 在 tel: 中使用本地号码。 要加上国家代码。