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

html HTML

老丝蛋蛋

2020-03-19

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>

第2357篇《制作HTML嵌套列表的正确方法?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
猿西门Tom 2020.03.19

选项2

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

嵌套列表-UL

武藏 2020.03.19

Option 2 is correct: The nested <ul> is a child of the <li> it belongs in.

If you validate, option 1 comes up as an error in html 5 -- credit: user3272456


Correct: <ul> as child of <li>

The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.

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

W3C Standard for Nesting Lists

A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article:

  1. Chapter One
    1. Section One
    2. 第二节
    3. 第三节
  2. 第二章
  3. 第三章

嵌套列表的关键是要记住,嵌套列表应与一个特定的列表项相关。为了在代码中反映出来,嵌套列表包含在该列表项中。上面列表的代码如下所示:

<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>在包含列表项的之前结束嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法。

从理论上讲,您可以根据需要嵌套任意数量的列表,尽管在实践中,过于嵌套的列表可能会造成混乱。对于非常大的列表,最好将内容分成多个带有标题的列表,甚至将其分成单独的页面。

西里小卤蛋 2020.03.19

您是否考虑过将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>
米亚伽罗村村 2020.03.19

我更喜欢第二种选择,因为它可以清楚地将列表项显示为该嵌套列表的拥有者。我将始终倾向于语义上合理的HTML。

宝儿梅路易 2020.03.19

选项2是正确的。

嵌套列表应位于<li>嵌套列表元素

链接到列表上的W3C Wiki(摘自以下评论):HTML Lists Wiki

链接到HTML5 W3C ul规范:HTML5ul请注意,一个ul元素可能恰好包含零个或多个li元素。这同样适用于HTML5ol描述列表(HTML5dl)相似,但允许dtdd元素。

更多说明:

  • dl =定义列表。
  • ol =有序列表(数字)。
  • ul =无序列表(项目符号)。
乐米亚 2020.03.19

如果您验证,则选项1作为html 5中的错误出现,因此选项2是正确的。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android