四、明晰文档节点概念


我们已经知道，papa 盒子（<div id="papa"></div>）是我们帖子的父元素，也称为父盒子。我们要做的HTML帖子这个“家”，是由它撑起的。它还是容器，同时充当帖子这个“家”的屋子，“家”的一切都规划在它里面。


我们说的父盒子（元素）和子盒子（元素）其实就是用来描述文档节点的术语。上一节复习课谈到的文档流，就是文档中一个一个的节点。可以说，帖子是web页的微缩，它也存在文档节点。像下面的代码：


<div id="papa">
    <p>这是我的照片</p>
   <img src="照片url" alt="" />
</div>


第一行和最后一行，是一个文档节点（下称papa），它里面又有两个文档节点，一个 p 标签的节点（下称p），一个 img 标签的节点（下称img）。我们先来理清它们的关系：


papa节点是父节点，它使用起始符 <div> 和收尾符 </div> 将另外两个节点包裹起来。


p节点和img节点是并列关系（它们两个彼此间没有谁包裹谁，只是排队中的前后关系，层级是一样的，谁先谁后而已），同为papa父节点的子节点。


所以这是一个两层节点的HTML结构，节点数是三个，一个父节点、两个并列关系的子节点。


为了明晰节点层级关系，书写HTML代码时，子节点代码都统一缩进固定的距离。再看下面的代码，先体会一下代码的缩进书写方式：


<div id="papa">
    <div>
        <p>这是我的照片</p>
        <img src="照片url" alt="" />
    </div>
</div>




不同层级的节点，书写时缩进的距离不一样，一般地，父层级的顶格书写，第二层级的缩进一个tab或四个空格的距离，第三层加倍缩进，依此类推。


代码缩进不是必须的，这是考虑代码易读性而做出的规范。实际上，所有代码都可以写在一行之内，如果你愿意。


上面的代码，添加了一个 div 节点，它的层级位置是 papa 的儿子，且它包裹了 p节点 和 img节点，一进家就既做儿子又当爸的，幸福是不是来的太快了？


这是三个层级的HTML节点结构。多层级节点结构是web文档必须的，做帖子也是如此。所以HTML如果再来兼顾自身的样式描述，语句就会很长，层级关系容易混乱，故而我们会更多地依赖 CSS 来完成样式的描述（后台化妆）。

前一篇: 三、简单了解文档流
下一篇: 五、子元素布局的实现方式