Html ul 的允许子元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12242041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:36:40  来源:igfitidea点击:

Allowed child elements of ul

html

提问by GiddyUpHorsey

I'm maintaining a legacy app and came across the following code:

我正在维护一个遗留应用程序并遇到以下代码:

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

I've never seen divtags as child elements of ulelements before. The HTML renders fine in browsers.

我以前从未将div标签视为元素的子元素ul。HTML 在浏览器中呈现良好。

Is this valid HTML? My gut feeling is that this is strange usage. However, perhaps this is completely normal and valid? Is nesting a divelement inside a ulelement appropriate usage? Would you recommend for or against this?

这是有效的 HTML 吗?我的直觉是,这是一种奇怪的用法。然而,也许这完全正常且有效?在div元素内嵌套元素是否ul合适?你会推荐还是反对这个?

采纳答案by Jukka K. Korpela

It is not valid in any version of HTML, see e.g. HTML 4.01 on ul.

它在任何版本的 HTML 中都无效,例如参见 上的HTML 4.01ul

Browsers allow it, though, and parse it so that divbecomes a child of ul, and they let you style the divtoo. This is probably the reason why this markup has been used.

但是,浏览器允许它,并解析它以便div成为 的子项ul,并且它们也让您设置样式div。这可能是使用此标记的原因。

回答by Ahsan Khurshid

The HTML unordered list element(<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

HTML无序列表元素( <ul>) 表示项目的无序列表,即没有数字排序的项目的集合,它们在列表中的顺序是没有意义的。通常,无序列表项目用项目符号显示,项目符号可以有多种形式,如点、圆形或正方形。项目符号样式不是在页面的 HTML 描述中定义的,而是在其关联的 CSS 中使用 list-style-type 属性定义的。

Permitted content

允许的内容

zero or more <li>elements, eventually mixed with <ol>and <ul>elements.

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

Example Usage:

示例用法:

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

You may use<div>inside <li>tag like this:

您可以像这样使用<div>内部<li>标签:

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

回答by Snger

You can use http://validator.w3.org/to check it.
Errors:
1.document type does not allow element "DIV" here; assuming missing "LI" start-tag
2.document type does not allow element "LI" here; missing one of "UL", "OL" start-tag

您可以使用http://validator.w3.org/进行检查。
错误:
1.document type 不允许这里有元素“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>").