HTML游戏主菜单应使用语义化<nav>包裹带role="button"的<button>，配合flex-column垂直居中布局、transform交互反馈及fixed定位叠加于canvas之上，并添加user-select:none和touch-action:manipulation优化体验。
HTML 游戏主菜单不是靠堆 div 或硬写绝对定位撑起来的，核心是：用语义化结构定骨架、Flex 控制按钮流、CSS 变换做交互反馈——否则容易在不同屏幕下错位、点击区域失效、或被后续游戏画布遮盖。
用 <nav> 包裹菜单项，别用 <div> 或 <ul> 套嵌
很多初学者把菜单写成 <div class="menu"><div class="btn">Start</div></div>，结果样式一改就塌，键盘导航也失效。实际应直接用 <nav> 表达“这是主导航区域”，里面放带 role="button" 的 <button>（不是 <a>，除非真跳转）。
-
<nav>被屏幕阅读器识别为导航区，<button>自带焦点和空格/回车触发，无障碍开箱即用 - 避免
<ul><li><a href="#">：链接语义是“跳转”，而游戏菜单按钮本质是“触发 JS 事件”，用<button>更准确 - 如果必须用
<a>（比如跳转到帮助页），得加tabindex="0"和role="button"显式声明行为
display: flex 布局按钮时，必须设 flex-direction: column 和 align-items: center
横向排列按钮（row）在桌面端看着整齐，但移动端窄屏下会溢出或换行错乱；垂直堆叠 + 居中才是游戏菜单的默认节奏。关键陷阱是只写 flex: 1 却漏掉父容器的 display: flex，导致样式完全不生效。
- 父容器（如
<nav>）必须设display: flex; flex-direction: column; align-items: center; - 每个
<button>设width: 80%; max-width: 320px; margin: 8px 0;，避免在小屏上过宽、大屏上过窄 - 加
min-width: 0到父容器——防止长按钮文字撑破布局（Flex 默认不截断）
按钮悬停/点击反馈必须用 :hover + :active，别只靠 JS 类名切换
纯 JS 添加 class="active" 再配 CSS，会导致触摸设备无反馈、鼠标快速划过时状态残留。原生伪类更可靠，且能自然兼容 pointer 和 touch 事件。
立即学习“前端免费学习笔记（深入）”；
-
button:hover { transform: scale(1.05); }比改背景色更直观，但注意别用transition: all，只过渡transform和background-color，避免重排 -
button:active { transform: scale(0.95); }必须存在，否则 iOS 上点击无压感 - 禁用状态用
button:disabled { opacity: 0.6; cursor: not-allowed; }，别只靠透明度——要明确告诉用户“不可点”
菜单容器必须脱离文档流，且 z-index 高于游戏画布
游戏主菜单常叠加在 <canvas> 上，但若用 position: relative，会被 canvas 的 z-index 盖住；若用 position: absolute 却没设 top/left，可能偏移出视口。
- 菜单外层包一个
<div class="menu-overlay">，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 100; -
<nav>放在里面，不额外设定位——靠父容器居中即可 - 确保 canvas 的
z-index小于 100（比如 1），否则菜单永远点不到
最易被忽略的是：菜单元素没设 user-select: none，玩家拖拽按钮时会意外选中文本；还有按钮没加 touch-action: manipulation，iOS 上首次点击有 300ms 延迟。这些细节不处理，第一印象就卡顿。
