HTML卡片标签栏本质是语义化交互容器，应用包裹带标题的标签栏与卡片组，按钮用role="tab"、内容区用role="tabpanel"并关联ARIA属性，配合inert/hidden隐藏非活跃项，确保键盘导航与视觉状态同步。

HTML卡片排版里加标签栏（Tab Bar），本质不是“给卡片加个tab”，而是让一组语义相关但状态互斥的卡片，通过可点击标签切换显示——它属于交互容器设计，不是纯视觉装饰。

用 <section></section> 包裹标签栏 + 卡片组，别用 <div> <p>标签栏和它控制的卡片内容构成一个逻辑区块，比如“用户资料”“订单记录”“设置项”。用 <code><section></section> 而非 <div> 是为了明确语义：屏幕阅读器能识别这是页面中一个可跳转、可命名的独立区域；SEO 也能更好理解内容分组意图。如果整个区域是可复用、可 RSS 订阅的独立单元（如某篇带多版本预览的博客），才考虑用 <code><article></article>。

• <section></section> 内必须有显式标题，例如 <h2>我的账户</h2>，否则语义链断裂
• 标签按钮本身建议用 <button type="button"></button>，而非 <a></a> —— 它不触发页面跳转，只切换本地状态
• 所有标签按钮需设 role="tab"，对应卡片内容区设 role="tabpanel"，并用 aria-controls 和 aria-labelledby 关联

display: flex 布局标签栏，但别让按钮撑满父容器

标签栏本身是水平一维布局，display: flex 最稳妥。但常见错误是给每个 <button></button> 设 flex: 1 或 width: 25%，结果在窄屏下文字被截断或换行错位。

• 用 flex-wrap: wrap + justify-content: center 更安全，允许按钮自然宽度并居中对齐
• 按钮内文字用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防溢出
• 激活态（aria-selected="true"）按钮必须有视觉反馈：背景色+底部边框/下划线，且 :focus 样式要与 :hover 一致
• 禁用 margin-right 控制间距——改用 gap: 8px（现代浏览器支持良好），避免末尾按钮多出空白

卡片内容区用 display: none 切换，但得配 inert 或 hidden

只靠 display: none 隐藏非活跃卡片，会导致键盘 tab 键仍能聚焦到其中的按钮或链接（尤其当内容含 <button></button> 或 <a></a> 时）。这不是样式问题，是可访问性漏洞。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 推荐组合：display: none + inert 属性（Chrome 111+/Safari 16.4+/Firefox 122+ 支持）——inert 会真正禁用所有交互和焦点捕获
• 兼容旧浏览器时，用 hidden 属性替代，并配合 JS 移除/恢复 tabindex="-1" 到内部可聚焦元素
• 不要用 opacity: 0; pointer-events: none —— 它不阻止焦点进入，且对屏幕阅读器不可见
• 每次切换后，用 element.focus() 主动聚焦到新激活的 tabpanel，确保键盘用户感知变化

小组件组合时，卡片高度必须等高，否则标签栏会“飘”

标签栏固定在顶部，下方卡片内容高度不一时，切换后整个区块高度跳变，视觉割裂。这不是动画问题，是布局基线没对齐。

• 外层 <section></section> 设 display: flex; flex-direction: column;，卡片内容区设 flex: 1 并 min-height: 0（防 flex shrink 失效）
• 卡片内部结构统一用 display: flex; flex-direction: column;，描述区域用 flex-grow: 1，按钮用 margin-top: auto 推到底部
• 禁用 height: 100% 硬设高度——它依赖父级显式高度，而标签栏切换时父级高度动态变化
• 图片加载失败时，用 aspect-ratio: 16/9 + object-fit: cover 保比例，避免因缺图导致高度塌缩

最易被忽略的是：标签栏的键盘操作逻辑必须和视觉状态完全同步——按 ←→ 切换标签、按 Enter 激活、按 ↓ 进入当前面板。这些不是“锦上添花”，而是让卡片组真正可用的底线。