用 article 包裹展位，h3 作标题，img 带描述性 alt，button 或 role="button" 的 a 作点击区域；必含标题、展位图、动作按钮，可选≤80字问题导向描述。
怎么用纯 HTML 搭出一个可点击的展位卡片
虚拟展位本质是带交互信息的容器，不是动画或 3D 场景——先用语义化 HTML 搭好骨架，再加样式和行为。别一上来就写 canvas 或引入 Three.js。
常见错误：把展位写成一堆 div 堆砌，没结构、没焦点顺序、屏幕阅读器无法识别；或者用 img 当按钮，但没加 alt 和 role="button"。
- 用
article包裹单个展位，比div更语义清晰，利于 SEO 和辅助技术 - 展位标题必须是
h3或更高级标题（不能全用span），确保层级可导航 - 展位图用
img，src必须存在，alt描述展位内容（如alt="XYZ 公司：工业 AI 检测方案演示"），不可为空或仅“展位图” - 点击区域统一用
button或带role="button"的a，避免用div onclick—— 否则键盘用户按Tab进不去，也触发不了Enter事件
展位卡片里该放哪些必要属性（不是越多越好）
虚拟展位不是企业官网首页，信息过载反而降低转化。核心是让访客 3 秒内判断“这是否相关”，并能立刻跳转。
容易踩的坑：硬塞公司简介、10 张产品图、嵌入式视频自动播放、弹窗表单——这些都该延后加载或由用户主动触发。
立即学习“前端免费学习笔记（深入）”；
- 必含三项：
h3标题（公司/品牌名 + 主推方向）、img（展位主视觉，建议尺寸统一为 400×300px）、一个明确动作按钮（如button文字为“查看方案”或“预约 demo”） - 可选一项：
p简短描述（≤2 行，不超 80 字），避免形容词堆砌，写清解决什么问题（如支持产线实时缺陷识别，延迟 ） - 禁止内联 JS 初始化逻辑；所有交互绑定放在外部脚本中，用
data-booth-id这类自定义属性传参，别用id="booth_1"硬编码
为什么展位列表不能只靠 CSS Grid / Flex 自动排版
自动布局在桌面端看着整齐，但在小屏、高缩放比、读屏软件下极易错乱。展位卡片不是图片流，它承载操作意图。
典型现象：用 display: grid 排 12 个展位，缩放到 150% 后卡片重叠、文字被截、按钮变不可点；NVDA 朗读时顺序和视觉顺序不一致。
- 固定列数（如桌面端 4 列、平板 2 列、手机 1 列），用媒体查询控制
grid-template-columns，而非依赖auto-fit+minmax - 每个
article加tabindex="0"，确保键盘用户可逐个聚焦；配合outline样式，别用outline: none直接干掉 - 展位之间留足间距（至少
1rem），避免触控误点；移动端按钮高度不低于44px，符合 WCAG 触控标准
展位链接跳转前要检查的三件事
展位卡片上的按钮，90% 最终指向外部页面或弹层。但跳转本身会打断用户上下文，尤其在展会多窗口场景下。
错误做法：所有链接都加 target="_blank"，却不加 rel="noopener"；或直接 window.open 却没处理浏览器拦截。
- 如果目标是新页面（如公司官网展位页），链接必须带
rel="noopener noreferrer"，否则存在安全风险且影响性能 - 如果目标是当前页弹层（如产品视频模态框），按钮应
type="button"，用 JS 控制aria-hidden和焦点捕获，别用href="#" - 所有跳转前，用
data-booth-url存地址，JS 中统一处理；避免 HTML 里写死href="https://xxx.com/booth?id=7"—— 后期改链路时得批量替换
最常被忽略的是焦点管理：用户从展位卡片点开弹层后，键盘焦点必须落到弹层内第一个可交互元素，关闭时要回到原按钮。这点没做，等于没做可访问性。
