用 start 属性可让 从指定数字开始编号（如 ），type 属性控制嵌套样式（如 type="a"），状态需结合 data-status 与 aria 属性，打印问题须用 counter-reset 和 break-inside 修复。

用 <ol></ol> 做任务清单，序号不从 1 开始怎么办

默认 <ol></ol> 总是从 1 开始编号，但实际做任务清单时，常需要接续上一个列表（比如“第 5 步”接着“第 4 步”），或跳过前几项留作备注。直接改 HTML 不行，得靠 start 属性。

实操建议：

• start 是整数，写成 <ol start="5"></ol>，浏览器会从 5 开始编号（5、6、7…）
• 别用 CSS 的 counter-reset 模拟——它不改变语义，屏幕阅读器仍读作“1. 2. 3.”
• 如果要倒序（如倒计时任务），start 本身不支持，得换 <ul></ul> + 手动加序号文本，或用 JS 控制

<ol></ol> 里嵌套子任务，怎么让缩进和编号样式匹配

嵌套 <ol></ol> 本身合法，但默认二级编号是 “1.1, 1.2”，三级是 “1.1.1”——可读性差，也不符合多数任务清单习惯（比如主任务用数字，子任务用字母或圆点）。

实操建议：

• 用 type 属性控制子列表样式：<ol type="a"></ol>（a、b、c），<ol type="i"></ol>（i、ii、iii）
• 避免多层嵌套超过 3 级，否则视觉混乱；超过时建议用 <details></details> 折叠子项
• 别依赖 list-style-type CSS 覆盖——部分老浏览器（如 IE）不支持对 <ol></ol> 的该属性重置

任务完成状态要可视化，能直接用 <ol></ol> 表达吗

<ol></ol> 本身只管编号逻辑，不带状态语义。想标“已完成”“已跳过”，不能只靠 HTML 结构，否则无障碍访问会丢失关键信息。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

实操建议：

• 给每个 <li> 加 data-status 属性（如 data-status="done"），再用 CSS 的 [data-status="done"]::before 插入 ✔️ 图标
• 必须同步加 ARIA 属性：aria-checked="true" 或 aria-disabled="true"，让读屏软件感知状态
• 别用纯背景色区分状态——色觉障碍用户可能无法识别；至少叠加图标或文字提示（如“✓ 已验证 API 密钥”）

导出为 PDF 或打印时，<ol></ol> 编号错乱或截断

浏览器打印预览里，<ol></ol> 经常出现编号重复、跨页断开、或最后几项编号消失——本质是分页时 CSS 计数器未重置，或 <li> 内容撑高导致布局断裂。

实操建议：

• 在打印样式表中强制设置 ol { counter-reset: item; } 和 li { break-inside: avoid; }
• 避免在 <li> 里放大段代码块或表格；若必须，加 page-break-inside: avoid; 到其容器
• 测试时用 Chrome 的“另存为 PDF”，别只看打印预览——后者渲染精度低，常漏掉编号

任务清单看着简单，但编号连续性、嵌套层级、状态表达、打印适配这四点，任一没处理好，就会在协作或交付时被挑出来。尤其是 start 和 type 这两个原生属性，很多人绕路用 JS 实现，其实白费力气。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！