语义化标签是响应式切换功能可访问、可维护、可缩放的基础；+为原生切换方案，自带open属性、toggle事件及键盘支持；需严守语义与可访问性约束；由浏览器自动决策资源切换。
语义化标签本身不“实现切换”，但它是响应式切换功能可访问、可维护、可缩放的基础——用错标签，再 fancy 的 JS 或 CSS 切换逻辑都会在键盘导航、屏幕阅读器或 SEO 上翻车。
为什么 <details></details> + <summary></summary> 是最被低估的原生切换方案
它不是“模拟”折叠，而是浏览器原生支持的语义化展开/收起组件，自带 open 属性、toggle 事件、键盘（空格/Enter）激活、焦点管理，且无需任何 JS 就能工作。
- 不兼容旧版 IE，但在所有现代浏览器（Chrome/Firefox/Safari/Edge）中稳定支持（包括 iOS Safari 12.2+）
-
<summary></summary>必须是<details></details>的第一个子元素，否则语义断裂，屏幕阅读器无法识别控制关系 - 默认样式不可靠，必须重置
list-style和outline，但:focus轮廓不能移除——这是键盘用户的唯一视觉反馈 - 若需自定义箭头方向（如向下 → 向右），用
::marker伪元素比 JS 操作 class 更轻量、更可靠
用 <input type="checkbox"> 实现无 JS 切换时的关键约束
它本质是表单控件，不是 UI 组件。强行当按钮用，必须守住两条底线：一是保持语义正确（开/关状态可提交、可聚焦、可 aria 描述），二是不破坏表单上下文。
-
id和for必须严格匹配，否则点击<label></label>不触发状态变更 - 隐藏复选框必须用
position: absolute; opacity: 0; pointer-events: none，禁用visibility: hidden或display: none——后者会让它彻底脱离可访问树 - 状态样式必须通过
:checked伪类驱动，而不是监听 JS 变量；否则 SSR 或 JS 失败时 UI 与真实状态脱节 - 如果该切换影响其他 DOM（比如展开一个面板），推荐用相邻兄弟选择器
input:checked + .panel，而非 JS 操作 class —— 更快、更可靠、无竞态
<picture></picture> 里的切换不是“交互切换”，而是“浏览器自动决策切换”
它不响应用户点击，而是根据 media、srcset、type 等属性，由浏览器在加载阶段就决定用哪张图。写错顺序或漏掉 <img> 兜底，会导致某些设备白屏。
-
<source></source>标签必须写在<img>之前，浏览器按顺序匹配，遇到第一个满足条件的就停，后面的忽略 -
media查询值必须是合法媒体查询字符串，比如(min-width: 768px)，不能写成min-width: 768px（漏括号） -
<img>的src是强制兜底，不可省略；它的alt会被所有场景共用，不能留空 - 不要在
<source></source>上设alt——它无效；也不要用content替换<img>，Firefox 不支持，且违反语义
真正容易被忽略的，是「切换」背后的责任归属：是交给浏览器（如 <details></details>、<picture></picture>），还是交给人手（如 checkbox + CSS），抑或交给 JS（需处理 focus、aria-selected、keydown）。选错载体，后面所有样式和逻辑都在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
