菜单1

Question

我需要有关HTML中嵌套列表的一些指导。

我有一个我希望如下构建的布局。嵌套未被<li>包裹的元素是一件可怕的事吗？我很确定这是违反标准的，但不知道它有什么不良影响。

<ul>
  <li>
    <h1>header 1</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
  <li>
    <h1>header 2</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
</ul>

Answer 1

LI是唯一允许作为UL的子元素的元素。以下是UL element definition：

的摘录

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

和

两种类型的列表都由LI元素定义的列表项序列组成（可以省略其结束标记）。

Answer 2

<ul>或<ol>的所有直系孩子必须为<li>。同样，所有<li>的直接父级必须是<ul>或<ol>。

因此，示例中位于<li>之后的<h3>不应该在那里。但除此之外，您的示例看起来合规。

如果您的元素没有正确嵌套（违反上述任何规则），浏览器将如何呈现它没有标准，因此您在某些浏览器中大大增加了被破解的可能性。

Answer 3

如上所述，＆lt; li＆gt;是唯一可以在＆lt; ul＆gt;内的项目或者＆lt; ol＆gt;。但是，您的示例也需要清理：

<ul>
  <li>
    <h1>header 1</h1>
    <!-- removed unneeded LI -->
    <ul>
      <li>nested</li>
      <li>list</li>
    </ul>
    <!-- removed unneeded closing LI -->
  </li>
  <li>
    <h1>header 2</h1>
    <!-- removed unneeded LI -->
    <ul>
      <li>nested</li>
      <li>list</li>
    </ul>
    <!-- removed unneeded closing LI -->
  </li>
</ul>

Answer 4

是的，这是错的。它不是有效的HTML。

Answer 5

是的，它们是必需的，因为每个列表都是一个项目列表（这与语义HTML直接相关）

如果你想要列表之间的标题，你需要创建单独的标题之间的单独列表，如下所示：


<div class="menu">
    <h1>menu 1</h1>
    <ul>
        <li>menu 1.1</li>
        <li>menu 1.2</li>
    </ul>
    <h1>menu 2</h1>
    <ul>
        <li>menu 2.1</li>
        <li>menu 2.2</li>
    </ul>
</div>

这会导致这个：

菜单1

menuitem 1.1
menuitem 1.2

菜单2

menuitem 2.1
menuitem 2.2

然后关于嵌套列表的事情，嵌套列表是它所属的列表项的一部分。（已经多次看错了。）


<ul>
    <li>menuitem 1
        <ul>
            <li>menuitem 1.1</li>
            <li>menuitem 1.2</li>
        </ul>
    </li>
    <li>menuitem 2
        <ul>
            <li>menuitem 2.1</li>
            <li>menuitem 2.2</li>
        </ul>
    </li>
</ul>

menuitem 1
- menuitem 1.1
- menuitem 1.2
menuitem 2
- menuitem 2.1
- menuitem 2.2

您最好将其与目录和书中的相应章节进行比较。

Answer 6

如果您需要带有嵌套标题的列表元素，可以使用

<dl>
 <dt>header</dt>
 <dd>Item 1</dd>
 <dd>Item 2</dd>
</dl>

这很好，因为它保持代码清洁和语义。

只是一个想法。

<ul>中的所有内容都必须包含在<li>？</li> </ul>中

6 个答案:

菜单1

菜单2