核心回答
先记住这个答案
若几段内容本来是一组同类项目,比如导航链接、商品卖点或注意事项,用 <ul> 和 <li> 能明确表达集合和项目边界。读屏可据此告知用户这里有一个列表、包含多少项。若必须按第一步、第二步执行,改用 <ol>;若只是普通连续叙述,不要为了缩进或圆点硬套列表。
<ul>表示无序项目集合<li>标记每个项目- 步骤顺序重要时用
<ol> - 圆点可隐藏而保留结构
不要把整篇文章拆成列表
普通段落之间有前后论述关系,硬套 <li> 会让读者听到频繁的“列表第几项”,反而打断阅读。列表适合相对独立、可以逐项扫描的内容。
有些设计只想要每段左边一个圆点,但内容本身不是并列项目,这时应先重新审视信息结构。需要视觉符号可用 CSS,不能让符号反过来决定 HTML 元素。
判断是否该用列表,可以试着把每一项单独拿出来读:若每项都是一个完整的入口或要点,列表合适;若后一句依赖前一句的代词和论证,拆成列表反而割裂意思。列表项内部可以有多段说明,<li> 并不限制只能放一行文字。
在导航中去掉默认圆点时,也要留意焦点样式和点击区域。只把链接文字排成横排而没有明显焦点指示,键盘用户仍难定位当前项目。HTML 列表提供结构,能否顺畅操作还取决于链接与样式的实现。
回答前,多想一步
容易答错的地方
- 为了去掉圆点改成
<div> - 圆点是默认样式,可用 CSS 调整;集合语义仍由列表元素提供。
- 步骤说明仍用无序列表
- 若执行次序会影响结果,应使用
<ol>表达顺序。
试着用自己的话回答
面试官还会怎么问?
菜单一定要用 <ul> 吗?
不绝对,但多个同类导航链接作为列表通常更易理解;关键是保持链接和导航区域语义。
<li> 可以单独放在 <div> 下吗?
不应这样写。列表项应属于合适的列表容器,如 <ul> 或 <ol>。
去掉圆点会丢失列表语义吗?
标记结构仍是列表,但实际读屏宣告可能受样式和平台影响,重要场景要实测。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。