学习目标：
掌握两类路径；
掌握六类链接；
学习内容：
在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
一、路径之相对路径
相对路径∶以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件同一级如<img src="baidu.gif" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级如<img src="images/baidu.gif" |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级如<img src="../baidu.gif" />。 |
代码如下：
<body>
<!-- 同一级路径。直接在同级的目录文件中找到图片。 -->
<img src="img.jpg" />
<!-- 下一级路径。先找到images文件，再找到所需要的图片。 -->
<img src="images/img.JPG" />
<!-- 上一级路径。先..返回到上一级目录中，再找到要的图片。 -->
<img src="../img.jpg" />
</body>
</html>二、路径之绝对路径
- 绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 绝对路径是和当前html文件无关的一个路径。
- 例如，“D:\web\img\logo.gif”或完整的网络地址“http;//www.itcast.cn/images/logo.gif”。
- 这里要注意的是“文档地址”和“网络地址”是不一样的斜杠。
<body>
<!-- 文档下的图片 -->
<img src="C:\Users\86132\Desktop\VScode实验\第一天\images\img.JPG" />
<!-- 复制百度logo网址 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>- 使用绝对路径的缺点：
事实上，在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏 览网页时是不会显示图片的。
三、超链接标签
- 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性的作用如下：
| 属性 | 作用 |
| herf | 用于指定链接目标的url地址，(必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式. |
2.链接的分类
- 外部链接:例如< a href="http:// www.baidu.com ">百度</a >。
<h2>1.外部链接</h2>
<h4>新窗口打开页面</h4>
<a href="https://www.baidu.com" target="_blank">认识HTML</a>
<h4>当前窗口打开页面</h4>
<a href="https://www.baidu.com" target="_self">认识HTML</a>
- 内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如<a href=" index.html">首页</a>。
<h2>2.内部链接</h2>
<h4>当前窗口打开页面</h4>
<a href="01vscode.html" target="_self"> 水花兄弟</a>
<h4>新窗口打开页面</h4>
<a href="01vscode.html" target="_blank"> 水花兄弟</a>- 空链接:如果当时没有确定链接目标时，<a href="#">首页</a >。
最低0.47元/天 解锁文章
5444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
