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