不能直接在中放，因html5规定只允许包含元素，否则浏览器会自动修复导致渲染异常；正确做法是将放入内，并注意alt属性、css对齐及响应式适配。
HTML <ol></ol> 里直接放 <img> 会出什么问题
不能直接在 <ol></ol> 标签下塞 <img>，浏览器会自动补全、重排或忽略——因为 <code><ol></ol> 只允许包含 <li>，这是 HTML5 的内容模型硬性限制。你看到图片没对齐、序号消失、甚至整个列表渲染错乱，大概率是结构非法导致的。
正确做法：把 <img> 放进 <code><li> 里
每个列表项必须包裹在 <li> 中，图片作为其子元素即可正常渲染。关键不是“能不能加图”，而是“图必须在合法容器内”。
常见写法示例：
<ol> <li>@@##@@ 点击设置按钮</li> <li>@@##@@ 在弹窗中勾选「启用同步」</li> </ol>
- 图片路径建议用相对路径（如
./images/icon.png），避免硬编码绝对 URL -
alt属性不可省，否则无障碍访问失败，部分浏览器/读屏软件会报错 - 若图片需控制宽高，优先用 CSS（
max-width: 100%+height: auto），而非width/height属性，避免拉伸失真
想让图片和文字垂直居中对齐？别碰 vertical-align 默认值
<li> 是块级元素，但 <img src="step1.png" alt="第一步操作"> 默认是 inline-level，和文字混排时容易底部留白（baseline 对齐导致）。这不是 bug，是 CSS 渲染规则。
- 最稳方案：给
<img src="step2.png" alt="第二步界面">加vertical-align: middle或vertical-align: top - 更现代做法：把
<li>设为display: flex，再用align-items: center统一对齐 - 别用
line-height去“挤”对齐，一旦图片高度变化就失效
移动端适配图片列表时最容易漏掉的三件事
有序列表+图片在手机上缩放错位、文字被截断、点击区域太小——往往不是代码写错，而是漏了响应式基础配置。
- 必须加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1"> -
<img>没设max-width: 100%？小屏幕下图片会撑破容器 -
<ol></ol>的默认padding-left在 iOS Safari 下可能偏大，建议重置：ol { padding-inline-start: 1.5rem; }（用逻辑属性更稳妥）
复杂点在于：序号样式（list-style-type）、图片尺寸、文字换行三者会相互影响，调一个就得连带看另外两个。别只盯着 HTML 结构，CSS 层叠才是实际渲染的决定者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
