html有序列表（）不能直接作为或的子元素，因表格内容模型仅允许、等特定标签；浏览器会自动纠错，将移出或包裹进隐式，故必须嵌套在单元格内才符合规范。
HTML 有序列表不能直接作为 浏览器实际解析时会把 如果你真想让编号对齐表格行、或让编号跨单元格视觉连续（比如整列都是步骤 1/2/3），纯 HTML 列表做不到，得换思路：<table> 的子元素使用，浏览器会自动修正 DOM 结构，导致 <code><ol></ol> 被移出表格或被包裹进 <td> —— 这不是 bug，而是 HTML 规范强制要求的解析行为。
<h3>为什么 <code><ol></ol> 不能直接写在 <tr> 或 <code><table> 里
<p>HTML 表格内容模型严格规定：<code><tr> 只能包含 <code><td>、<code><th>、<code><script></script> 等有限标签，<ol></ol> 不在此列。当你写出如下代码：
<ol></ol> 移到 <table> 外部（或塞进隐式生成的 <code><td>），最终 DOM 结构不可控。
<ul>
<li>这不是渲染差异，是 HTML 解析器的“纠错”行为，所有主流浏览器一致</li>
<li>
<code><ul></ul> 同样受此限制，不能当 <tr> 直接子元素
<li>想验证？用浏览器开发者工具查看 Elements 面板，而非源码视图</li>
<h3>正确做法：把 <code><ol></ol> 放进 <td> 或 <code><th> 里
<p>有序列表必须嵌套在单元格内部，这是唯一符合规范且可预测的方式：</p>
<pre class="brush:php;toolbar:false;"></pre>
<table border="1">
<tr>
<th>步骤说明</th>
<th>耗时</th>
</tr>
<tr>
<td>
<ol>
<li>下载安装包</li>
<li>运行 setup.exe</li>
<li>按提示完成配置</li>
</ol>
</td>
<td>约 5 分钟</td>
</tr>
</table>
<ul>
<li>每个 <code><li> 会正常编号，start、reversed、type 属性都有效
<li> 内再嵌 <ol></ol>
<ol></ol> 有上下 margin，可能撑开 <td> 高度，可用 CSS 重置 <code>margin
用 CSS 模拟“表格内有序列表”的替代方案
<ol></ol>，用 <td> 的 <code>data-step 属性 + CSS 计数器（counter-reset/counter-increment）生成编号
<table>，再自由嵌套 <code><ol></ol>
<colgroup></colgroup> 或 <tbody> 绕过限制——它们不改变内容模型规则
<p>真正容易被忽略的点是：很多人在写完代码后只看页面效果，没检查 Elements 面板里的实际 DOM 结构，结果上线后发现编号错乱、样式失效，才意识到列表早被浏览器“悄悄搬家”了。</p>
</tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
