用 href 拼接各平台分享 URL 实现无 JS、可访问、自定义样式的分享按钮，需正确编码参数、使用 target="_blank"、避免 file:// 协议，并用内联 SVG 和 CSS 适配深色模式。
怎么让分享按钮不依赖第三方 JS，还能自定义样式
直接写 HTML + CSS 就能做出干净、可访问、无网络请求的分享按钮，关键在于用 href 拼接分享 URL，而不是引入微博、微信、Twitter 的 SDK。SDK 不仅拖慢页面，还常因跨域或策略变更导致按钮失效。
核心逻辑是：每个按钮链接指向对应平台的分享跳转地址（如微博的 https://service.weibo.com/share/share.php?url=...），靠平台自身处理分享内容。你只控制外观和基础参数。
- 必须用
target="_blank"，否则用户点完就离开你的页面 -
url参数要encodeURIComponent()处理，否则含中文或特殊符号会截断 - 微信不支持纯前端跳转分享（需公众号/小程序配置 JS-SDK），所以“微信分享”按钮实际只能跳转到微信客户端的聊天窗口（用
weixin://协议），但 iOS 会拦截——更稳妥的做法是引导用户复制链接 - Twitter 和 LinkedIn 支持 title/description 参数，但 Facebook 已弃用
sharer.php的自定义描述，只读取目标页的 Open Graph 标签
怎么写出兼容各平台的分享链接参数
不同平台对参数名、编码方式、是否必需的要求差异很大。比如 Twitter 用 text，LinkedIn 用 title 和 summary，而 Telegram 只认 url 和可选的 text。
示例（带基础参数）：
立即学习“前端免费学习笔记（深入）”；
<a href="https://twitter.com/intent/tweet?text=今天读到一篇好文&url=https%3A%2F%2Fexample.com%2Fpost" target="_blank">Tweet</a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fpost" target="_blank">LinkedIn</a> <a href="https://t.me/share/url?url=https%3A%2F%2Fexample.com%2Fpost&text=推荐给你" target="_blank">Telegram</a>
注意：text 在 Telegram 和 Twitter 中支持中文，但 LinkedIn 的 summary 实际不生效（它只抓页面 meta），所以别白费劲传；Facebook 则完全忽略链接里的任何文本参数。
怎么用纯 CSS 做出「精致」但不过度花哨的按钮组
精致 ≠ 动效多、图标炫。真正易维护的精致，是统一尺寸、合理间距、适配深色模式、鼠标悬停有明确反馈，且不依赖图标字体（避免 FOUC 或加载失败后显示方块）。
- 用 SVG 内联图标，而非 iconfont 或外部 PNG —— 保证高缩放比下清晰，也避免额外请求
- 按钮宽度设为
fit-content，文字长度不一时也能对齐；横向排列用display: flex+gap控制间距 - 深色模式适配：用
@media (prefers-color-scheme: dark)调整背景/文字色，别硬写!important - 禁用默认下划线：
a { text-decoration: none; }，但必须保留:focus-visible轮廓，保障键盘用户可访问
为什么本地预览时分享链接打不开或参数丢失
常见于直接双击打开 index.html 文件（协议为 file://）。微博、Twitter 等平台拒绝处理 file:// 协议的 url 参数，会清空或报错。
解决办法只有两个：
- 用轻量本地服务启动，比如 VS Code 的 Live Server 插件，或命令行运行
npx serve - 测试阶段把
url参数临时换成线上地址（哪怕只是https://example.com），确认链接结构正确
另外，如果页面没部署 HTTPS，iOS Safari 会阻止部分分享跳转（尤其是微信相关协议），这点容易被忽略——开发时就得用 HTTPS 环境验证。
