HTML元素间的关系

一、父元素

1、定义

直接包裹某个元素的元素，就是该元素的父元素

2、举例

（1）代码

<tfoot height="50" align="center" valign="middle">
    <tr>
        <td colspan="5">共计：4人</td>
    </tr>
</tfoot>

（2）解释

上述代码中，tfoot是tr的父元素，但不是td的父元素；tr是td的父元素

二、子元素

1、定义

被父元素直接包含的元素

2、举例

（1）代码

<tfoot height="50" align="center" valign="middle">
    <tr>
        <td colspan="5">共计：4人</td>
    </tr>
</tfoot>

（2）解释

上述代码中，td是tr的子元素；tr是tfoot的子元素

三、祖先元素

1、定义

父亲的父亲...，一直往外找，都是祖先

2、举例

（1）代码

<tfoot height="50" align="center" valign="middle">
    <tr>
        <td colspan="5">共计：4人</td>
    </tr>
</tfoot>

（2）解释

上述代码中，tfoot是td的祖先元素；tr是td的祖先元素（但一般不这样称呼，一般就说tr是td的父元素）

四、后代元素

1、定义

儿子的儿子...，一直往里找，都是后代

2、举例

（1）代码

<tfoot height="50" align="center" valign="middle">
    <tr>
        <td colspan="5">共计：4人</td>
    </tr>
</tfoot>

（2）解释

上述代码中，td是tfoot的后代元素；td是tr的后代元素（但一般不这样称呼，一般就说td是tr的子元素）

五、兄弟元素

1、定义

具有相同父元素的元素，互为兄弟元素

2、举例

（1）代码

<div>
     <h1>娱乐</h1>
     <ul>        
        <li>英雄联盟</li>
        <li>蛋仔派对</li>
        <li>刷视频</li>
        <li>看书</li> 
     </ul>
</div>

（2）解释

上述代码中，h1和ul互为兄弟元素；li与li之间也是兄弟元素