这个问题的提法略有不准确。并非所有块级元素都不能包含其他块级元素。大部分块级元素是可以包含其他块级元素的。 只有少数几个块级元素不能包含其他块级元素,或者限制了可以包含的元素类型。
以下是不能包含其他块级元素,或者有严格限制的块级元素:
-
<p>
(段落):<p>
元素不能包含其他块级元素,包括其他<p>
元素。如果在<p>
元素内部放置块级元素,浏览器会自动关闭前面的<p>
元素,并在块级元素之后创建一个新的隐式<p>
元素。<p>
元素可以包含内联元素(例如<strong>
、<a>
、<span>
等)和文本。 -
<h1>
-<h6>
(标题): 标题元素通常也不应该包含块级元素,虽然技术上一些浏览器可能允许。最佳实践是只包含短语和内联元素。 -
<dt>
(定义列表术语):<dt>
元素用于定义列表中定义术语,通常只包含短语和内联元素。虽然某些浏览器可能允许包含块级元素,但为了语义的清晰和最佳实践,应该避免这样做。 -
<li>
(列表项):<li>
元素可以包含块级元素,这是一个例外情况,也是容易混淆的地方。虽然<li>
元素本身是块级元素,它可以包含其他块级元素,例如段落<p>
、其他列表<ul>
或<ol>
,以及标题<h1>
-<h6>
等。
需要注意的是,HTML 规范在不断演变,浏览器的实现也可能存在差异。为了确保代码的跨浏览器兼容性和可维护性,最好遵循最佳实践,避免在 <p>
、<h1>
- <h6>
和 <dt>
元素中嵌套块级元素。
总而言之,与其说是“哪些块级元素不能包含其他块级元素”,不如说是“哪些块级元素不应该包含其他块级元素”,因为这更多的是关于语义和最佳实践,而不是严格的语法限制。 <p>
元素是其中最典型的例子。