【图】Web开发学习心得2—

　　现在我们来学习HTML的结构(我们只讨论严格型的，也包括XHTML)。

　　首先给出一份严格的HTML的一些常见的规则：

　　1.　　　　　　　　网页总以一个DOCTYPE开始，紧接着，html元素必须出现在网页的开头和结尾。

　　2.　　　　　　　　只有head、body元素可以直接包含于html中，其他任何元素都必须包含于head或body中。

　　3.　　　　　　　　必须给head元素一个title元素。

　　4.　　　　　　　　只能在body中直接放置块元素（如h1,p,div等）。所有内联元素和文本都必须在块元素中才能运行。

　　5.　　　　　　　　只有文本和其他内联元素可以嵌入内联元素中。块元素在任何情况下都不允许包含在内联元素中。

　　6.　　　　　　　　块元素禁止包含于p元素中。

　　这份规则请一定要记住，因为这是良构的HTML最起码的条件。

　　该规则的第1、2、3点都非常好理解，这里不再赘述，至于第4、5、6点，则必须首先理解什么是块元素，什么是内联元素。

　　HTML中，body内的元素，基本上分为两大类，一类是块元素，一类是内联元素。

　　所谓块元素，是指独立显示，独占整行，好像前后都有换行的那种元素，如div,p,h1,ul,ol,li等都是块元素。

　　所谓内联元素，是指在网页中随着文字流出现在行内的那种元素，如span,a,em,img等都是内联元素。

　　不知道大家是否理解了什么是块元素、什么是内联元素，如果还不理解的话，请写几个HTML文件看看它们的表现，或者Google一下吧，相信不难理解。

　　现在，div+css的布局非常流行，这里的div，就是指块元素div。实际上，div一点都不神秘，它是division的简称，表示的就是“区域”这样的结构，与普通的h1、p等没有本质的区别，区别就在于，它表示“区域”，因此，我们可以把一个网页用div分隔成好几个区域。比如下面这个文档

body
　　　 div id="header"
　　　 /div
　　　　　　　 div id="content"
　　　　　　　　　　　 div id="leftbar"
　　　　　　　　　　　 /div
　　　　　　　　　　　 div id="details"
　　　　　　　　　　　 /div
　　　　　　　 /div
　　　 div id="footer"
　　　 /div

　　我们就把整个body分解为3个区域，分别是“header”、“content”、“footer”。然后，我们还可以在这3个区域中加入嵌套的div，就像“content”继续分为“leftbar”与“details”两部分一样，这样就可以把区域逐级往下分，如此，一份结构清晰良好、可读性强的文档就诞生了。当然，该文档不包含任何用于展示的元素，它表示的纯粹是结构。这份文档再搭配上不同的CSS，就会有不同的外观，就好比人穿不同的衣服就有不同的形象一样。div+css，实际上，就是这么简单。