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

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 UL - - (LI)+                 -- unordered list -->

和:

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

Answer 2

一个<ul>或一个的所有直系孩子都<ol>必须是<li>s.同样,所有<li>s 的直接父母必须是a <ul>或an <ol>.

所以,<li>你的例子中<h3>s 之后的s不应该在那里.但除此之外,您的示例看起来合规.

如果你的元素没有正确嵌套(违反上述任何规则),那么浏览器将如何呈现它就没有标准,因此你在某些浏览器中大大增加了被破坏的可能性.

Answer 3

正如上面的人提到的那样<li>是唯一可以在<ul>或<ol>中的项目.但是,您的示例也需要清理:

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