一句话:有些块元素不可以包含另一些块元素

,DTD中规定了块级元素是不能放在P里;

P标签内包含块元素时,它会先结束自己,比如:测试p包含div

那么浏览器会解释成:

测试p包含div

会多解释出一个p

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异。于是究其原因,发现块级元素P内是不能嵌套DIV的。

深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。

in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联。

先看下面的例子你就能明白两者的差别:

测试一下块元素与内联元素的差别

测试一下

块元素

与内联元素的差别

效果如下图:

Thread未包含IdealProcessor的定义 htuple未包含dispose的定义_块元素

在上面的例子中,

会自己产生一个新的行,而并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们

也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里任意转化它们,块元素可以包含内联元素或某些块元素(上

面的例子其实是错误的使用--->我把

放在

里面了)

,但内联元素却不能包含块元素,它只能包含其他的内联元素,再看看这个:

其 中

是属于块元素,而是属于内联元素,

包含是没有错误的,同 样,

可以包含

还有一些情况就是一些块元素不可以包含另一些块元素。例如这样:

测试文字

现阶段是不能这样用的,要等到XHTML

2.0才可以这样用。

测试文字

而这样又是可以的。

这样是可以的

为什么呢?因为我们使用的DTD中规定了块级元素是不能放在

里面的,再加上一些浏览器纵容这样的写法:

这是一个段落的开始

这是另一个段落的开始

当一个

签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:

这是一个段落的开始

这是另一个段落的开始

所以刚才那样的写法会变成这样:

测试文字

现阶段是不能这样用的,要等到XHTML

2.0才可以这样用。

测试文字

这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。

那哪些块元素里面不能放哪些块元素呢?我

知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最

外层,下一级里面只会 有

、、

,而我们已经知道了可视的

元素只会出现在

COLOR="#000000">里,所以我们把

划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就


归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记 的

COLOR="#000000">、
COLOR="#000000">、
COLOR="#000000">、
COLOR="#000000">、
COLOR="#000000">、
COLOR="#000000">、

;分隔线


和一个特别的元素


段落标记的



COLOR="#000000">(它只存在于列表元素



/>

COLOR="#000000">为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子),

这些容器的大小可以自由变化,例如我们可以把



STYLE="margin-left: 2em">



COLOR="#000000">里面,也可以把



COLOR="#000000">嵌在

  • COLOR="#000000">里面。

    COLOR="#000000">在
    HTML里有几个元素是比较特别的:
  1. STYLE="list-style:
    none">的子一级必须是
  2. ; 的 或

或者

。 STYLE="TexT-inDenT: 2em;">COLOR="#000000">很多人在W3C校验无法通过也是这个原因-->错误的元素嵌套,然而把提示错误的标签改成 通过,但是我们不能这样盲目的为了校验而校验, (/>、等)比较特别,它们可以定义宽高。虽然在IE浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们在属于in-line的情况下同样具有block-line的一些特性,在"desplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。COLOR="#000000">/>