正确的方法使HTML嵌套列表?

W3文档中有一个嵌套列表示例前缀为DEPRECATED EXAMPLE:，但是他们从来没有用一个不被弃用的例子来纠正它，也没有解释这个例子到底出了什么问题。

那么，下面哪种方法是编写HTML列表的正确方法呢?

选项1:嵌套的<ul>是父元素<ul>的子元素

<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>

选项2:嵌套的<ul>是它所属的<li>的子元素

<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
421656 次浏览
小开
最佳答案

选项2是正确的。

嵌套列表应该是它所嵌套的列表的在<li>元素中。

链接到W3C Wiki on Lists(摘自下面的评论):HTML列表Wiki。

链接到HTML5 W3C ul规范:HTML5 ul。注意，ul元素可以包含0个或多个li元素。同样适用于HTML5 ol。 描述列表(HTML5 dl)类似， 但同时允许dt和dd元素

更多的笔记:

  • dl =定义列表。
  • ol =有序列表(数字)。
  • ul =无序列表(项目)。

官方W3C链接(已更新)。

小开

选项2

<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>

# EYZ0

小开

我更喜欢选项二，因为它清楚地显示列表项是嵌套列表的所有人。我总是倾向于语义健全的HTML。

小开

如果验证，选项1在html 5中出现错误，因此选项2是正确的。

小开

您是否考虑过使用TAG“dt”而不是“ul”来嵌套列表?它的继承样式和结构允许你有一个标题每个部分，它自动制表的内容，进入。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

VS

<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
小开

选项2是正确的:嵌套的<ul>是它所属的<li>的子元素。

如果你验证，选项1出现在html 5错误——信用:user3272456

正确:<ul>作为<li>的子

制作HTML嵌套列表的正确方法是将嵌套的<ul>作为它所属的<li>的子元素。嵌套列表应该在它所嵌套的列表的<li>元素内部。

<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>

嵌套列表的W3C标准

一个列表项可以包含另一个完整的列表——这被称为“嵌套”列表。它对于目录之类的东西很有用，比如本文开头的内容:

    <李>一章
    1. 一个节
    2. 第二部分
    3. 第三节
      4. 李< / ol > < / >
    4. 第二章
    5. 第三章

嵌套列表的关键是要记住，嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点，嵌套列表包含在该列表项中。上面列表的代码看起来像这样:

<ol>
<li>Chapter One
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three  </li>
</ol>

注意嵌套列表是如何在<li>和包含列表项的文本之后开始的(“第一章”);然后在包含列表项的</li>之前结束。嵌套列表通常构成网站导航菜单的基础，因为它们是定义网站层次结构的好方法。

理论上，您可以嵌套尽可能多的列表，尽管在实践中，嵌套列表太深可能会令人困惑。对于非常大的列表，最好将内容分成几个带有标题的列表，甚至将其分成单独的页面。

小开

这里没有提到的是选项1允许任意深度嵌套列表。

如果你控制的是content/css，这应该无关紧要，但如果你正在制作一个富文本编辑器，它就会派上用场。

例如，gmail, inbox和evernote都允许创建这样的列表:

任意嵌套列表

选项2不能这样做(你会有一个额外的列表项)，而选项1可以。


提交答案