是唯一语义正确的选择，必须用于明确先后顺序的内容；手动编号会破坏屏幕阅读器识别、SEO结构化数据及样式可维护性，子列表必须嵌在内，多层编号应优先用CSS counter实现。
<ol></ol> 是唯一语义正确的选择，不是“可以”，而是“必须”——只要内容存在明确先后、依赖或执行顺序，就该用它，而不是靠 <p></p> + 手动数字或 CSS 计数器模拟。
为什么不能用 <p></p> 或 <div> 写步骤
<p>手动编号（比如 “1. 准备材料”）会破坏语义结构，导致：</p>
<ul>
<li>屏幕阅读器无法识别这是步骤序列，可能跳过编号或读作普通段落</li>
<li>搜索引擎无法提取步骤逻辑，影响结构化数据富媒体展示（如 Google 的 How-to 摘要）</li>
<li>后续想改编号起始值（比如从第 5 步开始）、倒序、换字母，得全量改 HTML，而 <code><ol></ol> 只需加 start="5" 或 reversed
::marker 或 list-style-type 控制样式时，<p></p> 根本不支持 list-style 相关属性
<ol></ol> 嵌套子步骤的正确写法
常见错误是把子项写成独立 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 或外层 <ol></ol> 里混用 <div>，这会让大纲断裂、缩进错乱、辅助技术丢失层级。
<p>正确结构只有一条规则：子列表必须嵌在父级 <code><li> 内部，且用另一个 <ol></ol> 或 <ul></ul> 包裹。
立即学习“前端免费学习笔记（深入）”；
<ol>
<li>连接电源
<ol type="a">
<li>确认电压匹配</li>
<li>插入接地端口</li>
</ol>
</li>
<li>开机并等待自检完成</li>
</ol>
- 浏览器自动为外层编号 1、2，内层用 a、b；无需 JS 或额外 class
- 所有
<li>共享默认 margin/padding，不会“文字贴左”或“溢出容器” - 如果子项是并列操作（无顺序），就用
<ul></ul>替代内层<ol></ol>
start、type 和 CSS list-style-type 怎么选
HTML 属性（start、type）和 CSS 属性（list-style-type）都能控制编号，但优先级和用途不同：
-
start="7"是语义必需——表示“这确实是第 7 步”，应直接写在 HTML 中 -
type="A"仅用于简单替换（大写字母），但已不推荐；更灵活、可维护的方式是用 CSS：ol { list-style-type: upper-alpha; } - 若需复杂编号（如 “2.3.1” 多级嵌套编号），必须用 CSS
counter-reset+counter-increment，HTML 层保持干净 - 避免同时设
type="i"和list-style-type: lower-roman，CSS 会覆盖 HTML 属性，但语义信息已丢失
最容易被忽略的一点：嵌套超过两层后，<li> 的缩进和 marker 对齐极易受父级 padding 或 margin 干扰。检查时第一眼该看最外层 <ol></ol> 是否有意外的 padding-left: 0 或 list-style-position: inside —— 这类 CSS 会直接让子列表项文字顶到左边，看起来像“没嵌套”。
