html规范要求子元素只能是，直接放会触发浏览器自动修复导致渲染异常；正确做法是每个表单控件必须包裹在内，并添加aria-label提升可访问性。
为什么 <ol></ol> 里直接放 <input> 不报错但渲染异常
浏览器允许在 <ol></ol> 中直接写 <input>，但 HTML 规范要求 <ol></ol> 的子元素只能是 <li>。实际渲染时，浏览器会自动“修复”结构——把孤立的 <input> 提到 <ol></ol> 外面或塞进隐式生成的 <li>，导致序号错乱、样式丢失、焦点行为不可控。
正确做法：每个表单控件必须包裹在 <li> 内
这是唯一符合语义且稳定可控的方式。序号属于 <li>，不是 <ol></ol> 本身；所有交互元素（<input>、<select></select>、<textarea></textarea>）都应作为 <li> 的内容存在。
常见错误写法：
<ol> <input type="text" name="q1"><input type="text" name="q2"> </ol>
正确写法：
<ol> <li><input type="text" name="q1" aria-label="第一题答案"></li> <li><input type="text" name="q2" aria-label="第二题答案"></li> </ol>
-
aria-label建议加上，弥补纯表单项缺乏可见文本的问题，提升可访问性 - 如果需隐藏默认序号（如用自定义图标），用 CSS 控制
list-style: none，别删<li> - 避免把整个表单（含提交按钮）塞进一个
<li>—— 这会破坏列表语义，应按逻辑项拆分
需要多控件组合时，<li> 内可以自由嵌套
一个 <li> 可以包含标签、输入框、辅助文字、甚至小范围的 <fieldset></fieldset>，只要不越级（比如再嵌 <ol></ol> 而不配 <li>）。
例如带描述和校验提示的单项：
<ol>
<li>
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email"><small class="hint">请输入公司邮箱</small>
</li>
</ol>
-
<label></label>必须关联for和id，否则点击文字无法聚焦输入框 - 不要用
<br>换行控制布局 —— 用 CSS 的display: block或flex更可靠 - 若某项需禁用整行，给
<li>加aria-disabled="true"并配合样式，而不是只禁用<input>
动态生成时注意 DOM 结构完整性
用 JavaScript 插入时，容易漏掉 <li> 层。比如用 innerHTML 直接拼字符串，或用 appendChild 错误地把 input 元素加到 ol 上。
- 安全写法：创建
li元素 → 把表单控件 append 到它内部 → 再把liappend 到ol - 用
insertAdjacentHTML时，确保模板字符串中包含完整的<li>...</li> - React/Vue 等框架中，列表渲染必须用
key绑定到<li>，而非其子表单元素
序号逻辑完全由 <li> 的数量和顺序决定，任何绕过它的操作都会让语义和样式脱钩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
