html有序列表中单选框必须嵌套在内，编号由控制，单选逻辑靠name属性统一管理；需配标签、用css flex对齐，并确保可访问性。
HTML有序列表里不能直接“插入单选框”
有序列表（<ol></ol>）本身只负责编号和语义化排列，<input type="radio"> 是表单控件，必须放在 <li> 内部才能合法嵌套，但浏览器不会自动把它“变成列表项的一部分”——编号依然只针对 <li> 元素本身，和里面的单选框无关。
正确写法：把 <input type="radio"> 放进 <li> 里
这是唯一符合 HTML 标准且能正常渲染的方式。编号由 <ol></ol> 控制，单选逻辑由 name 属性统一管理。
<ol> <li> <input type="radio" name="choice" value="a"> 选项一</li> <li> <input type="radio" name="choice" value="b"> 选项二</li> <li> <input type="radio" name="choice" value="c"> 选项三</li> </ol>
常见错误包括：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把
<input>写在<ol></ol>外面，再试图用 CSS 拉进位置——语义断裂，无障碍支持差，键盘导航失效 - 漏掉
name属性，导致多个单选框无法互斥 - 用
<ul></ul>或<div> 替代 <code><ol></ol>后手动加数字——失去语义、不利于屏幕阅读器识别顺序样式对齐问题怎么处理
默认情况下，单选框和文字基线不一致，编号和内容垂直对齐也容易错位。关键不是改结构，而是用 CSS 微调：
- 给
<li>设置display: flex; align-items: center;可快速对齐单选框与文字 - 避免直接给
<input>设vertical-align，不同浏览器行为不一致 - 如果需要编号右对齐或自定义编号样式，优先用
list-style-type: none;+::before伪元素，而不是放弃<ol></ol>
注意可访问性（a11y）的硬性要求
光有单选框和编号不够，屏幕阅读器需要明确知道每个选项的含义和当前状态：
- 每个
<input>必须配<label></label>，推荐用for/id关联，而非包裹写法（后者在某些旧读屏软件中可能跳过编号） - 示例：
<li> <input id="opt1" type="radio" name="choice" value="a"><label for="opt1">选项一</label> </li> - 不要依赖 placeholder 或纯视觉提示表达“必选”，要用
required属性 + 后端校验双保险
编号语义和表单控件语义是两套独立系统，强行混合容易两边都做不到位。真正难的不是放进去，而是让编号、焦点、朗读、状态反馈全部协同工作。
- 给
