纯HTML5可用<details><summary>实现无JS标签页，但默认不互斥；需单选时用radio+:checked或JS控制；注意热区≥44×44px、hidden语义优于display:none，且IE不支持hidden。
用 <details> + <summary> 实现无 JS 标签页切换
纯 HTML5 就能做标签页，不用写一行 JavaScript。关键在于 <details> 是原生可展开/收起的语义化容器，<summary> 是它的标题栏，点击自动切换 open 状态。
常见错误是把它当普通 div 用，忘了加 open 属性控制默认展开态，或没处理多组并存时的互斥逻辑（原生不支持单选，得靠 CSS 或少量 JS 补齐）。
- 默认关闭：直接写
<details>即可 - 默认打开：加
open属性，即<details open> - 样式定制必须用 CSS，
<summary>默认带小三角，可用::marker或list-style: none去掉 - 多个
<details>同时展开是允许的；如需“单标签页”效果（点一个关其他），得用 JS 监听toggle事件手动控制
display: none 切换 vs hidden 属性的性能差异
标签页内容隐藏，别只想着 display: none。HTML5 的 hidden 属性语义更准，且在多数现代浏览器中渲染性能略优——它明确告诉浏览器“这部分不参与布局、不可访问、不渲染”，而 display: none 是 CSS 行为，触发重排重绘的边界稍模糊。
但注意：两者都**不会停止内部 <video>、<audio> 或定时器运行**。如果标签页里有轮播图或播放器，光加 hidden 不够，得配合 JS 暂停。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
<details hidden>控制初始状态，再用 JS 动态增删hidden属性 - 避免混用：
hidden和display: block冲突时，hidden优先级更高 - 兼容性：IE 完全不支持
hidden，如需支持 IE，回退到 class 控制display
用 radio + :checked 实现真单选标签页
想纯 CSS 实现“点 A 关 B、C、D”，又不想写 JS？用表单控件 <input type="radio"> 配合相邻兄弟选择器是最稳的方案。每个 radio 对应一个面板，利用 :checked ~ .panel 显示对应内容。
容易踩的坑是 label 和 input 的绑定关系写错，或者忘记给所有 radio 设置相同 name —— 没有同名 name，就不是单选组，无法互斥。
- 结构要点：所有
<input type="radio">必须同name="tabs"，且各自id唯一 - label 必须用
for="xxx"绑定对应 input 的 id，或把 input 包进 label 内 - 面板用
<section class="panel">，CSS 写input#tab1:checked ~ .panel:nth-of-type(1) { display: block; } - 缺点：无法用键盘空格切换（
<details>支持），且 URL 无法锚点定位到某标签
移动端 touch 区域太小导致标签页点不中
很多 HTML5 标签页在手机上点不动，不是代码错，是 <summary> 或自定义 tab 按钮的点击热区不足 44×44px。iOS Safari 和 Android Chrome 都会忽略小于这个尺寸的触控目标。
解决方法不是放大文字，而是用 CSS 扩展可点击区域：给 <summary> 或 tab 元素加 min-height: 44px、padding，并确保 box-sizing: border-box。
- 别只改 font-size，热区大小和字体无关
- 用
touch-action: manipulation可减少 iOS 300ms 延迟，但不能替代足够热区 - 测试时真机连 devtools 远程调试，模拟器的点击灵敏度常不准
<details> 适合简单 FAQ 类标签页；需要 SEO 友好+URL 锚点跳转，就得结合 history.pushState 和 hashchange；而对动画过渡有要求的，display 切换配 CSS transition 仍是主流做法——HTML5 提供的是能力，不是银弹。 
