结论是和的表现力取决于嵌套结构、语义组合、css控制及与的配合；嵌套时必须为直接子元素，的start/type传递语义，更适合标题-说明结构，css覆盖需谨慎避免破坏可访问性。

直接说结论：<ul></ul> 和 <ol></ol> 本身没“高级玩法”，真正决定表现力的是嵌套结构、语义组合、CSS 控制，以及和 <dl></dl> 的配合方式。别被“高级”二字带偏，先踩准几个关键点。

嵌套列表时，<li> 必须是 <ul></ul> 或 <ol></ol> 的直接子元素

常见错误是把 <ul></ul> 直接塞进 <ul></ul> 里，漏掉外层 <li>：

• 一级项
• 错误：这里没包在
• 里

正确写法必须让子列表成为某个 <li> 的内容：

• 一级项
  • 二级项（这个 <ul></ul> 是上层 <li> 的子节点）

否则浏览器会自动修正（可能插入空 <li>），但 DOM 结构不可控，JS 操作或 CSS 选择器容易失效。

<ol></ol> 的 start 和 type 参数不是装饰，而是语义信号

比如你在文档中拆分章节，第二部分从第 5 步开始，用 start="5" 不仅视觉连续，还让屏幕阅读器知道这是延续编号逻辑：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<ol start="5">
<li>导出数据</li>
  <li>校验完整性</li>
</ol>

注意：type 值影响可访问性支持程度 —— type="A" 和 type="1" 都被广泛支持，但 type="i"（小写罗马数字）在某些旧版读屏软件里可能读作字母而非序号。生产环境优先选 "1" 或 "A"。

用 <dl></dl> 替代嵌套列表处理“标题-说明”类结构

很多人硬用 <ul><li><ul><li></ul></li></ul> 表达“参数名：说明”，其实语义错位，且样式难对齐。正确做法是：

colspan

合并当前单元格向右的列数（含自身）

rowspan

合并当前单元格向下的行数（含自身）

<dl></dl> 天然支持术语与定义的映射关系，CSS 中用 dt::before 加图标、dd 缩进控制层级，比手动调 margin-left 更稳定。而且搜索引擎和辅助技术能更好识别这种结构。

CSS 覆盖默认样式前，先确认是否真需要重置

删掉圆点或数字，常是为了“更简洁”。但实际中：
– 移除 <ul></ul> 的 list-style 后，若没补 padding-left，文字会贴左，破坏可读性；
– 给 <ol></ol> 加 counter-reset 自定义计数器时，忘了在 <li> 里写 counter-increment，结果全显示 0；
– 用 list-style-image 换图标，但没设 list-style-position: inside，图标会悬在文本外侧，换行后对不齐。

真正省事的做法，往往是保留默认行为，只微调颜色或间距 —— 浏览器默认样式已针对可访问性做过平衡，强行覆盖反而增加维护成本。

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