制作 HTML 嵌套列表的正确方法？

Question

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>

Answer 1

选项2是正确的。

嵌套列表应位于嵌套列表的 <li>

 元素

内。

链接到有关列表的 MDN 文章（摘自下面的评论）：

HTML 列表。

链接到 HTML5 W3C

ul

 规范：

HTML5 ul。

请注意，一个

ul

 元素可能恰好包含零个或多个 

li

 元素。这同样适用于 

HTML5 ol。

描述列表 (

HTML5 dl

) 类似，但允许同时使用 dt

 和 

dd

 元素。

更多注意事项：

• dl

   = 定义列表。

• ol

   = 有序列表（数字）。

• ul

   = 无序列表（项目符号）。

嵌套列表上的

---

MDN 链接。

Answer 2

选项2

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

嵌套列表 - UL

Answer 3

选项 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. 第一节
   第二部分
   第三节
第二章
第三章

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

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

 之前结束。嵌套列表通常构成网站导航菜单的基础，因为它们是定义网站层次结构的好方法。

理论上，您可以嵌套任意数量的列表，尽管在实践中，嵌套列表太深可能会变得混乱。对于非常大的列表，您可能最好将内容拆分为多个带有标题的列表，甚至将其拆分为单独的页面。

Answer 4

如果您验证，选项 1 在 html 5 中显示为错误，因此选项 2 是正确的。

Answer 5

我更喜欢选项二，因为它清楚地将列表项显示为该嵌套列表的所有者。我总是倾向于语义上合理的 HTML。

Answer 6

您是否考虑过使用标签“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>

Answer 7

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

如果您控制内容/CSS，这应该不重要，但如果您正在制作富文本编辑器，它会派上用场。

例如，gmail、inbox 和 Evernote 都允许创建如下列表：

使用选项 2 你不能这样做（你将有一个额外的列表项），使用选项 1，你可以。