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

最新推荐文章于 2024-07-29 00:15:00 发布

Hey_Coder

最新推荐文章于 2024-07-29 00:15:00 发布

阅读量784

点赞数

分类专栏：【HTML】文章标签： html路径路径介绍怎么确定图片地址相对路径和绝对路径相对路径

本文链接：https://blog.csdn.net/VickyTsai/article/details/102886094

版权

26 篇文章 11 订阅

订阅专栏

1. 路径和路径的分类

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

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

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

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

绝对路径
- 不是相对于 html 文件位置的路径,相对于 站点根目录的位置.
- 绝对路径1:本地绝对路径. 右击图片→属性→位置
  - 极少使用: 下方的绝对路径极少使用,换个电脑就不能用了, 一般都是使用相对路径,相对简单一点. (不要使用这个,这个路径中默认的反斜杠\ 会使路径无效)
绝对路径 2: 网络绝对路径. 使用互联网的图片,直接使用图片地址
- 经常使用: 这种,不用把图片下载下来,有网就能直接使用.
  - 右击图片,复制图片地址.
  - <img=src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2632944636,2898212144&fm=26&gp=0.jpg">