点击嵌套在 `whatwg html standard 的语义与事件处理规则来解释。
? 核心机制：事件捕获、焦点与默认行为抑制
当用户点击 <input type="checkbox"> 时：
- 该元素是可聚焦（focusable）且可激活（activatable） 的表单控件，原生响应 click 事件并切换 checked 状态；
- 浏览器不会将该点击事件视为对 <a> 的“激活”行为（即不触发 a 的 navigate 操作），因为规范明确要求：表单控件的激活行为具有更高优先级，且其默认动作会阻止祖先链接的默认跳转；
- 同时，由于 <input> 是替换元素（replaced element），它在视觉上“遮挡”了底层 <a> 的点击区域，因此鼠标事件首先被 <input> 捕获并处理，event.stopPropagation() 效果等效（尽管未显式调用），导致 a 无法收到可触发导航的激活事件。
值得注意的是：你观察到的 <a> 文本高亮变化（如背景色或 outline），是浏览器在 <input> 获得焦点时，对整个 <a> 容器应用了 :focus-within 或类似样式响应（现代浏览器普遍支持），但这仅为视觉反馈，不表示链接被激活或导航已触发。
? 规范依据：非“嵌套 <a>”，而是“交互元素禁止作为 <a> 的后代”
需要澄清一个常见误解：问题中引用的 HTML 解析章节（13.2.6.4.7）实际描述的是多个 <a> 标签嵌套的解析错误处理（即 <a><a>...</a></a>），并不适用于 <a> 包含 <input> 的场景。真正相关的规范位于：
-
✅ HTML Living Standard § 4.5.1 The a element 明确指出：
立即学习“前端免费学习笔记（深入）”；
“The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content descendant.” （强调：<a> 元素不得包含任何交互式内容后代（interactive content descendants），包括 <button>、<input>、<select>、<textarea>、<embed>、<iframe>、<keygen>（已废弃）、<label>（若关联表单控件）、<object>（若具有 usemap）、<select> 等。）
✅ § 4.5.2 Interactive content 将 <input> 明确定义为交互式内容，因此其出现在 <a> 内部属于违规范结构（non-conforming）。
浏览器对此类结构的处理策略是：保留 <input> 的全部交互能力，同时静默忽略 <a> 在该子树上的导航语义——这既保障了表单控件可用性，又避免了歧义行为。
⚠️ 实际开发建议与替代方案
❌ 错误写法（语义错误、行为不可靠）：
<a href="https://stackoverflow.com/"> <span><input type="checkbox"> Hello</span> </a>
✅ 推荐方案（语义清晰、行为可控）：
方案 1：分离交互逻辑（推荐）
使用 JavaScript 显式控制：
<label>
<input type="checkbox" id="agree">
I agree to the terms
</label>
<a href="https://stackoverflow.com/" id="terms-link">View full terms</a>
<script>
const checkbox = document.getElementById('agree');
const link = document.getElementById('terms-link');
checkbox.addEventListener('change', () => {
link.style.pointerEvents = checkbox.checked ? 'auto' : 'none';
});
</script>方案 2：用 <button> 模拟链接（需 ARIA）
若需点击触发导航+状态变更：
<button type="button"
onclick="window.location.href='https://stackoverflow.com/'; this.classList.toggle('checked');"
aria-label="Go to Stack Overflow (also toggles selection)">
<input type="checkbox" aria-hidden="true" style="display:none;"> Hello
</button>✅ 总结
- <a> 内嵌 <input> 是HTML 规范明令禁止的结构，浏览器虽能渲染，但会优先保障表单控件行为，抑制链接跳转；
- 点击 <input> 仅改变其 checked 状态，是符合标准的预期行为；
- 文本高亮是 :focus-within 等 CSS 特性所致，与导航无关；
- 正确做法是语义解耦：用 <label> 关联表单控件，用独立 <a> 提供导航，或通过 JS 协调二者逻辑。
遵循 WHATWG 规范不仅确保跨浏览器一致性，更是构建可访问、可维护 Web 应用的基础。
