推荐用 标签实现打赏按钮，因其支持协议跳转、右键新标签打开且无需 JS；收款码须用平台带参链接而非静态图片，避免扫码失败；target="_blank" 必须配合 rel="noopener" 防安全风险；移动端需确保 viewport 正确、二维码尺寸≥300px 且无模糊遮罩；跨平台需 UA 判断动态切换协议。
打赏按钮用 <button></button> 还是 <a></a>？别用 <form></form> 提交
纯前端打赏入口本质是引导用户跳转到支付页，不是提交表单。用 <form></form> 容易触发浏览器默认提交、刷新页面，还可能被广告拦截器误判为可疑行为。<button></button> 或 <a></a> 更安全可控——推荐 <a></a>，因为能直接带参数跳转微信/支付宝收款码页（如微信的 weixin:// 协议，或支付宝 alipay://），且天然支持右键“在新标签页打开”。<button></button> 需额外加 onclick 绑定跳转，多一层 JS 依赖。
微信/支付宝收款码怎么嵌进网页？别直接放图片
把收款码 PNG/JPG 直接 <img src="xxx.png"> 贴上去，用户扫码时经常失败：微信会提示“该二维码不能用于收款”，原因是静态图片无法携带商户号、订单号等必要上下文。正确做法是调用官方 SDK 或使用平台生成的带参链接：
- 微信：用「微信收款商家助手」后台生成「JSAPI 支付」链接，或调用
WXPay的unifiedOrder接口生成预支付交易会话 ID，再用chooseWXPay唤起支付（需备案域名 + HTTPS） - 支付宝：用「当面付」接口生成
pay_url，或用「收款码跳转」功能生成带金额和备注的 alipay:// 协议链接（如alipay://platformapi/startapp?appId=20000123&amount=5.00&subject=感谢支持） - 若没接入能力，退而求其次用「赞赏码聚合页」：把多个收款码上传到第三方服务（如「爱发电」「小众赏」），嵌入其提供的
<iframe></iframe>或<script></script>，但注意这些服务可能抽成或下线
target="_blank" 和 rel="noopener" 必须一起写
打赏链接用 <a href="..." target="_blank"></a> 打开新页时，如果不加 rel="noopener"，新页面可通过 window.opener 访问原页面 DOM，存在安全风险（恶意页面可篡改你的网页）。实操中必须写全：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<a href="https://qr.alipay.com/xxx" target="_blank" rel="noopener">支付宝赞赏</a>
漏掉 rel="noopener" 在 Chrome/Firefox 中虽不报错，但审计工具会标红，部分企业安全策略会直接拦截。
移动端扫码失败？检查 viewport 和图片尺寸
手机上扫码模糊、识别慢，大概率不是代码问题，而是渲染层限制：
-
<meta name="viewport">缺失或scale=0.5类缩放设置会让二维码像素被压缩，扫码引擎无法解析 - 收款码图片宽高建议 ≥ 300px，且用
width: 100%; max-width: 360px;控制响应式，避免拉伸变形 - 别给二维码容器加
filter: blur()或半透明遮罩，微信扫码对对比度敏感，轻微灰度都会导致识别失败
复杂点在于：微信内嵌浏览器（X5）对 alipay:// 协议完全屏蔽，支付宝内嵌浏览器也封禁 weixin://，所以双平台打赏必须做 UA 判断并动态切换链接——这点容易被忽略，一上线就发现 iOS 微信里点支付宝链接毫无反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
