W3文档有一个前缀为DEPRECATED example:的嵌套列表示例,但他们从未用一个非DEPRECATED示例来纠正它,也没有确切地解释这个示例的错误所在。
那么,下面哪种方法是编写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>
选项2是正确的:嵌套的<ul>是它所属的<li>的子元素。
如果您验证,选项1在html 5中出现错误——credit: user3272456
正确:<ul>作为<li>的子
制作HTML嵌套列表的正确方法是将嵌套的<ul>作为它所属的<li>的子元素。嵌套列表应该在它所嵌套的列表的<li>元素中。
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
嵌套列表的W3C标准
一个列表项可以包含另一个完整的列表——这被称为“嵌套”列表。它对于目录之类的东西很有用,比如本文开头的内容:
第一章
一个节
第二部分
第三节
第二章
第三章
嵌套列表的关键是要记住,嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点,嵌套列表包含在该列表项中。上面列表的代码看起来像这样:
<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>和包含列表项的文本之后开始的(“Chapter One”);然后在包含列表项的</li>之前结束。嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法。
理论上,您可以嵌套尽可能多的列表,尽管在实践中,嵌套列表太深可能会令人困惑。对于非常大的列表,最好将内容分成几个带有标题的列表,甚至将其分成单独的页面。
选项2是正确的:嵌套的<ul>是它所属的<li>的子元素。
如果您验证,选项1在html 5中出现错误——credit: user3272456
正确:<ul>作为<li>的子
制作HTML嵌套列表的正确方法是将嵌套的<ul>作为它所属的<li>的子元素。嵌套列表应该在它所嵌套的列表的<li>元素中。
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
嵌套列表的W3C标准
一个列表项可以包含另一个完整的列表——这被称为“嵌套”列表。它对于目录之类的东西很有用,比如本文开头的内容:
第一章
一个节
第二部分
第三节
第二章
第三章
嵌套列表的关键是要记住,嵌套列表应该与一个特定的列表项相关。为了在代码中反映这一点,嵌套列表包含在该列表项中。上面列表的代码看起来像这样:
<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>和包含列表项的文本之后开始的(“Chapter One”);然后在包含列表项的</li>之前结束。嵌套列表通常构成网站导航菜单的基础,因为它们是定义网站层次结构的好方法。
理论上,您可以嵌套尽可能多的列表,尽管在实践中,嵌套列表太深可能会令人困惑。对于非常大的列表,最好将内容分成几个带有标题的列表,甚至将其分成单独的页面。