Html 在 li 或 dl 中嵌套 div 的 HTML5 标准

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18268907/
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 12:14:37  来源:igfitidea点击:

HTML5 standards of nesting div in li or dl

html

提问by sodiumnitrate

I know that it is not allowed to nest div in li in HTML5, although you can and it works. Does that mean I shoudn't use it? What is the standard about nesting divs in dls?

我知道在 HTML5 中不允许将 div 嵌套在 li 中,尽管您可以并且它可以工作。这是否意味着我不应该使用它?在dls中嵌套div的标准是什么?

回答by Christoph

This information is incorrect - divelements are regarded flow contentand are very well allowed inside lielements. You might have confused it with ul/olelements, which may only contain lis accordingly.

此信息是不正确的 -div元素被视为元素flow content并且在元素中被很好地允许li。您可能将它与ul/ol元素混淆,后者可能只包含相应的lis。

What has changed in HTML5 is, that it does not have block-level and inline elements anymore. Instead there is a more complex distinction of the elements into several categories.

HTML5 的变化是,它不再有块级和内联元素。取而代之的是将元素更复杂地分为几个类别

To see what is allowed inside an element according to HTML5, see the description of the specific tag where the section "Content model"tells you which content is allowed inside this particular element.

要根据 HTML5 查看元素中允许的内容,请参阅特定标记的描述,其中“内容模型”部分告诉您该特定元素中允许哪些内容。

EDIT: addressing the confusion in the comments about list elements

编辑:解决关于列表元素的评论中的混淆

(according to HTML living standard as of 2019-07-30)

(根据HTML生活标准截至2019-07-30)

There are several types of lists - the most common ones are unordered (ul), and ordered (ol)lists. uland olare the "container" elements that only hold list item (li)as child elements - no other elements are allowed*. The lielement itself can contain arbitrary flow content.
* (technically they are also allowed to hold "script-supporting" elements

有几种类型的列表 - 最常见的是无序 ( ul)有序 ( ol)列表。ulol是“容器”元素,仅将列表项 ( li)作为子元素保存 - 不允许其他元素*。该li元件本身可以包含任意流内容
*(从技术上讲,它们也可以包含“支持脚本”的元素

<ol>
   <li></li>
   ...more li elements
</ol>

<ul>
   <li></li>
   ...more li elements
</ul>

For description lists (dl)there used to be the same restriction that they can only contain their respective child elements dtand dd, but recent changes allow divchild elements as well, as long as those divs themselves contain a dtor dd.

对于描述列表 ( dl)曾经有相同的限制,即它们只能包含各自的子元素dtand dd,但最近的更改也允许div子元素,只要这些divs 本身包含 a dtordd

<dl>
  <dt>term</dt><dd>description</dd>
</dl>

// the following is now valid as well:

<dl>
  <div><dt>term</dt><dd>description</dd></div>
</dl>

As a mnemonic: Container elements should only contain their respective child elements and those child elements can contain any content you like.

作为助记符:容器元素应该只包含它们各自的子元素,这些子元素可以包含你喜欢的任何内容。

回答by deceze

It isperfectly allowed to nest <div>elements in <li>and <dd>elements. <li>/<dd>elements may contain flow content, which <div>elements are.

完全允许巢<div>中的元素<li><dd>元素。<li>/<dd>元素可能包含流内容,哪些<div>元素是。

Specification: http://www.w3.org/TR/html5/grouping-content.html#the-li-element

规范:http: //www.w3.org/TR/html5/grouping-content.html#the-li-element

回答by maxandcoffee

Since I had the same question as the second question: What is the standard about nesting divs in dls? I will answer here:

因为我和第二个问题有同样的问题:在 dls 中嵌套 div 的标准是什么?我会在这里回答:

According to the HTML5 (https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element),

根据 HTML5 ( https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element),

"The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name."

“dl 元素表示一个由零个或多个名称-值组(一个描述列表)组成的关联列表。一个名称-值组由一个或多个名称(dt 元素,可能作为 div 元素子元素的子元素)组成,后跟一个或更多值(dd 元素,可能作为 div 元素子元素的子元素),忽略除 dt 和 dd 元素子元素之外的任何节点,以及作为 div 元素子元素的子元素的 dt 和 dd 元素。在单个 dl 元素中,不应有每个名称有多个 dt 元素。”

There is even an example of nesting divs inside the dl that wraps the dt and dd elements.

甚至还有一个在 dl 内嵌套 div 的示例,该 dl 包装了 dt 和 dd 元素。