[英]when to use UL or OL in html?
好像可以互换?
UL 的意思是“无序列表”。 OL 的意思是“有序列表”。
UL 为您提供要点。 OL 为您提供数字。
绝对不能互换。
在数学术语中(嘿,为什么不呢?), <ol>
代表一个序列,而<ul>
代表一个集合。 重新排列有序列表中的项目会更改列表的含义。 将它们重新排列在无序列表中不会。
这是使用哪种类型的列表的一个很好的经验法则。 如果更改项目的顺序使列表不正确,您需要使用<ol>
。 如果顺序无关紧要,请使用<ul>
。
使用<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>
一种是有序列表(OL),它用于具有定义和不同顺序的事物。 它们被组织起来是有原因的。
另一个(UL)是无序列表,它只是没有指定顺序的事物的集合。 他们的组织是微不足道的。
哈哈,这么多答案!
当 HTML 首次出现时,有OL和UL ,正如所有其他海报所说,这意味着有序列表和无序列表。
区别很简单。 OLs 显示......他们旁边的一个数字。 或罗马数字,或字母! 您甚至可以控制它是使用大写符号还是小写! 凉爽的!
UL 给了你子弹。 3 种类型的子弹,甚至 - 圆盘(空心圆)、正方形(实心正方形)、圆形(实心圆)。
没有 CSS。 除了这些属性之外,并没有真正自定义列表格式(以及边距和缩进以及其他所有内容)的方法。因此,这种区别很重要。
如今,它的所有CSS。 事实上,w3 人希望您使用样式而不是您过去使用的 html“类型”属性。 因此,使用 UL 与 OL 并不重要,如果您是其中一位新奇的 CSS 用户。
CSS 允许您更改项目符号类型,或选择使用图像,或更改边距/样式/缩进,甚至根本不显示项目符号。
再次编辑:这个答案并不是真的要解决 UL 与 OL 的语义优点。 但从技术上讲(你知道,在位和字节)上面概述了行为的差异。
OL:
UL:
OL 是有序列表,UL 是无序列表
当问题询问“何时使用它们”时,我认为提供何时使用的示例是合适的,当我想要一系列步骤时,我通常决定使用 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>
我认为这是一个语义问题,因为编号/项目符号点可以通过 CSS 更改。
有序列表应该是诸如指令或任何顺序信息之类的东西。
无序列表应该是其他一切。
当您列出需要按特定顺序完成的步骤时,请使用 OL。 当您没有按特定的重要性顺序列出项目时,请使用 UL。
ul 表示无序列表。 它适用于列表,列表项的顺序无关紧要。
ol 表示有序列表。 它用于编号或以某种方式显示它们具有特定顺序的列表。
默认情况下 ul 为您提供项目符号列表和 ol 编号列表,尽管这可以在 css 中进行编辑。
在某些情况下(屏幕阅读器专门为有特殊需要的人使用),由于视觉设计,您可能希望有有序列表但没有与它们相关联的数字。 前任。 当您在页面上说填写表单的说明并希望屏幕阅读器利用说明中的订购项目时,它将很有用。 对于所有视觉目的,它们可以通过 CSS 看起来完全相同。 这是(非视觉的,但对屏幕阅读器有帮助)语义是不同的,有时是有用的。
http://techuap.com/category/tips/computer-programming-tips
列出需要按特定顺序执行的步骤时,请使用OL。 当您列出没有特定重要性顺序的项目时,请使用UL。 默认情况下,ul会为您提供项目符号列表和ol编号列表,但这可以在css中进行编辑。 谢谢 ..
ol = 表示有序列表。 当您要列出和编号事物时使用。 ul = 表示无序列表。 当您想列出但不编号时使用。
我认为 OL 应该被称为 NL = 编号列表。 为什么? 因为 UL 也可以有订单但没有编号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.