应使用语义化，配data-post-id、aria-label，点击时禁用按钮防重复，解析数字再更新，后端用POST接口校验登录、存在性及唯一性，支持点赞/取消双向切换。
点赞按钮 HTML 结构怎么写才不踩坑
直接用 注意： 核心是：点击时发请求 → 成功后改按钮样式和数字 → 失败时还原。关键点不是“怎么发请求”，而是“怎么避免重复点击”和“怎么防误操作”： 前端调用的接口，推荐用 POST（不是 GET），路径带资源 ID，例如 立即学习“前端免费学习笔记（深入）”； 别省事写成 GET 光让按钮变红不够，用户需要明确感知“已点”和“正在操作”。建议组合使用： 最常被忽略的是「取消点赞」逻辑——按钮点击应切换状态，而不是单向增加。服务端需支持「点一次赞，再点一次取消」，前端根据返回的 ，别用 或 role="button"、tabindex 和键盘事件，容易漏。基础结构建议：
type="button" 防止表单意外提交；data-post-id 存唯一标识，后续请求要用；aria-label 让屏幕阅读器知道这是点赞操作。点击后状态怎么实时更新（不刷新页面）
button.disabled = true，防止连点导致多次请求innerText++，先解析成整数：parseInt(countEl.textContent) || 0，避免字符串拼接（比如 "42" + 1 = "421"）
后端接口怎么设计才安全又省事
/api/posts/123/like。必须检查：
post_id 是否真实存在且未被删除user_id + post_id 组合唯一索引）{ "success": true, "count": 43, "liked": true } —— 前端靠 liked 决定按钮是否加高亮类/like?id=123，容易被爬虫或恶意脚本刷量。CSS 样式和交互反馈不能只靠颜色
loading... 文字或 SVG 旋转图标，同时 opacity: 0.7
.liked 类，图标变实心 ❤️（用 Unicode 或 icon font），文字色加深transition: opacity 0.2s, transform 0.1s，点击时轻微缩放 transform: scale(0.98)，提升点击感:focus-visible 有清晰 outline，键盘用户能感知当前焦点liked 字段决定最终 UI 状态。
