前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库ul ol 列表 语义
HTML语义与文档

什么时候应该用 ul 和 li,而不是几段文字或 div?

一组并列项目且先后顺序不重要时,用 <ul> 包 <li>。这让读屏知道它是列表及有多少项;如果步骤顺序影响结果,应该用 <ol>。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档#Web 可访问性
先看核心答案读代码示例
理解线索

项目之间有集合关系

  1. <ul>承载无需排序的一组项目
  2. <li>标记组内每一项
  3. <ol>表达先后次序有意义的项目

去掉列表圆点只改变视觉样式;仍应检查目标读屏是否按预期宣告列表。

核心回答

先记住这个答案

若几段内容本来是一组同类项目,比如导航链接、商品卖点或注意事项,用 <ul> 和 <li> 能明确表达集合和项目边界。读屏可据此告知用户这里有一个列表、包含多少项。若必须按第一步、第二步执行,改用 <ol>;若只是普通连续叙述,不要为了缩进或圆点硬套列表。

  • <ul> 表示无序项目集合
  • <li> 标记每个项目
  • 步骤顺序重要时用 <ol>
  • 圆点可隐藏而保留结构

页脚导航是一组链接

页脚有“关于我们”“帮助中心”“联系我们”三个并列入口。用段落或三个 <div> 也能画出来,但读者和辅助技术不容易知道它们是一组导航项。

导航里的无序列表HTML
<nav aria-label="页脚导航">
  <ul>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/help">帮助中心</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

<nav> 说明这是导航区域,<ul> 说明里面是并列链接,<li> 划清每项。页面可用 CSS 让它们横排并去掉圆点;布局变化不需要改掉语义结构。 如果这三条是完成开户的顺序步骤,<ol> 更准确。列表类型应由内容关系决定,而不是设计稿上有没有数字。 列表还可以有层级:某一项下面若再细分几个子项,应把内层 <ul> 放进对应的 <li>,让“帮助中心”下面的“常见问题”和“联系客服”仍属于同一父项。只靠缩进画出层级,读屏无法从结构中辨认哪项从属于哪项。

不要把整篇文章拆成列表

普通段落之间有前后论述关系,硬套 <li> 会让读者听到频繁的“列表第几项”,反而打断阅读。列表适合相对独立、可以逐项扫描的内容。

有些设计只想要每段左边一个圆点,但内容本身不是并列项目,这时应先重新审视信息结构。需要视觉符号可用 CSS,不能让符号反过来决定 HTML 元素。

判断是否该用列表,可以试着把每一项单独拿出来读:若每项都是一个完整的入口或要点,列表合适;若后一句依赖前一句的代词和论证,拆成列表反而割裂意思。列表项内部可以有多段说明,<li> 并不限制只能放一行文字。

在导航中去掉默认圆点时,也要留意焦点样式和点击区域。只把链接文字排成横排而没有明显焦点指示,键盘用户仍难定位当前项目。HTML 列表提供结构,能否顺畅操作还取决于链接与样式的实现。

回答前,多想一步

容易答错的地方

为了去掉圆点改成 <div>
圆点是默认样式,可用 CSS 调整;集合语义仍由列表元素提供。
步骤说明仍用无序列表
若执行次序会影响结果,应使用 <ol> 表达顺序。
试着用自己的话回答

面试官还会怎么问?

菜单一定要用 <ul> 吗?

不绝对,但多个同类导航链接作为列表通常更易理解;关键是保持链接和导航区域语义。

<li> 可以单独放在 <div> 下吗?

不应这样写。列表项应属于合适的列表容器,如 <ul> 或 <ol>。

去掉圆点会丢失列表语义吗?

标记结构仍是列表,但实际读屏宣告可能受样式和平台影响,重要场景要实测。

从一道题,走向一组知识

把知识连起来

语义与文档

header、main、footer 各放什么?页面能有几个 main?

页面主导航可在 <nav> 内使用列表组织链接。

语义与文档

文章卡片用 article,普通内容分区用 section 吗?

文章中的相关内容列表可放进适合的 <section>。

参考资料

  • <ul> HTML unordered list element

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 页脚导航是一组链接
  3. 不要把整篇文章拆成列表
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑