用独立 fieldset 包裹每道题，radio name 按题号区分（如 q1），按钮用 type="button" + data-question-id 定位，JS 查当前题选项并比对反馈，label 设 block 和 padding 适配移动端，特殊字符需转义。
怎么用纯 HTML + CSS 快速搭出可点击的题库列表
不需要框架、不依赖后端，只要能展示题目、选项和答案提示就行——这种静态题库界面，核心是结构清晰 + 交互可控。关键不是“炫技”，而是让每道题的 <div class="question"> 能独立展开/收起、选项能单选、提交后能立刻看到对错反馈。
常见错误是把所有题干和选项写死在页面里，导致后期增删题要改大段 HTML；或者用 <form> 包裹全部题目，结果一提交整个页面刷新，体验断层。
- 每道题用独立
<fieldset>包裹，语义清晰，也方便 JS 按题号操作 - 选项统一用
<input type="radio">，name属性必须按题号区分（如name="q1"、name="q2"），否则多题之间会互相干扰 - 答案提示区域用
<small class="feedback">，初始设为display: none，提交后才显示 - 避免用
<button type="submit">触发全表单提交；改用<button type="button">+ 简单 JS 判断
如何让单题提交后只反馈本题、不跳页
用户点“下一题”或“提交答案”，期望的是当前题立刻标红/绿色、显示解析，而不是刷新页面重来。这就得绕开表单默认行为，用 JS 控制局部状态。
典型坑是监听了 click 却没阻止默认动作，或者用 document.querySelector('input:checked') 但没加题号限定，结果跨题取错值。
立即学习“前端免费学习笔记（深入）”；
- 给每道题的提交按钮加唯一
data-question-id="q1" - JS 中用
event.target.dataset.questionId获取当前题号，再查对应题干下的input[name="q1"]:checked - 判断逻辑写死也没关系：
if (selectedValue === 'B') { feedback.textContent = '✓ 正确'; }，别硬套配置化 - 反馈文字不要只写“正确”，补一句简短依据，比如
'✓ 正确：HTML5 中 <section> 表示独立内容区块'
移动端适配最省事的三件事
手机上看题库，最常出问题是选项挤成一行、字号小到看不清、点击区域太小误触。不用 media query 大改，先做这三处调整就足够应付大多数设备。
- 在
<head>里加<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认缩放会破坏布局 - 所有
input[type="radio"]后紧跟<label>，且label设置display: block和padding: 8px，增大可点击热区 - 题干文字用
font-size: 1.1rem（别用 px），配合line-height: 1.5防止行距过密
为什么不要一开始就加“计时器”和“自动保存”
这两个功能看着实用，但实际开发中 90% 的翻车都源于它们：计时器在页面切走后继续跑，导致时间不准；本地存储没处理好同源策略或数据格式，一刷新答案全丢。
真要加，等基础题库流程跑通再说。现在优先确保：题能看清、选项能点、答完立刻有反馈、换题不卡顿。
容易被忽略的是题干里的特殊字符——比如 HTML 标签符号 <、> 必须写成 、<code>>，否则浏览器会误解析成真实标签，直接破坏结构。题库从 Word 或 Excel 粘贴过来时，这点最容易漏。
