针对不同场景的列表中的 HTML 列表

Question

大家好，我现在正在考虑如何布局店面。

我非常喜欢使用列表，因为从语义上讲，我向用户呈现一个项目列表。然而，我想显示的每个项目的详细信息在语义上也是一个列表。

这是两种不同的场景：

对于缩进项目符号，我通常会这样做：

<ul>
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <ul>
        <li>Indented Bullet 1</li>
        <li>Indented Bullet 1</li>
    </ul>
</ul>

但是对于上面提到的产品列表，它会更像这样：

<ul>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

所以...我的问题是，哪种方式是在列表中使用列表的正确方法？两种方法都对，还是只有一种方法对？如果是的话，是哪个以及为什么？

Answer 1

只有第二种方法有效。只有 li 元素可以是 ul（和 ol）元素的子元素。

查看 DTD^[docs] ：

另一方面， li 元素可以包含所有 <代码>块^[文档]和内联^[docs]元素：

(%flow;<的定义super>[文档])

Answer 2

只有第二种方法是正确的。 ul 元素中允许的唯一元素是 li 元素。这可以在标准中看到，例如在规范 DTD。

Answer 3

我总是在

中使用

，如下所示：

• something

  • 里面

Answer 4

第一个是不正确的——你不能这样做。 UL 只能将 li 作为子代。
你必须使用这个模板：

<ul>
  <li>---almost everything---</li>
</ul>

所以第二个就可以了:)

Answer 5

我同意从语法上讲，第二个代码片段是正确的。由于您也对语义感兴趣（这很棒！）我想知道以下内容是否可能不是一个改进：

<ul>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

我不是语义标记方面的专家，但我完全支持其背后的想法，所以我会对其他内容感兴趣' 选项。

Answer 6

两个代码集都有效。我刚刚编译了它们以及它们的替代语法。输出是相同的。语法上的区别在于 /li 的放置位置，但这并不重要。我按照第一个例子来写。我很惊讶第二个例子起作用了，但它确实起作用了。我 30 年前学习了 Pascal 语言编程，这可能影响了我看待嵌套语句模式的方式。

在环顾四周看看其他人在做什么时，我刚刚学到了一些新东西——描述列表。

<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl> 

http://www.w3schools.com/html/html_lists.asp