一.相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

即图片相对于你写的html页面的位置

相对路径分类	符号	说明
同一级路径		图片与html文件处于同一级，如<img src="baidu.gif">
下一级路径	/	图片位于html文件下一级，如<img src="images/baidu.gif">
上一级路径	../	图片位于html文件下一级，如<img src="../baidu.gif">

1.同一级路径

可以看到此时oip的这张图片与我写的这个html文件(三种相对路径)同处在HTML这个文件夹里，他们属于同一级路径

2.下一级路径

这里可以看到这个html文件(三种相对路径)与image相对为同一级，可爱茂夫在相对路径的下一级

3.上一级路径

 百分百茂夫相对与HTMl文件夹为同一级，即百分百茂夫在html文件(三种相对路径)的上一级

最后想说茂夫真的帅 

4.总结：相对其实就是找到与html同级包含图片的文件/图片，从同级这里出发，寻找文件  

二. 绝对路径

1.左击此框框可以看到现在此文件夹的路径

一般来说绝对路径不能用live server查看，因为HTML文件是通过Web浏览器访问的，而Web浏览器出于安全考虑不会允许打开file：//开头的本地图片

解决办法

直接在本地打开html文件

 

 2.网络中的绝对路径使用

比如获取csdn左上角猿头像，只需要右键复制图像链接

还是会遇到相同的问题，解决办法也跟上面相同

三.超链接标签

 在html标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1.超链接的语法规范

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

a为anchor的缩写，意为锚。href的全称为Hypertext Reference，意为超文本引用。

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性，它就具有超链接的功能
target	用于指定链接页面的方式，其中_self为默认值，_blank为在新窗口中打开方式

2.链接的分类

1.外部链接，例如<a href=写文章-CSDN创作中心">csdn社区</a>

 单机一下->

但此时新打开的页面会覆盖掉原来的窗口，因为此时target默认为_self.

想要另起一个窗口，把target修改为blank，意思为空白的（新建页）。

 2.内部链接

网站内部页面之间的相互链接，直接链接内部页面名称即可，例如创立两个html文件

 单击->

 3.空链接

当我们没有连接目标时，通常用#先代替

4.下载链接

如果href里面地址是一个文件或者压缩包，会下载这个文件。

 5.网页元素链接

在网页中的各种网页元素，如文本 图像 表格 音频 视频等都可以添加超链接。

例如我现在点开一张灵能百分百的图片，就让他跳转到b站的灵能百分百。

->

6.锚点链接

点我们链接，可以快速定位到页面中的某个位置 

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two"> 第2集</a>

找到目标位置标签，里面加一个id属性=名字，如<h3 id="two">第二集介绍</h3>

例如我们查一下影山茂夫，他这里会有一个目录，点击它，就可以跳转到相应位置

 ->

假设我现在想跳转到角色介绍处

点击跳转->

 、