应使用带真实 href 的 标签，如 查看同类题；无数据时禁用并设 aria-disabled="true" 和 tabindex="-1"；避免空 href、# 或 javascript:void(0)。
HTML里怎么让“查看同类题”变成可点击的解析链接
直接用 <a></a> 标签，别套 <button></button> 或监听 onclick——语义不对、键盘不可达、屏幕阅读器不识别。用户点它就是想跳转，那就给它一个真实 href。
常见错误现象：href="javascript:void(0)" 或 href="#" 后再用 JS 跳转；或者把 <a></a> 写成 <a href=""></a>（空字符串会刷新当前页）。
- 正确写法：
<a href="/problem/similar/12345">查看同类题</a>，后端返回真实路径 - 如果暂时没数据，宁可先禁用：
<a href="#" aria-disabled="true" tabindex="-1">查看同类题（暂无）</a>，别留空href - 避免用
target="_blank"除非明确需要新标签页；加rel="noopener"防安全风险
相似题链接的 URL 怎么设计才利于前端和 SEO
后端返回的链接不能是随机 hash 或临时 token，得带题目标识，否则缓存失效、分享失效、爬虫抓不到。
使用场景：学生点击后进列表页，老师导出报表时要能批量解析这些链接，搜索引擎希望收录“初中数学二次函数相似题”这类页面。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 推荐格式：
/similar?source_id=67890&subject=math&grade=9，参数清晰、可读、易调试 - 避免：
/api/v2/similar?id=abc123xyz&t=1715234890（含 API 路径、时间戳、无意义 ID） - 如果用前端路由（如 React Router），确保服务端也配了 fallback，否则直刷 404
点击“查看同类题”后页面卡顿或白屏？检查这三点
不是 HTML 问题，但用户感知就是“按钮点了没反应”，实际是后续 JS 或资源加载拖垮了体验。
性能影响：相似题列表常带渲染公式、图表、代码块，一并加载容易阻塞主线程。
- 确认是否在
<a></a>外层又包了onclick并调用了同步 heavy 函数（比如没做防抖的renderMathInElement()） - 检查是否用了
document.write()或内联<script></script>加载第三方解析库（如 KaTeX 初始化脚本），它们会阻塞渲染 - 网络层面：相似题接口响应超过 800ms，建议加 loading 状态，且默认懒加载首屏 5 条，滚动再加载更多
移动端点不准“查看同类题”？别只怪 touch-area 太小
真实原因是混用了 PC 和移动交互逻辑，比如监听了 click 却没处理 touchstart，或 CSS 把 padding 设为 0 又忘了重设 min-height。
兼容性影响：iOS Safari 对 <a></a> 的最小可点区域有隐式要求，font-size 且无足够内边距时，第一次触摸可能无效。
- 确保文字容器有至少
padding: 8px 12px，或显式设min-height: 36px - 不要用
pointer-events: none临时禁用再恢复，改用aria-disabled+ CSS 灰色态 - 测试真机：Chrome DevTools 的 device mode 只能模拟，iPhone 实测常发现
z-index层叠导致遮挡
最常被忽略的其实是链接的上下文语义——它旁边如果有“答案”“解析”“视频讲解”等并列按钮，href 路径风格必须一致，否则维护时没人敢动路由逻辑。
