HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片?......

如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。

为了避免这些错误,正确地引用文件,我们需要学习一下HTML路径。

HTML有2种路径的写法:相对路径和绝对路径。

HTML相对路径(Relative Path)

同一个目录的文件引用

如果源文件和引用文件在同一个目录里,直接写引用文件名即可。

我们现在建一个源文件info.html,在info.html里要引用index.html文件作为超链接。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "index.html">index.html</a>

如何表示上级目录

../表示源文件所在目录的上一级目录,http://www.cnblogs.com/表示源文件所在目录的上上级目录,以此类推。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "../index.html">index.html</a>

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "http://www.cnblogs.com/index.html">index.html</a>

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\wowstory\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "../wowstory/index.html">index.html</a>

如何表示下级目录

引用下级目录的文件,直接写下级目录文件的路径即可。

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "html/index.html">index.html</a>

假设info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.html

假设index.html路径是:c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html

在info.html加入index.html超链接的代码应该这样写:

<a href = "html/tutorials/index.html">index.html</a>
根目录  :/放在最前面是指从网站的根目录开始

HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path)指带域名的文件的完整路径。

假设你注册了域名www.blabla.cn,并申请了虚拟主机,你的虚拟主机提供商会给你一个目录,比如www,这个www就是你网站的根目录。

假设你在www根目录下放了一个文件index.html,这个文件的绝对路径就是: http://www.blabla.cn/index.html。

假设你在www根目录下建了一个目录叫html_tutorials,然后在该目录下放了一个文件index.html,这个文件的绝对路径就是http://www.blabla.cn/html_tutorials/index.html。

转载于:https://www.cnblogs.com/keyuser/archive/2009/08/26/1554406.html

HTML相对路径(Relative Path)和绝对路径(Absolute Path)相关推荐

  1. R语言使用fs包的path_wd函数基于自定义文件路径规则,批量生成多个文件或者文件夹对应的绝对(absolute)文件路径(constructs absolute path)

    R语言使用fs包的path_wd函数基于自定义文件路径规则,批量生成多个文件或者文件夹对应的绝对(absolute)文件路径(constructs an absolute path from the ...

  2. new file https 找不到路径_Python3用pathlib模块替代os.path进行文件路径的操作

    本文使用 Zhihu On VSCode 创作并发布 在 Python 3.4 之前和路径相关操作函数都放在 os 模块里面,尤其是os.path这个子模块,可以说os.path模块非常常用.而在 P ...

  3. python批量读取文件名_python - 从路径中提取文件名,无论os / path形式如何

    python - 从路径中提取文件名,无论os / path形式如何 无论操作系统或路径格式是什么,我可以使用哪个Python库从路径中提取文件名? 例如,我想要所有这些路径返回c: a/b/c/ a ...

  4. u3d 逐个点运动,路径运动。 U3d one by one, path motion.

    u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...

  5. 【Python】Python3.7.3 - sys.path 模块搜索路径详解

    文章目录 系统参考 sys.path - 模块搜索路径 用户站点目录(user site directory) 安装包到用户站点目录 第三方站点目录 site.py介绍 python启动选项 PYTH ...

  6. python import os.path_Python常用模块os.path——文件及路径操作

    os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1 ...

  7. [Leetcode] Path Sum II路径和

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  8. python---之os.path.splitext(“文件路径”)

    os.path.splitext("文件路径")    分离文件名与扩展名:默认返回(fname,fextension)元组,可做分片操作 example: import os p ...

  9. 【VSCode常用插件】Path Autocomplete(@路径提示的插件)

    前言 ❤️ 在路上,见识世界:在途中,认清自己 ❤️ [VSCode常用插件]Path Autocomplete(@路径提示的插件) 一.安装教程 二.设置教程 (1)在vscode设置打开 sett ...

最新文章

  1. 七、内存优化(4)性能计数器
  2. 实例1、查询数据(多级组织)
  3. node--静态服务器
  4. python使用集合实现筛选法求素数-python素数筛选法浅析
  5. python生成yaml文件_Python实践34-读写yaml文件
  6. python redis订阅_Python 学习笔记 - Redis
  7. 2006年9月全国计算机等级考试三级数据库技术笔试试卷(含有答案)
  8. 24. Django部署:项目部署
  9. Rocketmq如何保证消息不丢失,如何保证消息不被重复消费
  10. python定时任务_Python3.x:定时任务实现方式
  11. 计算机网络 IP:ABC类地址与 子网掩码(ABC类网络均有属于自己的私有IP段 节省32位IP资源 ) 网络地址 主机地址 子网 与子网掩码之间的关系换算 IP和子网掩码相互依存
  12. 实验五:大数据可视化工具-NodeXL
  13. BUG的跟踪管理、定位BUG
  14. 油猴Safari插件Tampermonkey
  15. JS学习之路系列总结四象阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)
  16. clr 面试_C# 常见面试问题汇总
  17. 单线程+多路IO复用 Redis6多线程
  18. svg 五花 元辅音 助读器
  19. 通信行业和互联网行业对比分析
  20. 奥维没有了gg地图后,正确的打开方式

热门文章

  1. 51 nod 1097 拼成最小的数 思路:字符串排序
  2. 移动零—leetcode283
  3. 系统仿真基础与计算机实现,计算机综合仿真实验系统的研究与开发
  4. DuplicateHandle复制句柄保护文件
  5. IEEE深度对话Facebook人工智能负责人Yann LeCun:让深度学习摆脱束缚
  6. 任务调度与上下文切换时间测试
  7. java list 排序_Java中List的排序
  8. c++ primer 5th,习题13.3 答案是不是错了?(未解决)
  9. ubuntu启动,而且找不到win10启动项!
  10. C 语言实现数组冒泡排序