如何使用HTML有序列表编排教程内容-html教程-PHP中文网

正确做法是用+构建步骤，禁用硬编号；嵌套用子而非并列；跨节续编用start属性；多层嵌套应降级为语义分组；清样式后须补padding-left或用css counters。

如何使用html有序列表编排教程内容

用 `<ol></ol>` 包裹步骤，别用 `<p></p>` 硬写编号

教程类内容最常犯的错，就是把“第一步”“第二步”当成普通段落写进 <p></p>，再手动加数字。这不仅语义错误（屏幕阅读器读不出顺序），还导致 CSS 样式失效、缩进错乱、嵌套困难。浏览器只认 <ol></ol> + <li> 这一对组合来建立顺序逻辑。

正确做法是：每个操作步骤必须是 <li> 的直接子元素，所有 <li> 必须在同一个 <ol></ol> 内。如果某一步里还要分小步，就在那个 <li> 里嵌套另一个 <ol></ol> —— 不是另起一个 <ol></ol> 放在旁边。

✅ 正确：<ol> <li>打开编辑器</li> <li>新建文件</li> </ol>
❌ 错误：<p>1. 打开编辑器</p> <p>2. 新建文件</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
⚠️ 常见副作用：内容“贴着左边溢出容器”，其实是 <p></p> 没继承列表默认 margin 和 list-style-position

`type` 和 `start` 属性不是装饰，是语义延续的关键

教程常跨章节或接续前文，比如上一节结束在第7步，本节要从第8步开始。这时候不能靠删掉前7个 <li> 或手动改数字——得用 start="8"。同理，子步骤用字母编号时，type="a" 不只是“好看”，它告诉辅助技术：“这是主步骤下的并列子项”，而非独立序列。

注意：HTML5 中 type 在嵌套时会自动降级（外层 type="1" → 内层 type="a" → 再内层 type="i"），但前提是嵌套结构合法；如果外层用了 type="A"，内层又没声明 type，浏览器仍按默认 decimal 渲染，不会自动切字母。

<ol start="8"></ol>：让编号从 8 开始，后续自动为 9、10…
<ol type="a"></ol>：仅对当前这个 <ol></ol> 生效，不影响父级或兄弟级
reversed 属性极少用于教程（倒序编号），但若真需要（如“剩余3步→2步→1步”提示），它比 JS 控制更轻量

嵌套超过两层就容易失控，优先用语义分组代替多级 `<ol></ol>`

三层以上嵌套（比如 <ol>→<li>→<ol>→<li>→<ol></ol> </li> </ol> </li> </ol>）会让 CSS 难以精准控制缩进、字体大小和编号对齐，也增加维护成本。实际写教程时，与其硬套四层编号，不如用 <h3></h3> 或 <section></section> 切分逻辑模块，每块内部用一层 <ol></ol>。

例如安装指南中，“配置环境”部分本身已是独立环节，就该用 <h3>配置环境</h3> <ol>...</ol>，而不是把它塞进主流程的第4个 <li> 里再套一个 <ol type="i"></ol>。

推荐深度：主流程 <ol></ol> → 子任务用 <ol type="a"></ol> → 子任务内细节用 <ul></ul> 或段落，不强求编号
视觉一致性比编号形式更重要：用户关心“下一步做什么”，不是“这行该显示罗马数字还是小写字母”
用开发者工具检查 <li> 的 computed list-style-position，若为 outside 且文字换行后缩进异常，大概率是父级 <ol></ol> 缺失或嵌套错位

去掉默认样式后，`padding-left` 和 `counter-reset` 得手动补上

很多教程模板会加 list-style-type: none 来清空原生编号，改用背景图或伪元素自定义。但清空的同时也清掉了浏览器内置的 padding-left（通常 40px 左右），结果所有 <li> 贴左对齐，编号图标悬在文字外侧却没留空间。

这时候不能只靠 text-indent 或 margin-left 调，得配 padding-left 给编号区域留位。更稳妥的做法是用 CSS counters：给外层 <ol></ol> 设 counter-reset: step，每个 <li> 用 ::before { content: counter(step) ". "; counter-increment: step; } —— 这样即使 JavaScript 动态增删项，编号也自动更新。