Question

我知道这个问题已经通过各种方式特别是在“导航”中被问到了

但是我一直浏览网页，其中“ li”是“ section”或“ article”的子元素，而没有前面的“ ul”或“ ol”父元素。这通常在段落中完成。这是“正确”的方法吗？如果是这样，省略“ ol”和“ ul”还可以接受其他什么元素。

“部分” “李” lorem epsom carpe julgulerum '/ li'

（我知道“正确”可能值得商bat，尤其是在考虑屏幕阅读器的情况下）

谢谢。

Answer 1

根据Mozilla Developer Network page：

HTML <li>元素用于表示列表中的项目。它必须包含在父元素中：有序列表（<ol>），无序列表（<ul>）或菜单（<menu>）。

是的，您需要在列表或菜单中嵌套任何<li>元素。但是，<li>元素内部可能几乎包含所有其他元素。同样可以，<article>内可以包含<section>或<li>。

Answer 2

我不认为它像MDN那样切割和干燥。根据{{3}}：

可以使用此元素的上下文：

内部ol元素。

内部ul元素。

内部菜单元素。

但是稍后再说：

li元素表示一个列表项。如果其父元素是ol， ul或menu元素，则该元素是父项的一项元素列表，为这些元素定义。否则，列表该项目与任何其他li元素都没有定义的列表相关关系。

似乎暗示在这些元素之一中不包含li是合法的。

看看Chrome中的用户代理样式表，似乎所有“列表样式”都包含在父元素中：

ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

而li只是具有display:list-item组件的项目：

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

因此，如果您需要显示li的项目，则在列表之外使用list-item似乎是合法的。这在列表之外的有用性尚有待商debate。

您的另一个问题：

'li'是'section'或'article'的父代。它是否正确”？

是的<li>可以包含任何其他HTML。就像其他容器一样。

Answer 3

li元素直接嵌套在section，article甚至nav元素中的页面显然具有错误的标记。 WHATWG和W3C（published和upcoming版本）均声明li元素只能在列表元素的上下文中使用（ol或ul，WHATWG标准还添加了menu选项，而W3C标准不再包含menu元素）。没有其他上下文可以使用此元素。

但是，由于HTML标准被设计为具有抗错误和弹性的功能，因此它也具有浏览器如何处理错误标记的规则。这就是为什么li元素的定义包含（而不是令人困惑的）“其他”部分的原因，该部分描述了浏览器在无法的上下文中遇到此元素时应采取的措施。使用。具有这种不正确标记的页面仍将可显示并且大部分都可以正常工作，但它的访问性不如具有正确标记的页面（例如，屏幕阅读器将无法宣布存在该列表以及其中包含多少项）。

包含ul元素的ol和li元素可以包含在任何section元素中（并且通常包含在content model为"Flow content"的任何元素中）。 li元素本身在技术上可以包含任何“流内容”（包括节和标题），但是W3C标准对此有以下说明：

尽管它符合在li元素内包含标题元素（例如h2和Sectioning content），但它可能无法传达作者想要的语义。标题开始新的部分，因此列表中的标题隐式将列表分成多个部分。分节内容显式创建了一个新节，因此将列表分为多个节。

因此，如果您的列表项中有不同的章节/文章，建议您测试此页面的可访问性，以确保屏幕阅读器呈现信息的方式与作者的意图相符。

Answer 4

如果仅使用 li 标签而不嵌套在 ul 标签或 ol 标签内，则呈现的结果将是无序列表，其前有项目符号图标 li 标签。这不是标准格式，尽管它提供与嵌套在 ol 标记或 ul 标记中的嵌套使用相同的输出。

<li>是否总是需要嵌套在<ul>和<ol>之间？不是<nav>

4 个答案: