PHP小码农

Appearance

邮件与电话链接 ​

HTML 的 mailto:、tel: 和 sms: 协议允许通过 <a> 标签触发邮件客户端、拨号器等系统功能。这些链接在移动设备上特别有用，能提供原生应用级别的交互体验。

前置知识

阅读本节前，建议先了解：rel 属性详解

基础概念 ​

通过在 <a> 标签的 href 中使用特殊协议前缀，可以触发设备的系统功能：

  • mailto: — 打开默认邮件客户端
  • tel: — 拨打电话（移动设备）或打开拨号器
  • sms: — 打开短信应用

mailto: 语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>mailto 示例</title>
</head>
<body>
  <!-- 基本邮件链接 -->
  <a href="mailto:info@example.com">发送邮件</a>

  <!-- 指定多个收件人 -->
  <a href="mailto:info@example.com,support@example.com">发送给多个收件人</a>

  <!-- 指定抄送 -->
  <a href="mailto:info@example.com?cc=admin@example.com">发送并抄送</a>

  <!-- 指定密送 -->
  <a href="mailto:info@example.com?bcc=secret@example.com">发送并密送</a>
</body>
</html>

mailto: 参数详解 ​

参数说明示例
subject邮件主题subject=咨询
body邮件正文body=你好，我想咨询...
cc抄送地址cc=admin@example.com
bcc密送地址bcc=secret@example.com

完整的 mailto 示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>mailto 完整示例</title>
</head>
<body>
  <h1>联系我们</h1>

  <!-- 预填写邮件主题和正文 -->
  <a href="mailto:info@example.com?subject=产品咨询&amp;body=你好，我想了解以下产品信息：">发送咨询邮件</a>

  <!-- 完整参数 -->
  <a href="mailto:sales@example.com?cc=admin@example.com&bcc=log@example.com&subject=报价请求&body=请提供以下产品的报价：">请求报价</a>
</body>
</html>

URL 编码

mailto: 中的参数需要进行 URL 编码。空格用 %20 或 + 代替，特殊字符需要编码。HTML 中使用 &amp; 代替 &。

mailto: 注意事项 ​

  • 依赖用户本地邮件客户端
  • 如果用户没有配置邮件客户端，链接可能无效
  • 长正文不建议放在 mailto: 中（有长度限制）
  • 拼音和中文建议进行 URL 编码

tel: 语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>tel 示例</title>
</head>
<body>
  <h1>联系我们</h1>

  <!-- 固定电话 -->
  <a href="tel:+861012345678">010-12345678</a>

  <!-- 手机号码 -->
  <a href="tel:+8613800138000">138-0013-8000</a>

  <!-- 分机号 -->
  <a href="tel:+861012345678,ext=8001">010-12345678 转 8001</a>
</body>
</html>

tel: 在桌面端

在桌面浏览器中，tel: 链接通常没有效果（因为没有拨号器）。在移动设备上，点击 tel: 链接会打开拨号界面。建议用 CSS 或 JavaScript 检测设备类型，在桌面端隐藏或提示。

tel: 格式说明 ​

格式说明示例
+国家代码号码国际格式（推荐）+8613800138000
号码纯数字13800138000
号码,ext=分机带分机012345678,ext=8001

sms: 语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sms 示例</title>
</head>
<body>
  <h1>发送短信</h1>

  <!-- 基本短信 -->
  <a href="sms:+8613800138000">发送短信</a>

  <!-- 预填写短信内容 -->
  <a href="sms:+8613800138000?body=验证码：123456">发送验证码短信</a>
</body>
</html>

sms: 兼容性

sms: 协议的支持因浏览器和操作系统而异。iOS Safari 和 Android Chrome 支持较好，桌面浏览器通常不支持。

实战示例 ​

联系信息页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系页面</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .contact-item { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
    .contact-item a { color: #1565c0; text-decoration: none; }
    .contact-item a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <h1>联系我们</h1>

  <div class="contact-item">
    <span>电话：</span>
    <a href="tel:+861012345678">010-1234-5678</a>
  </div>

  <div class="contact-item">
    <span>手机：</span>
    <a href="tel:+8613800138000">138-0013-8000</a>
  </div>

  <div class="contact-item">
    <span>邮箱：</span>
    <a href="mailto:info@example.com?subject=咨询">info@example.com</a>
  </div>

  <div class="contact-item">
    <span>短信：</span>
    <a href="sms:+8613800138000?body=你好">发送短信</a>
  </div>
</body>
</html>

注意事项 ​

  • mailto: 依赖本地邮件客户端，移动端可能打开邮件应用
  • tel: 在桌面端通常无效，建议提供可见的号码文本
  • sms: 的浏览器兼容性有限
  • 特殊字符需要进行 URL 编码

最佳实践 ​

  1. 提供可见文本：除了链接，还应显示完整的电话号码和邮箱
  2. URL 编码：对 mailto: 中的参数进行编码
  3. 移动端适配：在移动端优先使用 tel: 和 sms: 链接
  4. 桌面端回退：为 tel: 和 sms: 提供桌面端的替代方案

下一节

继续学习：链接最佳实践

参考链接 ​