前端最容易写错的标签，不是 div，而是列表：​​ul​​、​​ol​​、​​li​​ 到底该怎么用？

前端最容易写错的标签，不是 div，而是列表：ul、ol、li到底该怎么用？

很多刚学 HTML 的人，看到列表标签会觉得没什么难度：
不就是一堆小圆点，或者前面加个 1、2、3 吗？

但真到实际开发里，导航栏、新闻列表、商品分类、排行榜、操作步骤，这些页面结构几乎都离不开列表标签。更关键的是，不少人把列表写“能显示”了，却没写“规范”。页面看起来没问题，结构其实已经乱了。

今天这篇文章，就把前端里最常见的三兄弟讲透：

• ul
• ol
• li

顺手再结合实际开发场景说清楚：
什么时候该用无序列表，什么时候必须用有序列表，嵌套时又有哪些坑最容易踩。

一、为什么列表标签这么重要？

很多网页内容，从视觉上看像一块一块排版，但从 HTML 结构上看，本质上就是“一个个条目”。

比如下面这些页面元素：

• 网站导航菜单
• 新闻资讯列表
• 商品分类
• 热门推荐
• 音乐排行榜
• 安装步骤说明
• 多级菜单

这类内容本质上都是“列表”。
如果你不用列表标签去表达，而是全靠div硬堆，虽然页面可能也能显示出来，但语义和结构都会差一截。

简单说一句：

列表不是为了显示小圆点，而是为了表达一组同类型内容。

二、无序列表：ul

ul是unordered list的缩写，表示无序列表。

所谓“无序”，不是说它乱，而是说：
这些项目之间没有明显先后顺序。

基本写法

<ul><li>红楼梦</li><li>西游记</li><li>水浒传</li><li>三国演义</li></ul>

运行结果

浏览器中通常会显示成这样：

• 红楼梦
• 西游记
• 水浒传
• 三国演义

默认情况下，每个列表项前面会带一个小圆点。

三、无序列表最容易犯的错：ul里面不能乱放东西

这是初学者最常见的问题之一。

错误写法

<ul><p>我是段落</p><li>第一项</li><li>第二项</li></ul>

这个写法在浏览器里可能“勉强能显示”，但结构不规范。

正确写法

<ul><li><p>我是段落</p></li><li>第一项</li><li>第二项</li></ul>

重点记住一句话：

ul里面只能直接放li，不能直接放p、div、a、img这些标签。

但li本身是一个容器，它里面可以放很多内容，比如：

• 文本
• 图片
• 链接
• 段落
• 表单
• 甚至新的列表

四、li到底有多能装？

看一个更接近真实项目的例子。

代码示例：新闻列表

<ul><li><ahref="#">某地发布新一轮产业扶持政策</a></li><li><ahref="#">热门手机降价，电商平台促销开始</a></li><li><ahref="#">开发者最常见的 5 个 HTML 结构错误</a></li></ul>

运行结果

• 某地发布新一轮产业扶持政策
• 热门手机降价，电商平台促销开始
• 开发者最常见的 5 个 HTML 结构错误

这就是最典型的资讯列表结构。
你平时看到的新闻站、门户站、博客推荐区，大量都在用这种思路。

五、无序列表还能嵌套：做分类、多级菜单特别常见

如果一个列表下面还有子项，就可以继续嵌套新的ul。

代码示例：名著与人物

<ul><li>红楼梦<ul><li>贾宝玉</li><li>林黛玉</li><li>薛宝钗</li>