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

问题描述 投票:0回答:12

看起来可以互换?

html semantics
12个回答
110
投票

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

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

绝对不可互换。


70
投票

在数学术语中(嘿,为什么不呢?),

<ol>
代表序列,而
<ul>
代表集合。重新排列有序列表中的项目会更改列表的含义。在无序列表中重新排列它们不会。

对于使用哪种类型的列表,这是一个很好的经验法则。如果更改项目的顺序导致列表不正确,您需要使用

<ol>
。如果顺序不重要,请使用
<ul>


52
投票

使用

<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>


28
投票

其中一个是有序列表(OL),它适用于具有明确且不同顺序的事物。他们组织起来是有原因的。

另一种(UL)是无序列表,它只是没有指定顺序的事物的集合。他们的组织很琐碎。


22
投票

哈哈,这么多答案!

当 HTML 第一次出现时,有 OLUL,正如所有其他发帖者所说,这意味着有序列表和无序列表。

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

UL 给了你子弹。 3种类型的子弹,偶数 - 圆盘(空心圆圈),正方形(实心正方形),圆形(实心圆圈)

没有CSS。除了这些属性之外,没有真正的方法来自定义列表格式(以及边距和缩进以及其他所有内容)。因此,这种区别很重要。

如今,全是 CSS。事实上,w3 的人希望你使用样式而不是你以前使用的 html“type”属性。因此,如果您是 CSS 新用户之一,使用 UL 与 OL 并不重要。

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

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


14
投票

OL:

  1. 列出第 1 项
  2. 列出第 2 项

UL:

  • 列出第 1 项
  • 列出第 2 项

OL 为有序列表,UL 为无序列表


9
投票

当问题问“何时使用它们”时,我认为提供何时合适的例子,当我想要一系列步骤时,我通常决定使用 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>

7
投票

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

有序列表应该是诸如指令或任何顺序信息之类的东西。

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


4
投票

当您列出需要按特定顺序完成的步骤时,请使用 OL。 当您不按特定重要性顺序列出项目时,请使用 UL。


3
投票

ul 表示无序列表。它适用于列表,其中列表项的顺序并不重要。

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

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


2
投票

ol = 表示有序列表。当您想要列出事物并对其进行编号时使用。 ul = 表示无序列表。当您想要列出但不想编号时使用。

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


1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.