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
HTML5 standards of nesting div in li or dl
提问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 - div
elements are regarded flow content
and are very well allowed inside li
elements. You might have confused it with ul
/ol
elements, which may only contain li
s accordingly.
此信息是不正确的 -div
元素被视为元素flow content
并且在元素中被很好地允许li
。您可能将它与ul
/ol
元素混淆,后者可能只包含相应的li
s。
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. ul
and ol
are the "container" elements that only hold list item (li
)as child elements - no other elements are allowed*. The li
element itself can contain arbitrary flow content.
* (technically they are also allowed to hold "script-supporting" elements
有几种类型的列表 - 最常见的是无序 ( ul
)和 有序 ( ol
)列表。ul
和ol
是“容器”元素,仅将列表项 ( 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 dt
and dd
, but recent changes allow div
child elements as well, as long as those div
s themselves contain a dt
or dd
.
对于描述列表 ( dl
)曾经有相同的限制,即它们只能包含各自的子元素dt
and dd
,但最近的更改也允许div
子元素,只要这些div
s 本身包含 a dt
ordd
。
<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 元素。