一、路径

定义： 从文件（html文件/css文件）自身出发去查找目标文件（比如我需要找我的电脑，那么找电脑过程就称之为路径）；

绝对路径

带有盘符的路径(了解)

不推荐使用，因为每个的电脑硬盘只能自己访问，别人是访问不了的

 
 <img src="C:\Users\admin\Desktop\上课需要的素材\zhulin\img\rrrr.jpg">

在线网络地址（重点）

可以使用，但是使用的时候**必须书写http://前缀**，但是要注意如果在线网站挂了该链接就不生效了；

 
 <img src="https://www.itcast.cn/2020gw/images/indeximg/jyljavaee.png">

相对路径

同级路径（重点）

文件（html文件/css文件）和目标文件是并列的同级关系，直接在书写目标文件的名称格式即可；

 
 <img src="./dog.gif" alt="">

下级路径（重点）

文件（html文件/css文件）和目标文件的父级盒子是并列的同级关系，先书写父级盒子名称/目标文件名称

./路径/文件

 
<img src="./img/dog.gif" alt="">

上级路径（了解）

../表示往上翻一级，文件先从自己的父级盒子中出来，再去查找对应的目标文件路径；

注意：实际开发中我们在css外部链接查找文件常用，比如查找背景图（需要 .css文件../翻出css文件夹再去找图片）；

../书包/电脑 -- 书包在教室外面，../表示出教室

 
.box {
    background: url(../img/dog.gif);
}

七、表格

作用： 目前市场表格主要是用来制作各类数据信息展示；

基本结构（重点）：

最基本常用的表格是table表示表格整体，tr表示行，tr里面可以嵌套th或者td；

th：表头单元格 - 包含表头信息（由 th 元素创建）；

td：标准单元格 - 包含数据（由 td 元素创建）

  <table>
        <tr>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

常见属性（了解）

border ： 边框，后期用css实现；width： 设置表格的宽度，后期用css实现；rules : 取值为all，就可以实现细线表格样式，后期用css实现；

cellpadding： 规定内容距离单元格边沿的空白距离，后期用css实现；

cellspacing ： 设置单元格和单元格之间的距离,一般取值为0或者不设置即可；

align： 设置表格的对齐方式，取值为left、center、right；如果align设置给table只影响table整体,不会影响th和td；

<table border="1" rules="all" cellpadding='10'>
    
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>老王</td>
            <td>16</td>
            <td>100</td>
        </tr>
        <tr>
            <td>老张</td>
            <td>18</td>
            <td>90</td>
        </tr>
        <tr>
            <td>老李</td>
            <td>19</td>
            <td>60</td>
        </tr>
    </table>

  ### 表格结构标签（记住即可）

实际开发中我们也可以按照项目需求将table表格进行区块划分，一般我们划分为以下三部分：

thead标签用于把对HTML表格里的表头集中起来；

tbody用于集中主体内容；

tfoot用于集中表尾； 注意：

01、因为浏览器解析table表格的时候是一行一行的解析的，建议将tfoot放在tbody之前，以便浏览器可以在所有数据行接收完成之前显示表尾.

 <table border="1" rules="all" cellpadding='10'>
    
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">注意：该成绩真实有效！</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>老王</td>
                <td>16</td>
                <td>100</td>
            </tr>
            <tr>
                <td>老张</td>
                <td>18</td>
                <td>90</td>
            </tr>
            <tr>
                <td>老李</td>
                <td>19</td>
                <td>60</td>
            </tr>
        </tbody>
    </table>

合并单元格（了解）

单元格合并三步曲第一步：先确定是跨行还是跨列合并，如果是跨行合并rowspan从上到下的合并，如果是跨列合并colspan从左到右的合并

第二步：找到目标单元格（需要合并的格子中的第一个格子），在开始单元格上书写跨行或者跨列，写上合并的格子： --- 第三步：删除多余的单元格；

前端入门###路径与表格###