HTML相对路径(Relative Path)和绝对路径(Absolute Path)
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)相关推荐
- R语言使用fs包的path_wd函数基于自定义文件路径规则,批量生成多个文件或者文件夹对应的绝对(absolute)文件路径(constructs absolute path)
R语言使用fs包的path_wd函数基于自定义文件路径规则,批量生成多个文件或者文件夹对应的绝对(absolute)文件路径(constructs an absolute path from the ...
- new file https 找不到路径_Python3用pathlib模块替代os.path进行文件路径的操作
本文使用 Zhihu On VSCode 创作并发布 在 Python 3.4 之前和路径相关操作函数都放在 os 模块里面,尤其是os.path这个子模块,可以说os.path模块非常常用.而在 P ...
- python批量读取文件名_python - 从路径中提取文件名,无论os / path形式如何
python - 从路径中提取文件名,无论os / path形式如何 无论操作系统或路径格式是什么,我可以使用哪个Python库从路径中提取文件名? 例如,我想要所有这些路径返回c: a/b/c/ a ...
- u3d 逐个点运动,路径运动。 U3d one by one, path motion.
u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...
- 【Python】Python3.7.3 - sys.path 模块搜索路径详解
文章目录 系统参考 sys.path - 模块搜索路径 用户站点目录(user site directory) 安装包到用户站点目录 第三方站点目录 site.py介绍 python启动选项 PYTH ...
- 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 ...
- [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 ...
- python---之os.path.splitext(“文件路径”)
os.path.splitext("文件路径") 分离文件名与扩展名:默认返回(fname,fextension)元组,可做分片操作 example: import os p ...
- 【VSCode常用插件】Path Autocomplete(@路径提示的插件)
前言 ❤️ 在路上,见识世界:在途中,认清自己 ❤️ [VSCode常用插件]Path Autocomplete(@路径提示的插件) 一.安装教程 二.设置教程 (1)在vscode设置打开 sett ...
最新文章
- 七、内存优化(4)性能计数器
- 实例1、查询数据(多级组织)
- node--静态服务器
- python使用集合实现筛选法求素数-python素数筛选法浅析
- python生成yaml文件_Python实践34-读写yaml文件
- python redis订阅_Python 学习笔记 - Redis
- 2006年9月全国计算机等级考试三级数据库技术笔试试卷(含有答案)
- 24. Django部署:项目部署
- Rocketmq如何保证消息不丢失,如何保证消息不被重复消费
- python定时任务_Python3.x:定时任务实现方式
- 计算机网络 IP:ABC类地址与 子网掩码(ABC类网络均有属于自己的私有IP段 节省32位IP资源 ) 网络地址 主机地址 子网 与子网掩码之间的关系换算 IP和子网掩码相互依存
- 实验五:大数据可视化工具-NodeXL
- BUG的跟踪管理、定位BUG
- 油猴Safari插件Tampermonkey
- JS学习之路系列总结四象阵(此文犹如武林之中的易筋经,是你驰骋IT界的武功心法,学会JS五大阵法就学会了JS,博主建议先学三才阵)
- clr 面试_C# 常见面试问题汇总
- 单线程+多路IO复用 Redis6多线程
- svg 五花 元辅音 助读器
- 通信行业和互联网行业对比分析
- 奥维没有了gg地图后,正确的打开方式