XHTML标识的嵌套循环标准剖析

在 XHTML 的語言里,大家都了解:ul 标识包括着 li、dl 标识包括着 dt 和 dd——这些固定不动标识的嵌套循环标准10明晰确。可是,也有很多标识是单独的,它们沒有被捆缚在1起,例如 h1、div、p……那末这些标识的嵌套循环标准究竟是如何的?今日就来讲说这个话题。

提到 XHTML 标识的嵌套循环标准,大家先获知道有这么2类 XHTML 标识,1类叫做 块级元素(block),1类叫做 嵌入元素(inline,也是有很多人叫它:内联、行内、线级等)。

块级元素 和 嵌入元素 的区划规范很简易,请把下面2行编码放进 body 标识里:

<div style=”border: 1px solid red;”>div1</div>
<div style=”border: 1px solid red;”>div2</div>

访问器的展现实际效果:

div1
div2

 

网页页面展现的这2个 div 占有了2行室内空间,除非让它们波动(float)或是开展别的设定,不然谁都不挨着谁,它们都很蛮横霸道的占据属于自身的那1行室内空间——只要是看到某个标识有此状况,你便可以叫它:块级元素(block)

再把下面2行编码也放进 body 标识里:

<span style=”border: 1px solid red;”>span1</span>
<span style=”border: 1px solid red;”>span2</span>

访问器的展现实际效果:

 span1 span2

这1次,两个 span 并列在1行,它们之间睦邻友善、亲切和睦……像这样的标识个人行为,大家能够称它们为:嵌入元素(inline);

 

块级元素和嵌入元素的差别:

· 块级元素 1般用来构建网站构架、合理布局、承载內容……像这些大致力活都属于块级元素的,它包含下列这些标识:

div、ul、li、dl、dt、dd、h1~h6、p、address……

· 嵌入元素 1般用在网站內容当中的一些细节或位置,用以“强调、区别款式、上标、下标、锚点”这些,下面这些标识都属于嵌入元素:

a、span、strong、sub、sup、img……

· 块元素 和 嵌入元素 是能够相互之间变换的,变换的编码以下:

display: block; /* 转成块元素 */

display: inline; /* 转成嵌入元素 */

· 块元素 和 嵌入元素 针对 CSS 的启用标准是不1样的(这篇文章内容探讨的是标识嵌套循环,因此对这个专业知识点不进行表明)。

 

简易了解了块元素和嵌入元素之后,下面便可以列举 XHTML 标识的嵌套循环标准了:

1. 块元素能够包括内联元素或一些块元素,但内联元素却不可以包括块元素,它只能包括其它的内联元素

<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

2. 块级元素不可以放在<p>里边

<p><ol><li></li></ol></p> —— 错

<p><div></div></p> —— 错

3. 有几个独特的块级元素只能包括嵌入元素,不可以再包括块级元素,这几个独特的标识是:

h1、h2、h3、h4、h5、h6、p、dt。

4. li 内能够包括 div 标识 —— 这1条实际上无须独立列出来的,可是在网上很多人对此一些疑虑,就在这里略加表明:

li 和 div 标识全是装载內容的器皿,影响力公平,沒有级別之分(比如:h1、h2 这样等级森严的级别规章制度^_^),要了解,li 标识连它的父级 ul 或是 ol 都可以以容下的,为何有人会感觉 li 恰恰容下不下1个 div 呢?别把 li 看得那末小家子气嘛,别看 li 长得挺干瘦,实际上 li 的胸怀很大滴……

5. 块级元素与块级元素并列、嵌入元素与嵌入元素并列:

<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对

<div><h2></h2><span></span></div> —— 错