html有序列表（ol）仅适用于题干编号，不能直接制作答题选项；答题选项必须用input+label+fieldset构建，确保可交互、无障碍和表单提交功能。
HTML有序列表本身不能直接制作“答题选项”——它只负责编号，不处理选择逻辑、无障碍交互或表单提交。真正能答题的选项必须用 <input> + <label></label> + <fieldset></fieldset> 构建，<ol></ol> 仅适合纯展示型步骤或题干编号。
为什么不能直接用 <ol></ol> 做答题选项
常见错误是这样写：
<ol> <li> <input type="radio" name="q1"> A. 正确答案</li> <li> <input type="radio" name="q1"> B. 错误答案</li> </ol>
问题在于：<li> 不是表单控件容器，<input> 缺少 id，<label></label> 没绑定，点击文字无法触发选择，屏幕阅读器读不出选项关系，且 <ol></ol> 的编号（如 1. 2.）和语义与“可交互选项”完全脱节。
<ol></ol> 只该用在题干编号场景
当你需要给多道题本身编号（比如“第1题”“第2题”），而不是给选项编号时，<ol></ol> 才是正确选择：
- 题干用
<ol></ol>+<li>包裹，编号由浏览器自动管理 - 每道题内部必须用
<fieldset></fieldset>分组，避免跨题 Tab 跳转错乱 - 选项本身必须用
<input type="radio">或<input type="checkbox">，每个配独立id和对应<label for="xxx"></label> - 不要给
<ol></ol>加type="A"来模拟选项字母——那是视觉欺骗，破坏可访问性和 JS 获取逻辑
示例（合法结构）：
<ol>
<li>
<fieldset>
<legend>1. HTML 中定义有序列表的标签是？</legend>
<label><input type="radio" name="q1" value="ol" id="q1-ol"> A. <ol></label>
<label><input type="radio" name="q1" value="ul" id="q1-ul"> B. <ul></label>
</fieldset>
</li>
<li>
<fieldset>
<legend>2. 哪个 CSS 属性可替换默认编号？</legend>
<label><input type="radio" name="q2" value="list-style-type" id="q2-lst"> A. list-style-type</label>
<label><input type="radio" name="q2" value="counter-reset" id="q2-cr"> B. counter-reset</label>
</fieldset>
</li>
</ol>
如果真想让选项带 A/B/C 编号，用 CSS 而不是 type
HTML 的 type="A" 属于过时用法，且只作用于 <li> 的序号，跟选项功能无关。要让单选按钮旁显示 “A.”“B.”，应：
- 保持
<input>+<label></label>结构不变 - 用 CSS 的
::before或计数器生成字母前缀（例如counter-increment: opt; content: counter(opt, upper-alpha) ". "） - 确保字母只是视觉装饰，不参与表单值或无障碍语义——实际值仍来自
value属性 - 禁用
<ol></ol>的默认编号（list-style-type: none），避免数字和字母双重编号冲突
最易被忽略的一点：题干编号（<ol></ol>）和选项交互逻辑（<input> + <label></label>）属于两个不同层级，混用或强行嫁接会同时破坏语义、可访问性和 JS 控制能力。宁可多套一层 <fieldset></fieldset>，也不要省掉 id 和 for。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
