ol标签是语义化有序列表，明确表达不可交换的顺序关系，非视觉技巧；错误使用div手动编号会导致可访问性、seo及维护问题，且ol合法子元素仅限li。

ol 标签不是“加数字的视觉技巧”，而是明确告诉浏览器和辅助技术“这些项目有不可交换的顺序”。用错地方或强行绕开它，后续维护、可访问性、SEO 都会出问题。

为什么不能用 div + 手动编号代替 ol

常见错误现象：在步骤指南里写 <div>1. 准备材料</div> <div>2. 混合原料</div>，看似省事，实则埋雷。

• 屏幕阅读器读不出“这是第几步”，只会平铺读出文字，用户无法跳转或理解流程结构
• 如果某步被动态隐藏（比如条件步骤），编号要手动重算；而 ol 会自动重排 start 和序号
• 搜索引擎无法识别语义层级，可能降低页面在“教程类”关键词下的权重
• ol 支持原生 reversed 属性和 CSS counter-reset，div 方案得全靠 JS 或冗余 class 模拟

ol 的合法子元素只能是 li，其他都算结构错误

常见错误现象：<ol><p>第一步</p></ol> 或 <ol><div><h3>安装步骤</h3></div></ol> —— 浏览器虽会渲染，但 DOM 结构非法，校验工具报错，部分辅助技术可能跳过或误读。

• ol 的直接子元素必须且只能是 li（或脚注类 script、template 等极少数例外）
• li 内部可以嵌套任意内容：段落、标题、图片、表单、甚至另一个 ol 或 ul
• 嵌套时注意语义：子 ol 应表示“该步骤内部的次级顺序”，比如“3. 编译代码”下嵌套“① 安装依赖 ② 运行构建命令”

type 和 start 属性已不推荐直接使用

虽然 <ol type="a" start="3"></ol> 在 HTML 中仍有效，但现代实践中应交由 CSS 控制样式和起始逻辑。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• type（如 a、I）已被 list-style-type 取代，后者支持更多值（如 lower-greek、hebrew），且可统一管理主题
• start 在动态内容中不可靠：JS 插入新 li 后，编号不会自动调整；而用 CSS counter-increment + counter-reset 更可控
• 若需倒序，优先用 reversed 属性（原生支持，语义清晰），而非手动设 start 再反向写内容

移除默认样式时，别只清 list-style

常见错误现象：加了 list-style: none; 后，列表项缩进还在，左侧留白难对齐。

• list-style: none 只清除标记，不重置默认 padding-left（各浏览器值不同，Chrome 是 40px，Firefox 是 2em）
• 务必同步设置 padding-left: 0 或 margin-inline-start: 0（推荐后者，更符合逻辑方向）
• 若用 Flex/Grid 布局列表项，li 的 display 默认是 list-item，有时需显式设为 block 避免意外行为

真正容易被忽略的是：语义一旦写错，后期补救成本远高于初始选对标签。一个 ol 不只是“看起来像步骤”，它是 DOM 层面的契约——约定顺序、支持导航、兼容语音交互。写完检查一遍：能否用键盘 Tab 跳到每个 li？屏幕阅读器是否读出“第 2 项，共 5 项”？动态增删后编号是否还连贯？这三处过了，才算真正用对了。

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