HTML怎么创建列表_html有序列表和无序列表用法小技巧

必须用<ol>的场景包括步骤说明、排名优先级、法律条文等有严格顺序语义的内容；无序内容如导航菜单、产品特性等一律用<ul&gt；<dl>仅适用于术语与定义对，嵌套列表必须在<li>内进行。

用 <ul> 还是 <ol>，不是看要不要数字，而是看内容有没有顺序语义——这点错了，后面所有样式、无障碍、SEO 都得返工。

什么时候必须用 <ol> 而不能用 <ul>

浏览器加不加数字只是渲染结果，关键在语义。以下场景必须用 <ol>：

• 步骤说明（如“1. 下载安装包 → 2. 双击运行 → 3. 完成配置”）
• 排名或优先级（如“Top 3 框架：1. React 2. Vue 3. Svelte”）
• 法律条文、合同条款编号（顺序不可交换，跳项会改变含义）

反例：导航菜单、产品特性罗列、标签云——这些项目调换位置不影响逻辑，一律用 <ul>。强行用 <ol> 不仅误导屏幕阅读器，还会让后续加 aria-orientation 或做 WCAG 测试时多绕三道弯。

<dl> 不是“高级 <ul>”，它只适合术语+定义对

<dl> 的语义非常窄：一个 <dt> 必须对应至少一个 <dd>，且二者构成“名词—解释”关系。常见误用：

立即学习“前端免费学习笔记（深入）”；

• 用 <dl> 做两栏布局（比如“姓名：张三｜邮箱：[email protected]”）→ 应该用 <table> 或 CSS Grid
• 把 <dt> 当标题、<dd> 当内容块来塞段落和按钮 → 屏幕阅读器会连续读出“术语…定义…术语…定义”，完全丢失结构
• 漏写 <dd>，只留 <dt> → DOM 中出现孤立节点，部分 SSR 框架（如 Next.js）可能报 warning，SSR 渲染结果与 CSR 不一致

真要展示键值对，且不需要表格语义，优先考虑 <div role="group"> + aria-labelledby，比硬套 <dl> 更可控。

嵌套列表时，<li> 是唯一合法父容器

所有嵌套都必须发生在 <li> 内部，而不是直接写在 <ul> 或 <ol> 里。错误写法：

<ul>  <li>一级项</li>  <ul><li>二级项</li></ul> <!-- ❌ 错：ul 不能直接子于 ul --></ul>

正确写法：

<ul>  <li>一级项    <ul><li>二级项</li></ul> <!-- ✅ 对：ul 是 li 的子元素 -->  </li></ul>

三层以上嵌套虽语法合法，但人眼难分辨层级，辅助技术（如 VoiceOver）常把第三层开始的编号读成“1点1点1”，建议用 <details><summary> 替代深层子列表，尤其当子项是解释性内容时。

CSS 移除默认符号后，别忘重置 padding 和 margin

只写 list-style-type: none 不够，浏览器默认给 <ul> 和 <ol> 设了 padding-left（通常 40px），移除符号后缩进还在，视觉上像“空了一格”。必须同步处理：

.clean-list {  list-style-type: none;  padding-left: 0;   <!-- 关键！否则左边还留白 -->  margin: 0;          <!-- 防止和上下文间距异常 -->}

如果列表项内含 <p> 或 <button>，还要注意 <li> 默认是 display: list-item，某些旧版 Safari 对块级子元素的垂直对齐有 bug，可显式加 display: block 避坑。

最常被跳过的一步：模板引擎里动态生成列表时，条件判断漏掉 <li> 开闭合（比如 v-if 或 {% if %} 只包内容不包标签），会导致 HTML 结构断裂——浏览器自动纠错后 DOM 和预期不一致，JS 拿 querySelectorAll('li') 可能少抓几个。语义选择和标签闭合，第一行就得写对。