纯HTML5可用实现无JS标签页，但默认不互斥；需单选时用radio+:checked或JS控制；注意热区≥44×44px、hidden语义优于display:none，且IE不支持hidden。
用
纯 HTML5 就能做标签页，不用写一行 JavaScript。关键在于 open 状态。
常见错误是把它当普通 div 用，忘了加 open 属性控制默认展开态，或没处理多组并存时的互斥逻辑（原生不支持单选，得靠 CSS 或少量 JS 补齐）。
- 默认关闭：直接写
- 默认打开：加
open属性，即 - 样式定制必须用 CSS，
::marker或list-style: none去掉 - 多个
toggle事件手动控制
display: none 切换 vs hidden 属性的性能差异
标签页内容隐藏，别只想着 display: none。HTML5 的 hidden 属性语义更准，且在多数现代浏览器中渲染性能略优——它明确告诉浏览器“这部分不参与布局、不可访问、不渲染”，而 display: none 是 CSS 行为，触发重排重绘的边界稍模糊。
但注意：两者都**不会停止内部 、 或定时器运行**。如果标签页里有轮播图或播放器，光加 hidden 不够，得配合 JS 暂停。
立即学习“前端免费学习笔记（深入）”；
雕鹰团队二次开发服装类商城模板；ecshop 韩都衣舍2014最新豪华版+专题频道页面功能；采用DIV+CSS布局，并优化了很多代码，使模板打开速度更快，更利于SEO搜索引擎优化。顶级分类页调用该分类下精品商品排行，左右切换滚动特效，头部购物车鼠标移入显示购物车商品，首页分类下方调用各分类商品，并且商品有立即购买功能，列表页左侧商品分类默认商品展开状态，点击哪个分类进入此页面，那么这个分类处于展开
- 推荐组合：
hidden属性 - 避免混用：
hidden和display: block冲突时，hidden优先级更高 - 兼容性：IE 完全不支持
hidden，如需支持 IE，回退到 class 控制display
用 radio + :checked 实现真单选标签页
想纯 CSS 实现“点 A 关 B、C、D”，又不想写 JS？用表单控件 配合相邻兄弟选择器是最稳的方案。每个 radio 对应一个面板，利用 :checked ~ .panel 显示对应内容。
容易踩的坑是 label 和 input 的绑定关系写错，或者忘记给所有 radio 设置相同 name —— 没有同名 name，就不是单选组，无法互斥。
- 结构要点：所有
必须同name="tabs"，且各自id唯一 - label 必须用
for="xxx"绑定对应 input 的 id，或把 input 包进 label 内 - 面板用
，CSS 写input#tab1:checked ~ .panel:nth-of-type(1) { display: block; } - 缺点：无法用键盘空格切换（
移动端 touch 区域太小导致标签页点不中
很多 HTML5 标签页在手机上点不动，不是代码错，是
解决方法不是放大文字，而是用 CSS 扩展可点击区域：给 min-height: 44px、padding，并确保 box-sizing: border-box。
- 别只改 font-size，热区大小和字体无关
- 用
touch-action: manipulation可减少 iOS 300ms 延迟，但不能替代足够热区 - 测试时真机连 devtools 远程调试，模拟器的点击灵敏度常不准
history.pushState 和 hashchange；而对动画过渡有要求的，display 切换配 CSS transition 仍是主流做法——HTML5 提供的是能力，不是银弹。 
