a标签拨打电话需href以tel:开头且号码规范，发邮件需href以mailto:开头并URL编码参数；不同浏览器和容器（如微信）兼容性差异大，须做降级处理并真机测试。
用 a 标签拨打电话：href 值必须是 tel: 开头
直接写 <a href="13800138000">拨打</a> 是无效的，浏览器不会识别为电话链接。必须加 tel: 协议前缀，且号码建议不带空格、横线或括号（部分 iOS 设备对格式敏感）。
- 正确写法：
<a href="tel:+8613800138000">拨打</a>（推荐带国际区号，避免被误判） - 常见错误：
href="tel:138-0013-8000"或href="tel:(138) 0013-8000"—— 某些安卓浏览器会失败 - 注意：iOS Safari 支持点击直接唤起电话 App；Android 大多也支持，但部分定制 ROM 可能跳转到拨号界面而非直接呼叫
用 a 标签发送邮件：href 必须是 mailto: 开头，参数要 URL 编码
mailto: 支持收件人、主题、正文等参数，但所有值（尤其是中文和特殊符号）必须用 encodeURIComponent() 编码，否则可能截断或乱码。
- 基础用法：
<a href="mailto:test@example.com">发邮件</a> - 带主题和正文：
<a href="mailto:test@example.com?subject=反馈&body=页面有问题">联系客服</a> - 中文务必编码：主题
问题反馈要写成subject=%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88，否则 Outlook 等客户端可能显示为空或乱码 - 多个收件人用逗号分隔：
mailto:a@example.com,b@example.com，但部分邮件客户端（如 Gmail 网页版）不支持，建议只写一个主收件人
移动端兼容性陷阱：iOS 和 Android 对 tel/mailto 的处理差异大
不是所有设备都按预期打开原生应用。比如微信内置浏览器会拦截 tel: 链接并提示“不支持的操作”，而企业微信、飞书则可能完全忽略。
- iOS 微信中，
tel:默认禁用，需用户手动开启「网页呼出电话」权限（设置 → 微信 → 照片、相机、麦克风等 → 打开「电话」） - Android 微信通常允许
tel:，但mailto:基本无响应 —— 它不调用系统邮件 App - 安全策略影响：某些 PWA 或 WebView 场景下，
tel:和mailto:可能被拦截，需配合target="_blank"或 JS fallback（例如检测点击后是否跳转失败）
如何优雅降级？别只靠 a 标签硬写
纯 HTML 的 tel: / mailto: 在复杂环境里容易失效。真正上线时，至少该留一条退路。
立即学习“前端免费学习笔记（深入）”；
- 加提示文案：
<a href="tel:13800138000">拨打 138-0013-8000（手机端点击拨打）</a> - JS 检测是否在微信中：
/(MicroMessenger|miniProgram)/.test(navigator.userAgent)，然后改用弹窗提示复制号码 - 不要依赖自动跳转：用户可能没装邮箱 App，
mailto:点击后空白页很常见，建议旁边加一句“如未响应，请复制邮箱地址手动发送”
协议本身很简单，难的是不同容器环境下的行为不可控。写完记得真机测试，尤其覆盖微信、QQ、钉钉、企业微信这几个常用入口。
