打赏按钮应使用 ，因其语义正确、可访问性好、原生支持键盘操作；二维码须用HTTPS完整地址，置于文章末尾或右下角悬浮，确保尺寸≥200px并做好加载反馈。
打赏按钮用 <button></button> 还是 <a></a>？
语义上，打赏是触发一个行为（跳转到支付页或弹出支付组件），不是导航到新文档，所以优先用 <button type="button"></button>。用 <a></a> 容易被误判为普通链接，影响可访问性，也容易在无 JS 环境下意外跳转空 href 或 #。
- 必须加
type="button"，否则在表单内可能触发表单提交 - 不要写
href="#"+onclick，会触发页面滚动且语义混乱 - 若需支持键盘操作（如回车/空格触发），
<button></button>原生支持，<a></a>需额外加role="button"和键盘事件监听
点击后怎么跳转微信/支付宝收款码？
不能直接跳转个人收款码图片（会被拦截或识别为非法支付），实际可行路径只有两条：
- 跳转到你自己的中转页（含二维码的静态 HTML 页面），该页需部署在 HTTPS 域名下（微信/支付宝扫码要求）
- 调用第三方 SDK（如微信 JSAPI、支付宝 web SDK），但需企业资质、域名备案、HTTPS、后台签名，个人站点基本不可行
常见错误：把本地 qrcode.png 路径直接塞进 src 或 href，扫码时提示“该链接存在风险”或“无法识别”。
正确做法：把二维码图上传到图床或自己服务器，用完整 HTTPS 地址，例如：<a href="https://www.php.cn/link/91e0cbfbdfa13d641eb6d7c734790b41">https://www.php.cn/link/91e0cbfbdfa13d641eb6d7c734790b41</a>。
怎么让打赏说明区域不干扰阅读流？
打赏说明不是正文内容，但放太靠后用户看不到，放太靠前又打断阅读。真实场景里，它应该满足三个条件：可发现、不抢戏、不遮挡。
- 放在文章末尾「相关阅读」之前，用浅色边框+小号字体，宽度不超过 600px
- 使用
position: sticky在长文滚动时固定在视口右下角（仅限桌面端），但必须加z-index避免被广告位或评论框盖住 - 绝对不要用
float: right+ 清除浮动，会导致后续段落错位，尤其在响应式断点切换时
示例结构：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<aside class="donate-note"> <p>感谢支持，一杯咖啡的钱就够我买包辣条继续修 bug ?</p> <button type="button" id="donate-btn">☕ 打赏作者</button> </aside>
移动端扫码体验差？这些细节决定成败
手机用户扫码失败，90% 不是码的问题，而是交互链路卡在中间：
- 二维码图宽高必须 ≥ 200px，太小扫码识别率暴跌
- 图片加载完再显示按钮，避免用户点开空白区域；可用
img.onload或 CSSaspect-ratio占位 - 不要在弹层里放二维码再加「长按保存」——微信 iOS 版禁止长按保存非本域图，安卓也常失效
- 如果用弹层展示二维码，关闭按钮必须大且明显（至少 44×44px），否则手抖点不中
别忽略 loading 状态：用户点了按钮，如果 300ms 内没反馈，大概率会连点两次。加个 disabled 和简单文字变化，比如从「打赏作者」变成「加载中…」。
打赏功能真正难的不是放个按钮，而是让二维码在各种手机型号、微信版本、网络环境下稳定扫出来——这背后依赖的是图床稳定性、HTTPS 证书有效性、以及你有没有在真机上测过三次以上。
