Question

我正在维护一个遗留应用，并遇到了以下代码：

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <div>
      <li>...</li>
      <li>...</li>
   </div>
</ul>

我以前从未将div标记视为ul元素的子元素。 HTML在浏览器中渲染得很好。

这是有效的HTML吗？我的直觉是，这是一种奇怪的用法。但是，也许这是完全正常和有效的？是否将div元素嵌套在ul元素中适当的用法？你会建议支持还是反对这个？

Answer 1

它在任何版本的HTML中都无效，请参阅例如HTML 4.01 on ul

浏览器允许它，并解析它以使div成为ul的孩子，并且他们也允许你设置div的样式。这可能是使用此标记的原因。

Answer 2

HTML unordered list element（<ul>）表示无序的项目列表，即没有数字排序的项目集合，它们在列表中的顺序毫无意义。通常，无序列表项目使用子弹显示，子弹可以是几种形式，如点，圆或平方。子弹样式未在页面的HTML描述中定义，而是在其关联的CSS中使用list-style-type属性定义。

允许的内容

零个或多个<li>元素，最终与<ol>和<ul>元素混合。

使用示例：

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

您可以在<div>标记内使用<li>，如下所示：

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>
      third item
      <div>Third Item Contente</div>
  </li>
</ul>

Answer 3

您可以使用http://validator.w3.org/进行检查错误：
1.document类型不允许元素“DIV”在这里;假设缺少“LI”开始标记
2.document类型不允许元素“LI”在这里;缺少“UL”，“OL”开始标记

之一

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.  

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

允许的子元素为ul

3 个答案: