直接用包块级元素会出问题，因HTML标准中是行内元素，老版本HTML禁止其包含<div><h3><p>等块级元素，虽现代浏览器宽容渲染，但校验报错、SEO不稳定、键盘导航异常风险仍存。
为什么直接用 <a> 包块级元素会出问题
HTML 标准里，<a> 默认是行内元素，老版本 HTML（如 HTML4）明确禁止它直接包含 <div>、<h3>、<p> 这类块级元素。现代浏览器大多能“宽容渲染”，但校验器报错、SEO 不稳定、键盘导航（Tab 键）行为异常仍是真实风险。
用 display: block 或 display: inline-block 强制转换
最轻量、兼容性最好的解法：保持语义结构不变，只用 CSS 调整显示行为。
- 给
<a>加display: block，它就能撑满父容器，点击区域覆盖整个卡片 - 如果卡片需并排排列（比如网格布局），改用
display: inline-block更稳妥，避免换行干扰 - 别忘了清除默认的
text-decoration和outline，否则文字下划线或聚焦框可能破坏设计
<a href="/product/123" style="display: block; text-decoration: none;">
<div class="card">
<img src="thumb.jpg" alt="产品图">
<h3>无线耳机</h3>
<p>续航 30 小时</p>
</div>
</a>
用 role="link" + tabindex="0" 支持键盘访问
仅靠 display: block 不够——屏幕阅读器和键盘用户可能无法识别这是可点击链接。必须补全 ARIA 属性和焦点能力。
-
role="link"明确告诉辅助技术：这个容器就是链接 -
tabindex="0"让它能被 Tab 键聚焦；同时加onkeydown监听 Enter/Space 触发跳转（否则空格键无效） - 别漏掉
href属性，即使只是href="#"，否则部分读屏软件不识别为链接
<a href="/product/123" role="link" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' ')this.click()"> <div class="card">...</div> </a>
真正需要语义化卡片链接时，优先用 <button> + JS 跳转
如果卡片本身没有自然 URL（比如“加入购物车”“展开详情”这类操作），硬套 <a> 反而违背语义。这时候该换思路。
立即学习“前端免费学习笔记（深入）”；
- 用
<button type="button">包裹卡片内容，语义清晰、无障碍支持原生好 - 跳转逻辑统一走
window.location.href或router.push()，避免href="#"带来的页面滚动问题 - 注意：按钮默认有 focus outline，若视觉上要隐藏，必须提供替代焦点样式（如
box-shadow），否则违反 WCAG
复杂点在于，开发者常忽略键盘交互细节——比如没处理 Space 键、没屏蔽右键菜单、没让焦点在跳转后正确落位。这些不是“锦上添花”，是实际用户每天会撞上的墙。
