ul 是无序列表（默认圆点），ol 是有序列表（默认数字），每个条目是 li。语义上只要内容是并列的一组项目，就该用列表而不是拿 div 加手写符号。导航菜单、商品列表、步骤说明都是典型场景。list-style:none 可以去掉默认符号，再用自定义图形代替。导航菜单几乎必然要走这一步，然后用 flex 把条目横排。
ol 的 start 属性可以指定起始序号，reversed 反向编号，li 的 value 直接改某一行的编号——做法律条款、试卷题号时很有用。嵌套列表的缩进由 padding-left 产生，列表嵌套超过三层时要回头想想信息结构是否合理。无障碍方面，读屏软件会播报「列表，共 N 项」，这是 div 模拟不出来的体验。
<style> .lst { list-style: none; padding-left: 0; } .lst li { padding: 5px 0 5px 22px; position: relative; } .lst li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #4a9eff; } </style> <ul> <li>默认无序列表：圆点符号</li> <li>适合导航、商品、特性罗列</li> </ul> <ol> <li>第一步：打开编辑器</li> <li>第二步：写下结构</li> </ol> <ul class="lst"> <li>自定义符号的无序列表</li> <li>符号用伪元素绘制</li> </ul>