1)内联元素通常不能包含其他块元素(例如:< span>或< a>不应包含任何< div> ;.)但是这条规则更宽容,因为大多数浏览器不会改变HTML结构类似于下面的规则2. (现在很多浏览器都会处理< div>位于< a>标记内的所需结果.)
2)< p>元素不能包含任何< p>元件.如果有的话< p>在关闭前一个< p>之前出现元素,然后前一个将立即关闭.这条规则似乎更严格,因为它改变了HTML文档的结构.
上面的规则是否准确,是否有其他规则说明元素不能包含其他元素? (作为后代).
解决方法
我不打算浏览每个单独的元素,但如果你需要查看一些内容,请参考:
http://www.w3.org/TR/html5-author/
谈论“内容模型”的部分
a description of the element’s expected contents
在这里:http://www.w3.org/TR/html5-author/content-models.html
您可以在规范中查看特定元素的一些示例:
http://www.w3.org/TR/html5-author/the-html-element.html#the-html-element(html元素):
A
head
element followed by abody
element.
具体例子
> http://www.w3.org/TR/html5-author/the-a-element.html#the-a-element
> http://www.w3.org/TR/html5-author/the-span-element.html#the-span-element
> http://www.w3.org/TR/html5-author/the-br-element.html#the-br-element
一个
我们从第一个链接(在元素上)学习其内容模型是Transparent,但仅在没有Interactive Content后代的情况下.
通过查看“透明”的定义,我们看到a从其父级继承其内容模型.这意味着您的初始定义不正确,并且确实可以包含div,但仅限于其父级可以.上面的文档甚至包括嵌套的“透明”内容模型元素的示例.
由于a不能包含任何“Interactive Content”模型元素,因此根本不能包含按钮元素.这是有道理的,因为哪个元素主动响应点击会产生冲突.
跨度
当我们看一下第二个链接span时,我们看到它的内容模型是“Phrasing Content”,它基本上是段落级文本的文本和标记.该定义并不完全具体,但确实包括一个指导原则:
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content,not any flow content.
由于div没有“Phrasing Content”模型(它的“Flow Content”),因此span不能包含它.这意味着跨度应遵循上述规则,并且仅包含任何其他“Phrasing Content”元素和/或嵌入内容或Text.如果上述规则被破坏,它将特别列在元素的“内容模型”描述中(请记住关于“交互式内容”的元素的特殊规则.)span没有.
BR
第三个链接br表示内容模型是“空的”.不幸的是,W3C没有包含特定的定义,但我认为这很明显:它根本不包含任何后代.甚至不是文本节点.任何“空”内容模型元素都没有结束标记(您可以将其写为< br>而不是< br>< / br>).
你的问题
上述规则是否准确?
第一条规则(内联与阻止)
你所说的是误导. HTML没有内联与块元素的概念.这些是CSS样式.大多数浏览器都将元素的显示样式的默认设置设置为内联或块,具体取决于它是分别是“Phrasing”还是“Flow”内容模型(作为一般规则;没有什么是硬性和快速的)或传统上.
如果你想说“Phrasing Content”元素不能包含“Flow Content”元素那么你就是正确的,因为那是具体的规范.这实际上也可以,因为span不能包含div(如您所示).
但是,说a不应该包含任何div是错误的. a只要父母可以,就可以包括div.如果a包含在span中,则它不能包含div.但是,如果a包含在正文或其他div中,则可以.
至于浏览器“宽容”,对于那些不能花时间创建有效HTML的开发人员来说,这一切都非常方便,但对于我们这些想要花时间的人来说,这可能是一种痛苦.浏览器通常不会像你说的那样改变“HTML结构” – 它们改变的是DOM.此外,Web供应商规范的节点与我上面发布的“Web作者”规范略有不同,但我们是作者.
第二条规则(p包含p)
这是真的,因为我遗漏了一个重点:上下文.
Contexts in which this element can be used:
Where flow content is expected.
由于p是“Phrasing Content”,这意味着另一个p不能放在p内,因为“Phrasing Content”是预期的,而不是“Flow Content”.
还有其他规定吗?
HTML5规范有很多元素,所以我不能在这里详细介绍所有这些细节.我详细介绍了跨度和内容与div以及p,因为你特意提到了这些.看看这个答案有多长!
您需要做的是查看您在规范中遇到的任何问题.查看Context和Content Model部分,了解您对元素的使用是否有效.
综上所述
如果您对元素的工作方式有疑问,请参阅规范.要回答有关如何使用元素的问题(关于其容器和内容),请查看:
>可以使用此元素的上下文:
>内容模型:
这告诉您什么可以包含元素,它可以包含什么,以及何时.
如果您对HTML是否有效有疑问,可以随时使用非常好的W3C标记验证服务:
如果您使用的是Chrome,则可以查看Chrome Inspector(F12)并将输出DOM与源HTML本身进行比较.例如,您会注意到Chrome会在生成DOM时自动关闭嵌套的p标记.