HTML标准禁止在内嵌套，否则浏览器会自动修复结构导致点击失效；正确做法是用自身模拟按钮样式与行为，或改用配合JS控制跳转。
为什么不能把
HTML 标准明确禁止在 元素内嵌套交互式内容（如 、、）。浏览器会自动“修复”这种结构，比如把 移到 外面，导致点击区域错乱、样式失效、甚至事件绑定失效。你看到按钮没反应，或者点了跳转但没加购物车，大概率是这个原因。
用
想保留超链接语义（比如跳转到购物车页），又要有按钮外观和点击反馈，就该让 自己承担按钮角色，而不是套一个 ：
<a href="/cart/add?id=123" class="btn-add-to-cart">加入购物车</a>
配合 CSS 强制它像按钮：
.btn-add-to-cart {
display: inline-block;
padding: 8px 16px;
background: #ff6b6b;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
- 必须加
display: inline-block或block，否则padding不生效 - 去掉默认下划线：
text-decoration: none - 确保可访问性：加上
role="button"和tabindex="0"，支持键盘回车触发
需要执行 JS 加购逻辑时，别用 href="#"
如果点击要调用 fetch() 添加商品，再跳转或刷新页面，就别用空 href="#"——它会导致页面跳到顶部，且对屏幕阅读器不友好。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确做法：用
href="javascript:void(0)"或直接移除href属性，改用role="button" - 更推荐：用
，然后用 JS 控制跳转，语义更清晰 - 如果非要用
触发 JS，务必加event.preventDefault()阻止默认跳转
移动端点击区域小？补上 touch-action
在 iOS Safari 或部分安卓浏览器里，纯 的点击响应可能延迟 300ms，或点不中。除了加 touch-action: manipulation，更要检查：
- 是否设置了
min-height或min-width—— 小于 44px 的点击区在移动端难触发 - 父容器有没有
pointer-events: none意外拦截了事件 - 是否用了
user-select: none却忘了加-webkit-tap-highlight-color: transparent
真正麻烦的不是嵌套本身，而是混淆语义与行为边界——按钮负责操作，链接负责导航。混着用，早晚得修 DOM 结构和事件流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
