【路径: 相对路径 和 绝对路径】

---

1. 路径 和 路径的分类

• ⑴ 路径
  • 在 html 中,指的就是 找到一个文件 需要用到的地址,比如,在网页中 插入图片时,需要使用 资源地址src 属性 来指明 图片的地址 url,这个地址 url = 路径

  <img src="wo.jpg" alt="我的帅照" width="400px" />

---

• ⑵ 路径分类
  • ① 相对路径:按照 文件 和 html 文件 位置 的相对位置 来分类
  • ② 绝对路径:
    • 绝对路径是指 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
    • 完整的描述 文件位置的路径 就是绝对路径，以 web站点 根目录 为参考基础的目录路径。

---

1.1 相对路径

• 相对路径的 分类
  • 按照 文件 和 html 文件 位置 的相对位置 来分类
  • ① 同一级 路径: src="文件名"
    • 图片和 html 文件, 在同一个文件夹中
    • <img src="wo.jpg" alt="哪吒" width="400px" />
    • 
  • ② 下一级 路径: src="文件夹名/文件名"
    • 图片 所在的文件夹, 和 html 文件 在同一个文件夹
      • 图片 在这个文件夹中,而不是 和 html 文件 直接 在一个文件夹中.
    • 找路径,要先找到 图片 所在的文件夹,才能找到图片.
    • src="images/wo.jpg"
    • 
    • 
  • ③ 上一级 路径: src="../文件名"
    • 图片文件 和 html 文件 所在的文件夹,在用一个文件夹中
      • 要找到 图片文件,html 文件 就要先 向上返回一级,找到 图片文件 所在文件夹
    • 表示 上一级: ../ (上两级 : ../../,以此类推)
      • src="../wo.jpg"
      • 

---

1.2 绝对路径

• 绝对路径
  • 不是相对于 html 文件位置的 路径,相对于 站点 根目录的位置.
    • <img src="C:\Users\Administrator\Desktop\PracticeDemo\视频学习的练习网站\images">
  • 绝对路径1:本地 绝对路径. 右击图片→属性→位置
    • 极少使用: 下方的 绝对路径 极少使用,换个电脑就不能用了, 一般都是使用 相对路径,相对简单一点.
  • 
• 绝对路径 2: 网络 绝对路径. 使用 互联网的图片,直接使用 图片地址
  • 经常使用: 这种,不用 把图片下载下来,有网 就能直接使用.
    • 右击图片,复制图片地址.
    • <img=src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2632944636,2898212144&fm=26&gp=0.jpg">
  • 

---

结束语 和 友情链接

• 友情链接
  • ① 【HTML 标签的 参考列表 (按字母排列)】
  • ② 【HTML 标签的 参考列表 (按 功能分类 排列)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/102886094
  • 版权声明：本文为博主原创文章，转载请附上博文链接！