UL 中是否允许除 LI 之外的任何内容？答案

【问题标题】：Is anything except LI's allowed in a UL?UL 中是否允许除 LI 之外的任何内容？
【发布时间】：2011-08-28 16:58:52
【问题描述】：

我们的设计师收到了一些可疑的 HTML。以下内容有效吗？（注意UL里面的UL）

<ul>
    <li>1</li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
    <li>2</li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</ul>

【问题讨论】：

Can we use any other TAG inside <ul> along with <li>?的可能重复

标签： html

【解决方案1】：

它不仅无效，而且<li>1</li> 也不是必需的。为什么不：

<ol>
  <li>&nbsp; <!--if no content, some browsers render nested li on same line-->
    <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
    </ul>
  </li>
  <li>&nbsp;
    <ul>
      <li>1.1</li>
      <li>1.2</li>
      <li>1.3</li>
    </ul>
  </li>
</ol>

【讨论】：

【解决方案2】：

根据HTML 4 specs、XHTML 2 specs和HTML 5 specs，该代码无效。

HTML 4

UL - - (LI)+

这意味着在<ul> 内只能有多个<li> 元素。

XHTML

两种类型的列表 (ul|ol) 都由 li 元素定义的列表项序列组成。

HTML 5

内容模型：
零个或多个 li 和 script-supporting 元素。

请注意，支持脚本的元素是未呈现的元素，目前仅包括 <script> 和 <template>。

【讨论】：

【解决方案3】：

这确实是无效的；大概意思是：

<ul>
  <li>1
    <ul>
    <!-- ... -->
    </ul>
  </li>
</ul>

另外，你的设计师在写 HTML 做什么？

【讨论】：

通常在前端工作的开发人员被称为设计师。她实际上可能并不是说她的平面设计师正在编写代码，而不是他们不应该编写代码，HTML 并不难学。

【解决方案4】：

您应该在 W3C 站点上搜索 HTML 标准信息。对于列表元素，您可以在此处找到：http://www.w3.org/wiki/HTML/Elements/ul。它说 ul 应该只包含 li 元素。在你的代码中嵌套的 ul 应该放在 li 里面。

【讨论】：

【解决方案5】：

无效。我刚刚检查了validator.w3.org

这是错误

第 6 行，第 8 列：文档类型此处不允许元素“ul”；假设缺少“li”开始标签

【讨论】：

【解决方案6】：

这是无效的。要创建嵌套列表，您必须将 ul 标签放在 li 标签内：

<ul>
<li>1</li>
<li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</li>
<li>2</li>
<li>
    <ul>    
        <li>1.1</li>
        <li>1.2</li>
        <li>1.3</li>
    </ul>
</li>

【讨论】：

【解决方案7】：

不，它无效。 ul 中唯一允许的元素是 li。

修正样本：

<ul>
    <li>
        <span>1</span>
        <ul>    
            <li>1.1</li>
            <li>1.2</li>
            <li>1.3</li>
        </ul>
    </li>
    <li>
        <span>2</span>
        <ul>    
            <li>1.1</li>
            <li>1.2</li>
            <li>1.3</li>
        </ul>
    </li>
</ul>

不要让您的设计师为您编写任何 HTML 代码。聘请真正知道如何处理 HTML 和 XHTML 的前端开发人员。

【讨论】：