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

<!ELEMENT UL - - (LI)+                 -- unordered list -->

另一方面，

li元素可以包含所有block^[docs]和inline^[docs]元素：

<!ELEMENT LI - O (%flow;)*             -- list item -->

（definition of %flow;^[docs]）

Answer 2

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

Answer 3

我总是在<ul>内使用<li>，如下所示：<ul><li>something<ul><li>inside</li><ul></li></ul>

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

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

6 个答案: