<span>标签内可以包含任何类型的标签吗？

Question

像 <div>, <form>, <pre> 这样的标签可以放在 <span> 标签内吗？

- Alex

---

似乎是一个无效链接。 - ᴇʟᴇvᴀтᴇ

@aetheria：给你（非常酷的图形，我下载到了我的电脑上:P） - Alex

@Alex：感谢你上传那个。 - ᴇʟᴇvᴀтᴇ

Answer 1

span元素是内联元素，应该只包含其他内联元素而不包含块级元素。

从规范来看：

一般来说，块级元素可以包含内联元素和其他块级元素。一般来说，内联元素只能包含数据和其他内联元素。这种结构上的区别意味着块级元素创建的结构比内联元素更“大”。

通用的块级分组元素是div。通用的内联分组元素是span。

同样地，在规范中：

DIV和SPAN元素与id和class属性结合使用，提供了一种为文档添加结构的通用机制。这些元素定义内容为内联（SPAN）或块级（DIV），但对内容没有其他表现形式的成见。

- Wayne

---

请注意，这里的关键词是“应该”。如果您将DIV或任何其他块级元素放入SPAN中，除非您真的关心是否符合规范要求，否则不会发生任何问题。 - user578895

@cwolves 但是你为什么要把一个块级元素放在内联级元素中呢？这只会是个坏主意。 - Šime Vidas

虽然它不会被验证，但你可以使用正确的CSS规则使内联元素表现得像块级元素；例如span{display:block}。 - Burak Erdem

@Šime Vidas 通常来说不会这样做，但是如果你不在意验证，并且在 span 上设置 display: block，它就变成了另一个 div。那么你可以使用它来进行过滤。 :) - user578895

是的，没错。如果您将SPAN变成块级元素，实际上就相当于又创建了一个DIV。但是，我不建议这样做。 - Šime Vidas

@Adám 没有许可证 :). 不过它已经过时了。HTML5允许更自由的嵌套。 - Šime Vidas

Answer 2

根据HTML Living Standard，SPAN元素的内容模型为“Phrasing content”。

在这里阅读关于SPAN元素的内容。

在这里阅读有关Phrasing content的内容。第二个链接包含可放置在SPAN元素内部的所有元素的完整列表。

- Šime Vidas

---

这是span的w3c规范：http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element和`phrasing content`：http://www.w3.org/TR/html5/content-models.html#phrasing-content。 - Sapph

@Sapph 我更喜欢HTML Living Standard规范 - 它更加更新且更接近“源头”。 - Šime Vidas

Vidas：至少在这种情况下，我们有两个工作组达成了一致 :) - Sapph

这就解释了为什么我的HTML编译器不接受<span><p></p></span>作为有效的HTML，并将其视为<span></span><p></p>。 - papillon