0

大家好，我目前正在决定如何布置店面。

我非常喜欢使用列表，因为从语义上讲，我向用户展示了一个项目列表。然而，我想展示的每个项目的细节在语义上也是一个列表。

这里有两种不同的场景：

对于缩进的子弹，我通常会这样做：

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

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

4

6 回答 6

2

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

看看DTD [文档]：

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

li另一方面，元素可以包含所有block[docs]和inline[docs]元素：

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

（[文档]的定义%flow;）

于 2011-03-07T17:03:21.443 回答
0

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

于 2011-03-07T17:05:10.943 回答
0

我总是使用这样的<ul>内部<li>：<ul><li>something<ul><li>inside</li><ul></li></ul>

于 2011-03-07T17:05:37.463 回答
0

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

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

所以第二个没问题:)

于 2011-03-07T17:06:09.190 回答
0

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

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

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

于 2011-03-07T17:24:43.283 回答
0

两个代码集都有效。我刚刚编译了它们以及它们的替代语法。输出是相同的。语法的区别在于 /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

于 2016-08-11T08:34:47.030 回答