零基础10天学会网页制作第二天(上)之文件路径

时间：2023-08-31 12:54:02 | 来源：网站运营

时间：2023-08-31 12:54:02 来源：网站运营

零基础10天学会网页制作第二天(上)之文件路径：Hello，大家好，我是AbnerMing，经过第一天的授课，大家是否对网页制作有了一个初步的了解呢，网页制作呢，其实并不难，大家一定不要有压力，对于这门编程语言，应该来说是标签语言，它是所有的编程语言里最最简单的，一定要放宽心，只要亦步亦趋，跟上课程，就一定能够学有所成。

第二天的内容呢稍微有点多，这里我分了上中下三部分，其实写教程也蛮累的，因为不仅要对文字的斟酌，还要对授课过程中的代码，都要自己亲自去实现，所以，每一篇文章下来，都要花费很长的时间，既要有过程，也要保证知识点的通顺，能够让初学者一目了然，这个是难的，希望大家能够包容，多点理解，少些指责。

今天呢，进入《零基础10天学会网页制作》第二天的学习，首先呢，我们针对第一天的作业做一个讲解。

作业呢，是实现下面的新闻列表：

对于这个新闻列表，我们首先来分析一下，它可以分为上中下三部分，上部分的标题，我们可以使用h标签，中间部分的图片，我们可以使用img标签，下面的来源和时间，我们可以使用p标签，不难发现，这个作业的练习，就是针对第一天学的几个标签的综合练习。

首页，我们看代码实现：

图片呢，我放在和网页文件的同级目录中：

对于以上的代码，我们再次回顾一下，尽量，我在授课的时候，穿插一些对以往知识点的回顾，这样的做的目的，就是不断加深大家的印象，以此，让知识点更加的牢固。

上面的代码，充分展现了网页的一个整体结构，用来声明文档类型为html，以便于以网页的形式进行展现，是文档的开始和结尾，所有的内容都是包含在里面的，标签里，主要放置一些头部的引用，如网页的title，网页的作者，网页的描述，还有css，javascript的引用等等，标签里，就是网页的主题内容，所有的网页展示，都是在里面所实现，比我今天的作业。

还有一个需要注意的，第一天的课程里，已经讲过了，这里我再强调一下，那就是，绝大多数的标签，都是成对出现的，当然了也有一部分是单标签，后续会讲到，成对出现的，就是有开始，有结束，结束的标签里，一定不要忘记斜杠“/”，还有所有的标签，虽然大小写不分，但4.0之后，还是建议以小写为主，这里的，我也建议大家，以后都写小写。

作业的代码已经写完了，我们看下效果：

这个作业呢，简单吧，所以啊，网页制作啊，并不难，大家千万不要有任何的压力。

作业讲过之后，我们简单地回顾一下昨天的内容，其实对于昨天的讲述，除了后面的四个小节，其余的大家都可以作为了解。两个知识点需要掌握，1、网页的整体结构，2，h、p、img标签的使用。

第二天的内容，我们继续来研究html中的标签

1、图片的路径选择及属性的使用

2、a标签及属性的使用

3、表格标签，table，tr，td

4、文本格式化的使用

5、总结及回顾




1、图片的路径选择及属性的使用

在昨天的讲述及作业中，我们在写图片的时候，基本上都把图片放在的本地的同级目录，那么如果不在同级目录，我们该如何拿到这个图片地址呢？

我们先看同级目录，图片和网页都在一起：

代码里图片地址书写，src里直接书写文件全名：

效果：

上级目录

我们新建文件夹，名字为上级目录，文件里放上一个图片，在上级目录文件夹里新建一个目录为网页文件夹，网页目录文件夹里存放展示图片的html。

那么针对这个“路径上级.html”l文件，对于图片的路径，我们还能直接书写图片的全名吗？显然是不能的，因为不在同一个目录下。

关于这个路径的选择，就好比一套房子，自己房间里的东西，我们可以自己直接拿来去用，但是客厅里的东西，我们如果说要拿来使用，是不是得先打开门，走到客厅里，然后再去拿我们需要的东西。

而当前这个“路径上级.html”l文件，就好比在卧室里，而图片呢就好比在客厅里，我们如果想拿来使用的话，需要走到客厅去拿，怎么去拿？大家记住了，使用“../”，写法如下：

效果：

下级目录

这一次呢，我们新建一个目录为“下级目录”文件夹，目录里，新建一个“路径下级.html”，再新建一个文件夹为“image”,image文件夹里存放一张图片。

存放图片

那么在“路径下级.html”这个文件里，我们对这张如何书写地址呢？

书写如下：

效果如下：

对于路径的选择，这个我们一定要掌握，很多刚入门的朋友，对这个路径总是很难掌握，不知道为什么要这样去写，所以大家下去一定多练习练习，因为在实际开发中，不仅图片，其它文件，如css，javascript,等等很多文件的引入，或者是页面的跳转，都会牵扯到路径，这里我做一个总结：

同级别目录，路径的选择，我们可以直接书写文件全名,也可以“./”，后面跟文件全名，效果是一样的，一般同级的话，这个“./”可以省略，大家看清楚，这是一个点一个斜杠。

上级目录，也就是父级目录，文件全名前我们添加“../”，也就是两个点一个斜杠，这里延伸一下，那么多个父级呢？也就是有多个目录呢？大家记住，每多一个目录，就要多一个“../”，比如两个，那么就是“../../”，三个就是“../../../”，依次类推。

下级目录，也就是子目录，这个就要全路径，有几个文件夹，我们就写几个文件夹的名字，比如上面的下级目录练习当中，只有一个“image”文件夹，那么书写就是“image/image.png”。

当然了，除了上面的几个路径选择外，还有一个根目录的选择，直接用“/”来表示，所谓的根目录，就是第一个目录，比如下图，那么根目录，就是C盘。

比如，我们在根目录下方一张图片，image.png：

代码里我们就可以这样去书写，直接斜杠+文件全名：

效果：

同样的，因为所有的文件都在根目录下，我们也可以举一反三，比如上述中的同级目录文件夹下有一个image图片：

我们要在根目录文件夹下的网页里，怎么才能拿到这个路径呢？

有两种方式，第一种通过根目录，其实就是全路径了，这个应该明白吧。

第二种方式，先找到父级目录，在父级目录里找：

通过“../”，我们到了父级目录

发现根目录文件夹和同级目录文件夹是同级别，那么书写如下：

文件的路径寻找呢，这个可能刚接触的朋友稍微有点懵，不过，多练习几遍也就懂了，无非就是文件地址的一个寻找。