什么时候在 html 中使用 UL 或 OL？

Posted 2023-02-24

【中文标题】什么时候在 html 中使用 UL 或 OL？

【英文标题】：when to use UL or OL in html?

【发布时间】：2010-11-05 14:32:06

【问题描述】：

似乎可以互换？

【问题讨论】：

他们确实应该选择不同的名称，因为当您第一次了解这一点时会感到困惑，因为视觉列表显然会按特定顺序显示。他们应该将其命名为 （用于项目符号列表）和 （用于编号列表）。

【参考方案1】：

UL 的意思是“无序列表”。 OL 的意思是“有序列表”。

UL 为您提供要点。 OL 给你数字。

绝对不能互换。

【讨论】：

好吧，从技术上讲，您可以使用 CSS（列表样式）更改列表的显示方式。但是是的，从语义上讲，UL 应该用于无序数据，OL 应该用于有序数据。

当然默认显示是一个考虑因素！可能不如标签的语义重要，但谁愿意花时间更改 OL 以获得要点，并强迫每个开发人员找出标准标签的奇怪显示规则？学究失败。

@Ben Blank：不是。这在语义上很重要。但是如果你对无序数据使用有序列表，然后使用 CSS 使有序列表表现得像无序列表，你就失败了，很难。那是我的观点。语义是最重要的，即使 CSS 可以修改显示。例如，语义将用于自动分析，而不是 CSS。您认为 Google 会解析 CSS 来确定您的有序列表是否实际上是无序列表？好吧，也许会，但那是谷歌。 :)

@Randolpho — 使用“无序数据的有序列表”正是我所反对的。我完全不同意你的回答； y 唯一的问题是它使数字/项目符号听起来像是最重要的部分。也许我留下的评论不清楚（如果是这样，我深表歉意），但我试图在此处为语义争论赞成。 :-)

@Ben Blank：我唯一的反对意见是默认显示应该对您的选择“没有影响”。这不应该是主要考虑因素，但是说默认显示甚至没有进入图片意味着您打算以可能使后来的开发人员混淆的方式违反默认显示。

【参考方案2】：

在数学术语中（嘿，为什么不呢？），<ol> 代表一个序列，而 <ul> 代表一个集合。重新排列有序列表中的项目会改变列表的含义。在无序列表中重新排列它们不会。

对于使用哪种类型的列表，这是一个很好的经验法则。如果更改项目的顺序导致列表不正确，您想使用<ol>。如果顺序无关紧要，请使用<ul>。

【讨论】：

序列与集合是一个有趣的比喻，除了数学集合不允许重复，而 html 无序列表允许。

我认为您的意思是“但是”而不是“除外”。 “数学集合不允许重复而 html 无序列表允许”这一事实并没有改变“序列与集合是一个有趣的隐喻”这一事实。

@jtmoulia 见multiset。

【参考方案3】：

对于<ol>，数据的顺序很重要，并且会显示（默认情况下），而对于<ul>，顺序并不那么重要。 示例：

<p>Tomorrow I will</p>
<ol>
 <li>Wake up</li>
 <li>Have breakfast</li>
 <li>Go to sleep</li>
</ol>
<p>During breakfast, I will eat</p>
<ul>
 <li>Butter</li>
 <li>Eggs</li>
 <li>Bacon</li>
</ul>

【参考方案4】：

一个是有序列表（OL），它用于具有定义和不同顺序的事物。组织起来是有原因的。

另一个（UL）是无序列表，它只是没有指定顺序的事物的集合。他们的组织是微不足道的。

【讨论】：

是的。其他人没有提到的是数字或项目符号只是默认格式。语义是主要的。

顺便说一句，如何通过css隐藏UL的子弹？

从语义的角度来看，这个论点有一点不成立。虽然无序列表代表一个集合，而不是一个序列，但它们隐含着一个“顺序”——列表项出现的顺序。它们根本不是完全无序的，开发者——也许是下意识地——在进入时对列表项进行排序。

好的，1、2、3、4、5 上面对list-style: none; 的评论是社区卓越的一个很好的例子，如果我见过的话一。

【参考方案5】：

哈哈，这么多答案！

当 HTML 第一次出现时，有 OL 和 UL，正如所有其他发帖者所说，它们表示有序列表和无序列表。

区别很简单。 OL 显示...旁边有一个数字。或者一个罗马数字，或者一个字母！您甚至可以控制它是使用大写符号还是小写！酷！

UL 给了你子弹。 3 种类型的子弹，偶数 - 圆盘（空心圆）、正方形（实心正方形）、圆形（实心圆）。

没有 CSS。除了这些属性之外，实际上没有办法自定义列表格式（以及边距和缩进以及其他所有内容）。因此，这种区别很重要。

如今，全是 CSS。事实上，w3 人希望您使用样式而不是您过去使用的 html“类型”属性。因此，如果您是新奇的 CSS 用户中的一员，那么使用 UL 还是 OL 并不重要。

CSS 可让您更改项目符号类型，或选择使用图像，或更改边距/样式/缩进，甚至根本不显示项目符号。

再次编辑：这个答案并不是真的要解决 UL 与 OL 的语义优点。但从技术上讲（你知道，在位和字节上），上面概述了行为上的差异。

【讨论】：

正确的做法是进行区分，因为您不知道用户将如何获得信息。也许他的浏览器不支持 CSS，或者他正在使用屏幕阅读器，或者其他什么。从语义上讲，它们并不相同，因此您必须区分它们。

【参考方案6】：

OL：

列表项 1 列表项 2

UL：

列表项 1 列表项 2

OL是有序列表，UL是无序列表

【讨论】：

对于OL，数字可以隐藏吗？

正如其他帖子中提到的，您可以使用 css list-style: none;隐藏它。也可以使用 list-style-type 来弄乱外观。如果您要投反对票，请留下理由。

知道了。如果我想设置每个 UL 元素之间的边距怎么办？

在一个简单的html页面中，css，li标签上的margin-bottom都可以做到

顺便说一下，列表的左边距实际上是大多数浏览器中的左边距。如果要删除，最好设置margin:0; padding:0;。

【参考方案7】：

当问题询问“何时使用它们”时，我认为提供一些例子是合适的，当我想要一系列步骤时，我通常决定使用 OL，而当我想要提供选择时，我决定使用 UL：

有序列表

这里的步骤对于业务案例至关重要，我们必须按此顺序执行步骤，因此使用有序列表。

电子商务的结帐阶段，这些步骤将按此顺序进行。

<ol>
    <li>shipping</li>
    <li>billing</li>
    <li>summary</li>
    <li>confirmation</li>
</ol>

无序列表

用户可以决定他们选择与这些选择

交互的顺序

<ul>
    <li>Contact Us</li>
    <li>Newsletter Signup</li>
    <li>Terms</li>
    <li>Log out</li>
</ul>

【参考方案8】：

我认为这是一个语义问题，因为编号/项目符号可以通过 CSS 更改。

有序列表应该是指令或任何顺序信息。

无序列表应该是其他一切。

【参考方案9】：

当您列出需要按特定顺序完成的步骤时，请使用 OL。 当您以没有特别的重要性顺序列出项目时，请使用 UL。

【参考方案10】：

ul 表示无序列表。它适用于列表，列表项的顺序无关紧要。

ol 表示有序列表。它适用于已编号或以某种方式显示它们具有特定顺序的列表。

默认情况下，ul 会为您提供项目符号列表和 ol 编号列表，尽管这可以在 css 中进行编辑。

【参考方案11】：

在某些情况下（屏幕阅读器专门为有特殊需要的人使用），由于视觉设计，您可能希望有有序列表但没有与之关联的数字。 前任。当您在页面上说出填写表格的说明并希望屏幕阅读器利用说明中的订购项目时，它将很有用。 出于所有视觉目的，可以通过 CSS 使它们看起来完全相同。它是（非视觉，但对屏幕阅读器有帮助）语义不同且有时有用。

【参考方案12】：

ol = 表示有序列表。当您想列出和编号事物时使用。 ul = 表示无序列表。当您想列出但不编号时使用。

我认为 OL 应该被称为 NL = 编号列表。为什么？因为UL也可以有订单但不能编号。