HTML中为何P标签内不可包含块元素?

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

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

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

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

<p>测试一下块元素与<span>内联元素</span>的差别</p>

<p>测试一下<div>块元素</div>与内联元素的差别</p>

效果如下图:

在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们 也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里任意转化它们,块元素可以包含内联元素或某些块元素(上 面的例子其实是错误的使用—>我把<div>放在<p>里面了) ,但内联元素却不能包含块元素,它只能包含其他的内联元素,再看看这个:

<h2>我喜欢在<a href=”http://www.chhua.com/ ” >WEB开发</a>讨论Web标准的原因。</h2>

其中<h2>是属于块元素,而<a>是属于内联元 素,<h2>包含<a>是没有错误的,同样,<div>可以包含<p>,<p>包 含<a>也是对的,但是如果是下面这样的话,就是错误的,因为内联元素不应该包含块元素:

<a href=”#”> <h2>这样是错误的用法!</h2></a>

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

<p>测试文字

<ul>

<li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>

</ul>

测试文字

</p>

而这样又是可以的。

<ul>

<li><p>这样是可以的</p></li>

</ul>

为什么呢?因为我们使用的DTD中规定了块级元素是不能放在<p>里面的,再加上一些浏览器纵容这样的写法:

<p>这是一个段落的开始

<p>这是另一个段落的开始

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

<p>这是一个段落的开始</p>

<p>这是另一个段落的开始</p>

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

<p>测试文字</p>

<ul>

<li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>

</ul>

测试文字<p></p>

这也是跟刚才说第一个例子中<p>里面放<div>不合理是同一个道理。

那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单 你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道<html>是在最外层,<html>下一级里面 只会有<head>、<body>、<frameset>、<noframes>,而我们已经知道了可 视的元素只会出现在<body>里,所以我们把<body>划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他 的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记 的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>; 段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把<ul>嵌在<div>里面,也可以把<div>嵌在<li>里面。

在HTML里有几个元素是比较特别 的:<ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元 素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须是<dt>或 者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容 的<td>或者<th>。

很多人在W3C校验无法通过也是这个原因–>错误的元素嵌套,然而把提示错误 的标签改成<div>或者<span>就可以通过,但是我们不能这样盲目的为了校验而校验,<div>也不是 神,<div>代替不了语义化的标签。

下面有一张关于(X)HTML Strict下嵌套规则的图,可以参考:

其实在内联元素中,还是可以再区分一下的,有几个元素 (<img>、<input>等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们 在属于in-line的情况下同样具有block-line的一些特性,在”desplay:inline-block的应用”中所说的inline- block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。

时间: 2024-10-25 22:14:22

HTML中为何P标签内不可包含块元素?的相关文章

HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?

先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div>块元素</div>与内联元素的差别</p> 在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里

HTML中为何P标签内不可包含DIV标签?

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联

&lt;p&gt;&lt;/p&gt;标签为什么不能包含块级标签?还有哪些特殊标签?

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v

HTML 基础 内联与块元素

什么是块级元素和内联元素 block(块)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度100%,除非设定一个宽度. ④它可以填写内联元素和其他块元素 inline元素的特点: ①和其他元素都在一行上: ②高,宽度不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 其中css的display属性能修改块元素与内联元素 ◎ blockquote - 块引用 ◎ center - 举中对齐块 ◎ ul - 非排序列表(无

p标签内不能嵌套div(注解)

相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有"inline"特性的同时又拥有"block"的特性称为replace元素. <p> <div>编码美学</div> <div>编码美学</div> </p> 在上面的代码中,p标签在遇到下一个块级元素的时候就闭合了,它会被浏览器解析

CSS2.1SPEC:视觉格式化模型之包含块

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题. 阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神的两

行内块元素 、块元素、内联元素关于text-align:center margin:0 auto的比较

行内元素.块元素的区别 1.行内元素会在一条直线上水平排列 2.行内元素width.height设置无效,padding和margin的上下无效 2.块元素各占一行,垂直排列,相当于末尾有<br>标签 3.块元素可以包含行内元素和块元素,但是行内元素是不能包含块元素的 下面开始上图 首先选择使用一个block  和inline,并给定边框border,方便查看 对于inline设置text-align:center是无效的 后面发现设置宽度 高度也是无效的 因此引入了行内块元素,分别设置宽度,

html常见的块元素与内联(行内)元素用法说明(一)

html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身大小的元素,不会占用一行.主要用于选中文本设置样式. div块元素仅仅只用于进行页面布局,它自身不带任何默认样式. span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式. 一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素. a元素可以包含任意元素,除了其本身. p

web前端入门到实战:html常见的块元素与内联(行内)元素用法说明

html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身大小的元素,不会占用一行.主要用于选中文本设置样式. div块元素仅仅只用于进行页面布局,它自身不带任何默认样式. span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式. 一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素. a元素可以包含任意元素,除了其本身. p