ol是展示学习计划最语义化、最合适的标签，它天然支持顺序编号、start起始值控制和type样式切换，每个条目必须用li包裹，嵌套ol可清晰表达子任务，且具备原生无障碍与seo优势。
ol 是展示学习计划最语义化、最合适的标签，它天然支持顺序编号、起始值控制和类型切换，比用 div + 手动数字更可靠，也比 ul 更准确——毕竟“第1天学HTML”和“第2天学CSS”之间存在强顺序依赖。
用 ol 写学习计划的基本结构
必须用 ol 包裹所有 li，不能省略 li 直接往 ol 里塞文本，否则语义丢失、样式错乱、屏幕阅读器无法识别步骤顺序。
-
ol是容器，只允许直接子元素为li（或脚注类元素，但学习计划中不用） - 每个学习条目必须包裹在独立的
li中，哪怕内容只有一行文字 - 不要在
li外加p或span做“美化”，先保证结构正确再用 CSS 调整外观
正确示例：
<ol> <li>周一：HTML基础标签与语义化结构</li> <li>周二：CSS选择器与盒模型</li> <li>周三：Flex布局实战</li> </ol>
start 属性让计划从任意数字开始
当学习计划跨周或分阶段时，start 能避免手动改编号。比如第二周从“第8天”开始，而不是重置为“第1天”。
-
start="8"会让第一个li显示为 “8.”，后续自动递增 - 值必须是整数，不支持小数或负数；浏览器会忽略非数字值
- 和 CSS 的
counter-reset不同，start是 HTML 层级的声明，兼容性更好（IE8+ 都支持）
示例（第二阶段学习）：
<ol start="8"> <li>第八天：JavaScript变量与作用域</li> <li>第九天：函数与闭包理解</li> </ol>
type 属性切换编号样式，但优先用 CSS
type 可设为 "1"（默认数字）、"a"、"A"、"i"、"I"，适合简单场景，比如用字母区分模块：type="A" 表示“模块A：前端基础”。
- HTML 属性
type已被现代项目视为过时写法，W3C 推荐用 CSS 的list-style-type -
type无法精细控制字体、颜色、间距，而 CSS 可以配合::marker伪元素做完整定制 - 如果用了
type又写了list-style-type，后者会覆盖前者
推荐写法（兼顾语义与样式控制）：
<ol class="study-plan"> <li>环境搭建与 VS Code 配置</li> <li>HTML5 新增语义标签实践</li> </ol>
CSS：
.study-plan {
list-style-type: lower-alpha;
}
.study-plan::marker {
font-weight: bold;
}
嵌套有序列表处理子任务
单个学习日可能含多个动作，比如“周四：响应式开发”下要拆解为“媒体查询”“移动优先”“视口设置”三项。这时用嵌套 ol 比平铺更清晰。
- 内层
ol默认继承外层编号逻辑，但编号格式可独立设置（如外层数字、内层小写字母） - 嵌套层级不宜超过两层，三层以上易造成缩进混乱和可访问性问题
- 不要用
ul套ol来“混搭样式”，语义上学习步骤就是有序的，混用反而削弱表达力
示例：
<ol>
<li>周四：响应式开发</li>
<ol>
<li>理解媒体查询语法与断点设置</li>
<li>实践移动优先开发流程</li>
<li>viewport 元标签与适配原理</li>
</ol>
<li>周五：Git 基础与团队协作规范</li>
</ol>
真正容易被忽略的是：学习计划不是静态文档，它常需导出为 PDF、同步到 Notion 或被爬虫收录。ol 提供的原生编号、语义层级和无障碍支持（如屏幕阅读器自动读出“第3项”），是任何 CSS 模拟方案都难以替代的底层保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
