用独立 fieldset 包裹每道题，radio name 按题号区分（如 q1），按钮用 type="button" + data-question-id 定位，js 查当前题选项并比对反馈，label 设 block 和 padding 适配移动端，特殊字符需转义。
怎么用纯 HTML + CSS 快速搭出可点击的题库列表
不需要框架、不依赖后端，只要能展示题目、选项和答案提示就行——这种静态题库界面，核心是结构清晰 + 交互可控。关键不是“炫技”，而是让每道题的 <div class="question"> 能独立展开/收起、选项能单选、提交后能立刻看到对错反馈。
<p>常见错误是把所有题干和选项写死在页面里，导致后期增删题要改大段 HTML；或者用 <code><form></form> 包裹全部题目，结果一提交整个页面刷新，体验断层。
- 每道题用独立
<fieldset></fieldset>包裹，语义清晰，也方便 JS 按题号操作 - 选项统一用
<input type="radio">，name属性必须按题号区分（如name="q1"、name="q2"），否则多题之间会互相干扰 - 答案提示区域用
<small class="feedback"></small>，初始设为display: none，提交后才显示 - 避免用
<button type="submit"></button>触发全表单提交；改用<button type="button"></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> 表示独立内容区块'</section>
移动端适配最省事的三件事
手机上看题库，最常出问题是选项挤成一行、字号小到看不清、点击区域太小误触。不用 media query 大改，先做这三处调整就足够应付大多数设备。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 在
里加<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认缩放会破坏布局 - 所有
input[type="radio"]后紧跟<label></label>，且label设置display: block和padding: 8px，增大可点击热区 - 题干文字用
font-size: 1.1rem（别用 px），配合line-height: 1.5防止行距过密
为什么不要一开始就加“计时器”和“自动保存”
这两个功能看着实用，但实际开发中 90% 的翻车都源于它们：计时器在页面切走后继续跑，导致时间不准；本地存储没处理好同源策略或数据格式，一刷新答案全丢。
真要加，等基础题库流程跑通再说。现在优先确保：题能看清、选项能点、答完立刻有反馈、换题不卡顿。
容易被忽略的是题干里的特殊字符——比如 HTML 标签符号 、<code>> 必须写成 <、>，否则浏览器会误解析成真实标签，直接破坏结构。题库从 Word 或 Excel 粘贴过来时，这点最容易漏。
