HTML怎么标注答题卡导航高亮_HTML已答/未答状态区分【介绍】-html教程-PHP中文网

应使用 aria-current="step" 标记当前答题卡，因其是浏览器原生支持的语义化方式，屏幕阅读器可直接识别“当前步骤”，配合 [aria-current="step"] css 选择器与 data-status 区分业务状态，确保无障碍、多设备、服务端渲染下状态准确一致。

html怎么标注答题卡导航高亮_html已答/未答状态区分【介绍】

怎么用 `aria-current` 标记当前答题卡

浏览器原生支持的语义化方式，比 class 切换更可靠，屏幕阅读器能直接识别「这是当前页」。aria-current 是专为这类导航高亮设计的属性，不是 hack，也不依赖 JS 状态同步。

常见错误是写成 aria-current="true" 或 aria-current="active" —— 实际只接受特定值："page"（最常用）、"step"、"location" 等。答题卡属于步骤型导航，用 "step" 更准确：

<nav aria-label="答题进度"><button aria-current="step">第1题</button>
  <button>第2题</button>
  <button>第3题</button>
</nav>

aria-current="step" 触发系统级高亮提示（如 VoiceOver 会读作“第1题，当前步骤”）
配合 CSS 用 [aria-current="step"] 选择器控制样式，比维护 .active 类更解耦
服务端渲染或静态页面也能直接输出正确状态，不依赖 JS 初始化

CSS 怎么安全地高亮已答/未答题卡

仅靠视觉颜色区分「已答」「未答」「当前」三态容易出错：色盲用户难分辨，对比度不足通不过 WCAG 2.1 AA 标准。

必须叠加至少两种差异信号，比如颜色 + 图标 + 文字提示：

button[aria-current="step"] {
  background: #007bff;
  color: white;
}
button[data-status="answered"]::before {
  content: "✓";
}
button[data-status="unanswered"]::after {
  content: "○";
}

用 data-status 区分业务状态（"answered"/"unanswered"），和 aria-current 的语义职责分开
避免仅用 opacity 或浅灰文字表示「未答」—— 对比度常低于 4.5:1
图标要用 ::before/::after 伪元素，不塞进 HTML，否则屏幕阅读器可能误读

React 里怎么同步更新答题卡状态而不闪动

关键在避免「先清空所有状态再重设」，否则 DOM 重绘会导致高亮跳变。要精确 diff 当前题号与已答列表。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

不要每次点击都重生成整个 button 数组，用 key={questionId} 保持节点复用
判断逻辑写在 render 内，而非提前算好 class 字符串： {isCurrent ? 'current' : status === 'answered' ? 'answered' : 'unanswered'}
如果使用 useReducer 管理答题状态，确保 action.type === 'ANSWER_QUESTION' 时只更新对应题目的 status 字段，不重置其他字段