卡片式按钮应据功能选标签：跳转用<a>，交互用<button type="button">；需保障触控热区≥44px、焦点可见、语义正确、禁用状态尺寸一致，并防重复提交。
卡片式按钮该用 <a> 还是 <button>
取决于它是否真实跳转。真跳转（比如去 /settings 或 #faq）就用 <a href="...">；仅触发 JS 行为（弹窗、切换标签、展开面板）必须用 <button type="button">。混用会破坏键盘导航和屏幕阅读器体验——<div onclick="..."> 更不行，既不能聚焦，也无法用 Enter 或 Space 触发。
常见错误：把整个卡片设成 <a> 但内部又嵌套一个 <button>，导致语义冲突、焦点混乱、点击穿透。
- 跳转类卡片入口：
<a href="/profile" class="card-link">个人资料</a> - 交互类卡片入口：
<button type="button" data-action="open-modal" aria-label="打开帮助文档">帮助</button> - 禁用状态统一用
disabled属性（<button disabled>），别只靠opacity: 0.5+pointer-events: none，后者无法阻止键盘聚焦
button 在卡片里如何保证触控与可访问性
移动端最小触控热区是 44px × 44px，但默认 <button> 高度远低于此。直接设 height: 44px 会挤压文字垂直居中，且在不同字体下易截断。
正确做法是用 min-height: 44px + padding 控制内边距，同时确保行高不干扰布局：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 基础重置：
button { border: none; background: none; padding: 12px 16px; min-height: 44px; } - 文字垂直居中靠
display: flex; align-items: center;，比line-height更稳 - 必须保留
:focus-visible样式，哪怕只是加个outline: 2px solid #007bff，否则键盘用户无法感知焦点位置 - 避免用
font-size: 0或visibility: hidden隐藏图标占位符——它们会破坏辅助技术读取
卡片内多个操作按钮怎么排列才不挤、不溢出
横向排布时，gap 比 margin 更可靠；纵向堆叠时，flex-direction: column + align-items: stretch 能保证宽度一致。但别让按钮宽度随内容自适应——长文案会让卡片撑宽，破坏网格对齐。
- 推荐固定宽度策略：
.card-actions button { flex: 1; min-width: 0; }+ 外层display: flex; gap: 8px; - 响应式降级：小屏下改用
flex-direction: column，并加width: 100%防止按钮超宽 - 按钮文字过长？用
text-overflow: ellipsis+white-space: nowrap+overflow: hidden，别换行——换行会打破高度一致性 - 禁用状态按钮仍需保持相同尺寸，否则卡片高度会跳变
点击后防止重复提交或误触的关键控制点
用户连点两次，不是 UX 小问题，是后端可能收到两条请求的逻辑风险。光靠 CSS 灰掉按钮远远不够——DOM 层禁用后，JS 事件监听器还在，fetch 可能并发发出。
- 点击即设
button.disabled = true，同时清除后续 click 监听（或用once: true） - 若按钮触发
fetch，务必配AbortController，防止上一个请求未结束时新请求覆盖 - 不要依赖
setTimeout恢复按钮——网络慢时用户已离开页面，恢复毫无意义；应由请求完成/失败回调决定是否启用 - 服务端也得做幂等校验（如用
idempotency-key），前端防不住所有情况
最易被忽略的是：卡片内按钮的 type 属性缺失时，默认是 submit，一按就刷新页面或提交父表单——这个坑在嵌套表单场景下特别隐蔽。
