00:02
第二个呢,我们一起来看一下这个所谓的叫路径问题。路径呢,我们前面稍微提了一点点啊,我们路径我们有相对路径。还有一个是绝对路径。我们有两种。相对路径和绝对路径。我们回到我们来画个图啊,画个图。是这样的,同学们。假设呢,我们当前。我们来画一下啊。我们来画一下,大家把窗户关一下啊。这是我当前的项目。这是我当前这个项目。那么。稍等啊,回到这个项目当中,我们这个项目叫PRO10。那么我就写一下吧。好,这个叫PRO10。我们这个项目的目录结构。
01:00
这个项目的目录结构,我们也把它画出来。我们是以web部署包的形式,咱们来把它画成,所以说src咱们就不画了。我们有第一个文件夹叫外边音法。这个文件夹叫web英法。Web in法下面又会有文件夹和文件。有一个文件夹。叫library。有可能还会有个部署文件叫web.X文件是吧,同学们。喂,这么两个。把它写到这。这是第一个叫library。好,第二个叫web.X文件。就是这样的。啊,这这是这是最下面的两个。好,我们这个项目下面呢,有个叫外粉。那么除了有web呢,我可能还有其他的一些页面。会有一些页面,那么还会有一些静态资源,比如说在这个下面,我还会再放上一个叫CSS样式表的一个文件夹,叫CSS。
02:09
把它写在这。那我可能还会有imagine,还会有JS。这个叫image。Images啊,可能还有JS等等,我就我就不写了啊,咱们就演示一个就可以了,演示一个CSS就可以了。那么我下面呢,还会有一些页面。比如说。比如说我这边会有一个index页面。我这个地方会有一个index页面,index.html。好。那么我还会有和用户相关的页面。那么用户相关的页面呢?首先我会有一个文件夹。比如说用户相关的,或者叫订单相关的,或者叫购物车相关的,或者叫商品相关的,其实都可以啊,其实都差不多,比如说和user相关的,这是user这个文件夹。
03:10
那么这个文件夹下面。这个文件夹下面。比如说。我们又有。会员管理相关的member。啊,会员相关的这么一个文件夹。然后呢?这个会员相关的文件夹下面,他可能又会有其他的一些信息。比如说某一次团购,或者某一次促销。比如说我们这这边随便写一个啊,叫shopping点里面easy的行吗,同学们。啊,就这么写一下,叫shopping.html。那行这是这个文件夹里面两个页面。那么和这个文件夹同一个目录的,我们可能就会有一个文,有一个叫user或者叫log啊,意思一下啊,假设叫log嘛。
04:00
我写我写个叫locking啊,locking.ht注册页面我就不写了,写一个就可以了。现在是这样的,同学们。我们在。login.html页面上,假设我想引用CSS里面的login.css。假设我这边有一个叫login.css。我写的了。我要去引用它,我怎么引用。谁能告诉我?我在login.htm页面上,我怎么去引用login.css。首先。login.html里面。我们写一个叫link标签是吧,同学们这是link标签是吧,然后有个叫HF,没错吧。首先,login.htma。他是不是在user里面。
05:01
所以我们得写个点点杠。回到user这一集。是不是?然后是不是我们在干嘛。是不是这个回到user这一集之后,然后呢。稍等一下啊,我把它先剪切掉。稍等啊,我把这个线先画出来。我们把这个ID也打开。想象一下,在我们web里面。我们有一个CSS文件夹。然后我们还有一个优质的文件夹。再来新建一个文件夹,叫user。然后在我们user的这个当中有一个叫loging.HTML是吧。来写个页面啊,随便意思一下,写个页面,Login login.htl行就在这。
06:07
那请问一下我这个link,我应该怎么写呢。第一个点点杠是不是回到user这一集。是吧?请问这个下面在CSS吗?是的吗?哎,是不是。是的。CSS,我们来试一下。我们在这边来写一个。我们写一个loging.CSS行不行?同学们啊,我就随便写一个loging.CSS那我在这边写个叫color,叫点Co color,我把字体改成改成read行不行?啊,我就设这个字体颜色,然后log DH里面里面我们要引用。CSS。下面的log.css是吧?要引用它啊,Real等于sheet。然然后呢,我们这边写一下啊呃,我们这边就写一个,比如说段落标签。
07:03
啊,比如写个hello。然后呢,我们这边写个叫叫叫怎么说叫。Class是吧,叫康是点了吧,哎,就这样。哎,他的字是变成红色的。那请问一下这个叠点杠是啥意思?返回到上一节。本来我这个页面,本来我这个页面。在这一集。我返回到上一集user这一集,那么和user同级的是不是一个叫CSS啊?所以。我就首先是点点杠。然后CSS,我要进入到CSS是吧,同学们。然后再进到它里面去,叫login.css,没错吧。它是这个路径,这个叫相对路径。再来。好,再来。
08:01
下面假设我是在shopping.html,我应该怎么办?首先点点杠跑到哪里面去?Member。然后呢?再点点杠跑到Z了,再CSS假设下面假设啊假设有个叫消品点CSS是不是这样的。这个地方。啊,我们把刚才写一下啊,CSS-log.css好不好行,把它写在这,这种叫相对路径。相对路径。那请问index.htm上面如果要引用index CSS呢?是不是直接CSS斜杠index.css啊。哎,这是没有问题的,这三个都是相对路径。相对路径其实我们已经理解了,但是相对路径一个不太好的地方,如果我的路径啊比较深的情况下,这个点点干会有好多诶。
09:01
是吧,所以有些时候会搞得会搞混淆,会搞混了会容易搞错。啊,这个点点高。所以呢,我们可以再换一种方式,我们不使用相对路径,我们使用绝对路径。比如说index.html,我们绝对路径应该怎么写呢?HTTP。LOCALHOST8080PRO10,这就是我们的绝对路径的根目录。协议。IP地址端口号加上你的叫context root,还记得不?Root,这就是你的个路径。然后下面的CSS,再往下的index.css。是吧,同学们,这就是啊,绝对路径,我就把它写出来了。那这个角度路径应该怎么写呢?是不是还是HTTP80810,然后呢。
10:00
CSS,再往下locking.css。那这个路径呢。差不多。HTTP808010,然后CSS,然后shopping。CSS是不是,同学们我决斗路径是不是,不管你这个页面到底你放在哪个文件夹,到底的深度层次是怎么样的,我都不管,我总是先加一个。跟路径。然后就看CSS和之间的关系。我根本就不考虑我自身这个HTML到底放在哪个层级是吧,同学们。所以呢,我们为了能够让我们更清晰一些,我们以后啊,尽量的都使用绝对路径。行吗?同学们,我们从现在讲完为止啊,讲完开始咱们就不要使用相对路径了,我们就使用绝对路径。OK。再来。我们在HTM当中,我们在HTM当中。在我们的黑的标签当中。
11:02
我们有一个标签叫best标签。叫base标签,这个base标签里面可以写一个hif。然后我把我刚才的这个路径把它放进去。这个base标签,它的作用是。作用。是。当前。页面上的所有的路径。都以。这个为基础。都以这个为基础。因此。因此,假设我有个路径,我写的是link。啊瑞我就不写了,我直接写个HF,如果我写的是CSS杠。Shopping。点CSS。如果我这么去写。是没有问题的,我不管我当前这个销品页面放的有多深,我都是以它作为一个基础,然后再拼接上它。能听懂我在说什么吗?
12:00
好,这是我们best这个标签的作用。这是best标签的作用。这是我们原始的HTM当中的这个标签。现在我们有time live time live当中对应的我们有一个叫at大括号。啊,TH冒号HF,我们写了一个叫大括号。这个叫艾特大括号,它就相当于这个东西,所以呢,假设我们这个link,我怎么写呢,我就这么去写。Link。GIF,好,我这边写个叫TH冒号。然后艾特大括号。就这样啊,这边我可以交个写稿。啊,这个斜杠啊,这个斜杠可以把它拿掉。我这么去写。就相当于艾特大括号,它就相当于我们的http log8080pro10,然后再加上CSS.css。
13:02
行吗?同学们,这是第三层,是我们time live这个标签。啊叫艾大括号。行这个理论知识啊,关于路径的这个理论知识,我就把它说完了。这个叫相对路径。然后呢,绝对路径,然后呢base标签。啊,以及我们的艾大括号标签。好,就这样子。
我来说两句