用表示顺序重要的列表（如步骤、排名），表示并列无关先后的项目（如菜单、标签云）；仅用于术语与定义的成对结构（如词汇表、api说明），不可替代前两者。
怎么用 <ol></ol> 和 <ul></ul> 区分有序与无序
浏览器只认标签语义，不看缩进或符号样式。用 <ol></ol> 表示顺序重要（比如步骤、排名），用 <ul></ul> 表示项目并列无关先后（比如菜单、标签云）。
常见错误是把带数字的列表全塞进 <ul></ul> 里再用 CSS 强行加序号——这样语义丢失，对屏幕阅读器和 SEO 不友好。
-
<ol></ol>默认从 1 开始，可用start属性改起始值，比如<ol start="5"></ol> -
<ul></ul>的圆点/方块样式只能用 CSS 的list-style-type控制，HTML 本身不提供type="square"这类旧属性（已废弃） - 嵌套时，子列表用
<ol></ol>还是<ul></ul>取决于子项是否继承父级顺序逻辑，不是“看起来该换样式”
<dl></dl> 不是“第三种列表”，而是专门描述术语与定义
<dl></dl> 不是用来替代 <ol></ol> 或 <ul></ul> 的通用列表容器。它只适用于成对出现的“术语-解释”结构，比如词汇表、API 参数说明、FAQ。
容易踩的坑是把普通并列项硬套成 <dt></dt>/<dd></dd>，结果语义错乱，且某些辅助技术会跳过 <dt></dt> 后的 <dd></dd> 内容。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每个术语用
<dt></dt>，每个对应解释用<dd></dd>；一个<dt></dt>可配多个<dd></dd>（如多义词），一个<dd></dd>也可跟多个<dt></dt>（如同义词） -
<dl></dl>内部不能直接放文本，也不能把<dt></dt>和<dd></dd>混在<li>里——这是无效 HTML - 想实现“横向术语+解释”布局？别靠
<table>，用 CSS 的 <code>display: grid或flex更语义化浏览器默认样式差异影响实际渲染效果
不同浏览器对
<ol></ol>的编号格式（阿拉伯数字、字母、罗马数字）和缩进量有细微差别，<dl></dl>的<dd></dd>缩进甚至可能被重置为 0。这不是 bug，而是规范允许的渲染自由度。如果你依赖精确缩进或编号样式，必须显式设置 CSS：
- 用
counter-reset+counter-increment+::before可完全自定义<ol></ol>编号，比type属性更可控 -
<dl></dl>的<dd></dd>默认margin-left在 Chrome 是 40px，Firefox 是 2em，Safari 是 1.5em——不重置就可能错位 - 移动端 Safari 对
<dl></dl>的<dt></dt>有额外行高处理，若内容含<img>或<button></button>，需检查垂直对齐
什么情况不该用这三类列表标签
当内容不具备“列表”语义时，强行套用只会增加维护成本和可访问性问题。
- 导航菜单：用
<nav></nav>+<ul></ul>是 OK 的，但纯图标按钮组、分页控件更适合<nav></nav>+<div>，避免屏幕阅读器读出“列表共 5 项”这种干扰信息 <li>卡片网格：即使视觉上像一排项目，只要没有逻辑上的并列关系（比如搜索结果排序不固定），就该用 <code><section></section>或<article></article>，而不是<ul></ul> - 表单选项：
<select></select>+<option></option>是标准方案，不用<ol></ol>模拟下拉菜单
真正难的是判断“有没有列表语义”，而不是记住怎么写标签。很多问题根源不在 HTML 写法，而在最初没想清楚内容逻辑关系。
- 用
