ul 表示并列关系,ol 表示顺序依赖关系;ol 的 start 和 reversed 属性保障语义化计数,type 仅控制符号样式且应慎用;嵌套时子列表须独立判断语义。

ul 和 ol 的语义区别不是“有没有序号”
很多人以为 ul 就是“没编号”,ol 就是“有编号”,结果把带数字的步骤说明硬塞进 ul,只因“懒得改样式”。这会破坏屏幕阅读器对内容结构的理解——ol 表达的是**顺序依赖关系**,比如“先登录 → 再上传 → 最后提交”,换顺序逻辑就错;ul 表达的是**并列关系**,比如“支持格式:PDF、DOCX、TXT”,项之间无先后。
ol 的 start 和 reversed 属性容易被忽略
ol 默认从 1 开始计数,但实际场景中常需要跳过前几项(如接续上一页列表)或倒序排列(如排行榜)。这时不能靠 CSS 伪造,得用原生属性保证语义和可访问性:
- 第五步操作
- 第六步操作
- 金牌
- 银牌
- 铜牌
-
start接受整数,不支持字母或罗马数字(那些需用type属性) -
reversed是布尔属性,写上即生效,不用赋值 - 若同时设
start="3"和reversed,列表会从 3 开始倒数:3、2、1
type 属性在 ol 中仅控制符号,不改变语义
type 只影响渲染外观,不影响 DOM 结构或 ARIA 角色。它不适用于 ul,且在现代开发中应谨慎使用:
-
→ a. b. c. -
→ I. II. III. -
(默认)→ 1. 2. 3.
注意:type 在 CSS 中已被 list-style-type 更灵活地替代,且部分值(如 "A" 大写字母)在旧版 Safari 中支持不稳定。真正需要定制序号样式时,优先用 CSS 的 ::marker 伪元素。
功能列表:底层程序与前台页面分离的效果,对页面的修改无需改动任何程序代码。完善的标签系统,支持自定义标签,公用标签,快捷标签,动态标签,静态标签等等,支持标签内的vbs语法,原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统,可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率,稳定性和容错性,即使模版中有错误的标签也不会影响页面的显示。所有的标
立即学习“前端免费学习笔记(深入)”;
嵌套 ul/ol 时,子列表语义必须独立判断
常见错误是“父层用 ol,子层也跟着用 ol”,哪怕子项之间根本无关顺序。例如菜单导航下拉项、配置项分组,即使父列表是步骤(ol),子项仍是并列选项,该用 ul:
- 安装软件
- 配置环境
- 设置代理
- 选择语言
- 启用日志
- 启动服务
嵌套层级本身不传递顺序语义。每个 ul 或 ol 都要单独问一句:“这些项之间是否必须按此顺序执行/理解?” 答案决定标签,而不是视觉缩进或父级类型。










