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