应使用tel:和mailto:协议配合标签实现点击拨号与发邮件：tel:+8613800138000确保国际区号，mailto:hello@example.com?subject=应聘前端岗位&body=您好%20简历已附，注意URL编码、避免中文邮箱、禁用target="_blank"，并需本地服务器预览测试。
用 tel: 和 mailto: 协议实现点击拨号与发邮件
HTML 简历里放联系方式，不能只写一串数字或邮箱地址——得让手机点一下就弹拨号界面，电脑点一下就自动打开邮件客户端。核心就是用好两个 URI 协议：tel: 和 mailto:，它们是浏览器原生支持的，无需 JS 就能生效。
常见错误是直接写 13800138000 或 name@example.com，这纯属静态文本，用户还得手动复制粘贴。正确做法是套上 <a href="..."></a> 标签：
-
<a href="tel:+8613800138000">138-0013-8000</a>—— 注意加+86国际区号更可靠，iOS/Android 都能识别；不加可能在某些安卓机型上无法触发拨号 -
<a href="mailto:hello@example.com?subject=%E5%BA%94%E8%81%98%E5%89%8D%E7%AB%AF%E5%B2%97%E4%BD%8D&body=%E6%82%A8%E5%A5%BD%EF%BC%8C%E9%99%84%E4%BB%B6%E6%98%AF%E6%88%91%E7%9A%84%E7%AE%80%E5%8E%86">hello@example.com</a>——subject和body参数用&连接（不是&），空格要 URL 编码（如%20），否则邮件客户端可能截断内容
中文邮箱或带空格的电话号码怎么处理？
如果邮箱用户名含中文（如 张三@example.com），或电话带括号、短横线（如 (010) 1234-5678），这些字符在 tel: 或 mailto: 中必须剔除或转义，否则协议失效。
-
tel:只接受数字、+、#、*和部分分隔符（如-、.、( )）；但稳妥起见，建议只保留+和数字，比如+8613800138000 -
mailto:的邮箱部分不能含中文，必须是 ASCII 字符；若原始邮箱是张三@example.com，得先确保它实际可用（多数邮箱系统不支持中文 local-part），否则链接点了也发不出去 - URL 中的空格、中文、特殊符号要用
encodeURIComponent()处理，但href属性里不建议手写编码——直接用干净的 ASCII 写最省事、兼容性最好
移动端点击没反应？检查这几个地方
不是所有环境都默认支持 tel:/mailto:：iOS Safari 通常没问题，但微信内置浏览器、部分安卓 WebView 或禁用外部协议的 App 会静默忽略。别以为加了 href 就万事大吉。
立即学习“前端免费学习笔记（深入）”；
- 微信里点
tel:链接，需开启「在网页中打开拨号」权限（iOS 微信默认关，安卓部分版本压根不支持）；可加提示文字：<a href="tel:+8613800138000">? 138-0013-8000（点击拨号）</a> - 邮件链接在 Outlook 桌面版可能弹窗报错，因它不严格遵循 mailto 规范；避免在
subject或body中使用换行符（%0A）或双引号，容易崩 - 不要给这些链接加
target="_blank"——mailto:在新标签页打开会导致空白页，tel:则完全失效
要不要加图标或 CSS 样式？
可以加，但别为了美观牺牲功能。图标用 <svg></svg> 或字体图标都行，重点是保证 <a></a> 标签包裹完整、href 值有效。
例如这个简洁写法：
<a href="tel:+8613800138000" style="text-decoration:none; color:#333;"> <svg width="16" height="16"><use href="#icon-phone"/></svg> 138-0013-8000 </a>
注意：SVG 图标本身不能响应点击，必须整个 <a></a> 是可点击区域；另外，别用 pointer-events: none 或 opacity: 0 遮盖链接，移动端触摸热区会失效。
最易被忽略的一点：本地预览 HTML 文件（file:// 协议）时，部分浏览器（尤其是 Chrome）会禁用 tel: 和 mailto:，必须通过本地服务器（如 python3 -m http.server）打开才能测试真实行为。
