结论是<ul>和<ol>的表现力取决于嵌套结构、语义组合、CSS控制及与<dl>的配合；嵌套时<li>必须为直接子元素，<ol>的start/type传递语义，<dl>更适合标题-说明结构，CSS覆盖需谨慎避免破坏可访问性。
直接说结论：<ul> 和 <ol> 本身没“高级玩法”，真正决定表现力的是嵌套结构、语义组合、CSS 控制，以及和 <dl> 的配合方式。别被“高级”二字带偏，先踩准几个关键点。
嵌套列表时，<li> 必须是 <ul> 或 <ol> 的直接子元素
常见错误是把 <ul> 直接塞进 <ul> 里，漏掉外层 <li>：
<ul> <li>一级项</li> <ul><li>错误：这里没包在 <li> 里</li></ul> </ul>
正确写法必须让子列表成为某个 <li> 的内容：
- 一级项
- 二级项（这个
<ul>是上层<li>的子节点）
- 二级项（这个
否则浏览器会自动修正（可能插入空 <li>），但 DOM 结构不可控，JS 操作或 CSS 选择器容易失效。
立即学习“前端免费学习笔记（深入）”；
<ol> 的 start 和 type 参数不是装饰，而是语义信号
比如你在文档中拆分章节，第二部分从第 5 步开始，用 start="5" 不仅视觉连续，还让屏幕阅读器知道这是延续编号逻辑：
<ol start="5"> <li>导出数据</li> <li>校验完整性</li> </ol>
注意：type 值影响可访问性支持程度 —— type="A" 和 type="1" 都被广泛支持，但 type="i"（小写罗马数字）在某些旧版读屏软件里可能读作字母而非序号。生产环境优先选 "1" 或 "A"。
用 <dl> 替代嵌套列表处理“标题-说明”类结构
很多人硬用 <ul><li><ul><li> 表达“参数名：说明”，其实语义错位，且样式难对齐。正确做法是：
<dl> <dt><code>colspan</code></dt> <dd>合并当前单元格向右的列数（含自身）</dd> <dt><code>rowspan</code></dt> <dd>合并当前单元格向下的行数（含自身）</dd> </dl>
<dl> 天然支持术语与定义的映射关系，CSS 中用 dt::before 加图标、dd 缩进控制层级，比手动调 margin-left 更稳定。而且搜索引擎和辅助技术能更好识别这种结构。
CSS 覆盖默认样式前，先确认是否真需要重置
删掉圆点或数字，常是为了“更简洁”。但实际中：
– 移除 <ul> 的 list-style 后，若没补 padding-left，文字会贴左，破坏可读性；
– 给 <ol> 加 counter-reset 自定义计数器时，忘了在 <li> 里写 counter-increment，结果全显示 0；
– 用 list-style-image 换图标，但没设 list-style-position: inside，图标会悬在文本外侧，换行后对不齐。
真正省事的做法，往往是保留默认行为，只微调颜色或间距 —— 浏览器默认样式已针对可访问性做过平衡，强行覆盖反而增加维护成本。
