button不能嵌套在a标签内，因二者同属交互式元素，w3c禁止嵌套；否则浏览器会忽略href或误触发表单提交，且破坏可访问性与dom结构。
button 不能嵌套在 a 标签里
这是最常踩的坑：写成 @#@#@#@#@#@#@#@#@#@0 看似能跳转，实际违反 HTML5 规范。浏览器会忽略 @#@#@#@#@#@#@#@#@#@1，纯样式需要按钮外观时，用 CSS 给 <a></a> 加 display: inline-block 和按钮类
<a></a>，用 event.preventDefault() + window.location.href
pointer-events: none 或 disabled 临时“屏蔽”嵌套行为——语义已损坏，可访问性全失button 内部不能放 div、h2、ul 等块级元素
<button></button> 的内容模型只接受 phrasing content（短语级内容），比如文本、<span></span>、<strong></strong>、<img>。塞一个 <div> 进去，浏览器会立刻截断并闭合 <code><button></button>，后续内容变成兄弟节点。
例如：<button>Text<div>Inside</div></button> 实际解析为：<button>Text</button><div>Inside</div>——按钮变小了，<div> 脱离控制，CSS 选择器失效，JS 事件委托也错位。
<ul>
<li>想实现“按钮含图标+文字+角标”，用 <code><span></span> 包裹，配合 flex 布局
<div role="button" tabindex="0">，手动加键盘事件支持
<li>别依赖 <code>appearance: none 强行撑开 <button></button> 容纳块级内容——底层 DOM 已被破坏，只是视觉上“看起来像”tab 切换中 button 必须与 tab-content 同级
常见错误是把 <button class="tab-btn"></button> 塞进 <div class="tab-content"> 里，或者反过来。结果是 JS 找不到对应内容区，切换无效，或点击后内容被渲染成按钮的子元素。
<p>HTML 结构必须是平级兄弟关系：<code><button data-tab="1"></button> 和 <div class="tab-content" data-tab="1"> 并列放在同一个父容器下。否则靠 CSS <code>display: none 隐藏整个 <button></button> 来间接隐藏内容，完全无效——<button></button> 里根本不能合法包含 <div>。
<ul>
<li>所有切换按钮必须显式声明 <code>type="button"，尤其在 <form></form> 内，否则默认 submit 会刷新页面
data-tab 字符串匹配，别用 class 名或索引数字——避免重排序后错位display: none 控制 <div class="tab-content">，而不是靠嵌套隐藏
<h3>嵌套 button 会导致可访问性和焦点逻辑崩溃</h3>
<p>写 <code><button><button>Inner</button></button> 不会报错，但屏幕阅读器会读出两个独立按钮，Tab 键焦点顺序错乱，aria-expanded 状态无法同步，Lighthouse 直接标为 WCAG 4.1.2 违规。
浏览器解析时会强制提前闭合外层 <button></button>，DOM 变成两个分离按钮，视觉上可能重叠，但逻辑上毫无关联。用户用键盘操作时，可能连续触发两次 click，或跳过某个按钮。
- 真正需要“区域整体可点 + 内部按钮独立操作”，用
<div role="region"> 包裹，内部放普通 <code><button></button>，通过事件代理区分点击目标 - 不要试图用
z-index或pointer-events模拟嵌套行为——可访问性链路已断裂 - 检查工具（如 axe）跑一遍 DOM，比肉眼确认更可靠；一旦发现 nested interactive，必须重构 真正的难点不在语法是否“能运行”，而在于浏览器静默修复后的 DOM 是否还能支撑 JS 逻辑、CSS 样式和无障碍需求。很多问题直到上线后被键盘用户或自动化测试扫出来才暴露。
