mailto链接必须用<a>标签而非<button>，因后者不支持href属性；需URL编码中文等特殊字符，用CSS将<a>伪造成按钮并保留title属性以保障兼容性与无障碍体验。
mailto 链接必须用 <a> 标签，不能直接套在 <button> 上
<button> 本身不支持 href 属性，强行写 <button href="mailto:..."> 是无效的 HTML，浏览器会忽略该属性，点击毫无反应。
真正起作用的是 <a> 标签的 href 协议解析机制，它由浏览器原生支持，<button> 没这个能力。
- 正确做法是用
<a>包裹文字或伪按钮样式，而非试图“改造”<button> - 若必须用
<button>触发（比如已有 JS 逻辑），得靠 JavaScript 手动跳转：window.location.href = "mailto:..." - 但注意：部分 iOS WebView、微信内置浏览器会拦截
window.location.href的 mailto 跳转，不如原生<a>可靠
用 CSS 把 <a> 伪装成按钮更稳妥
用户看到“按钮”才愿意点，纯文本链接转化率低，但又不能牺牲语义和兼容性。最简方案就是让 <a> 看起来像按钮：
- 给
<a>加display: inline-block、padding、background-color、border-radius等样式 - 加
text-decoration: none去掉下划线 - 加
cursor: pointer提示可点击 - 必须保留
title属性，例如title="发送反馈至 support@example.com"，提升无障碍体验 - 不要加
target="_blank"—— mailto 不开新页面，加了反而可能在某些 Android 浏览器里触发白屏
mailto: 参数不编码就会截断或乱码
中文、空格、换行、标点符号（如 &、?、"）必须 URL 编码，否则浏览器直接丢弃整个链接，点击无声无息。
-
subject和body的值要用encodeURIComponent()处理（JavaScript 环境） - 换行符必须用
%0A，不是\n或复制粘贴的回车符 - 示例：
mailto:support@example.com?subject=%E5%8F%8D%E9%A6%88&body=%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0%3A%0A1.%20%E7%94%A8%E6%88%B7ID%3A12345 - 多个收件人用英文逗号连接：
mailto:a@example.com,b@example.com，不要加空格
点了没反应？先查这三件事
mailto 不是前端代码问题，而是环境链路中断。90% 的“失效”都出在这几个环节：
- 用户设备根本没装邮件客户端（比如只用 Gmail 网页版），或系统未设默认邮件程序（Windows/macOS 设置里确认“邮件”应用已关联
mailto:协议） - 链接里混入了未编码的中文、空格、引号、问号——浏览器直接拒解析，控制台也无报错
- 在微信内置浏览器、钉钉、飞书等 WebView 中，
mailto:大概率被静默屏蔽，连提示都不给；iOS 的某些 PWA 场景也一样
真正难处理的不是怎么写，而是你永远不知道用户是否真的发出了邮件——没回调、没日志、没状态。如果业务上需要确认送达，就得放弃 mailto，改用后端 API + SMTP 或第三方邮件服务。
立即学习“前端免费学习笔记（深入）”；
