文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到:

  • 网页
  • 图像
  • 样式表
  • JavaScript

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL:

实例

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

<img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

相对路径

相对路径指向了相对于当前页面的文件。

在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:

实例

<img src="/images/picture.jpg" alt="flower">

在本例中,文件路径指向了位于当前文件夹中 images 文件夹里的一个文件:

实例

<img src="data:images/picture.jpg" alt="flower">

在本例中,文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件:

实例

<img src="../images/picture.jpg" alt="flower">

好习惯

使用相对路径是个好习惯(如果可能)。

如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

HTML 文件路径的更多相关文章

  1. Oracle数据库文件路径变更

    环境:RHEL 6.4 + Oracle 11.2.0.3 情景一:只是部分普通数据文件迁移,可以在线操作. 1.将对应表空间offline,移动数据文件到新路径 2.数据文件alter databa ...

  2. Excel公式 提取文件路径后缀

    我们在代码中获取一个文件路径的后缀,是一个很简单的事. 如C#中,可以通过new FileInfo(filePath).Extension,或者Path.GetExtension(filePath)获 ...

  3. IISExpress Log 文件路径

    问题 用VS做开发时经常用IISExpress测试web程序,那么在测试过程中生成的Log文件放在哪里了? 答案 情况1 默认情况下 applicationhost.config 文中定义了连个日志文 ...

  4. [LeetCode] Longest Absolute File Path 最长的绝对文件路径

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...

  5. 使用powershell批量添加Keil和IAR的头文件路径

    在Keil和IAR的工程中,为了使文件结构清晰,通常会设置很多的子文件夹,然后将头文件和源文件放在不同的子文件夹中,这样就需要手动添加这些头文件夹的路径.当工程结构非常复杂时,文件夹的数量就非常多,特 ...

  6. Yii2:避免文件路径暴漏,代理访问文件

    制作背景:公司要做第三方文件管理系统,客户有时候需要直接访问文件,但是我们又不想暴露文件路径,才有这代理访问 基本功能介绍:读取txt文档.读取图片,如果有需要,可以通过插件读取doc.pdf文档, ...

  7. php glob()函数实现目录文件遍历与寻找与模式匹配的文件路径

    采用PHP函数glob实现寻找与模式匹配的文件路径,主要讨论glob()函数的作用和用法,利用glob函数读取目录比其它的要快N倍,因为glob函数是内置函数处理起来自然要快. 一,函数原型 arra ...

  8. java 读文件路径问题

    文件路径:右键点击src新建Source Folder,创建结果与src目录同级. C:\Users\lenovo\workspace\timedTask\config\userinfo.proper ...

  9. 关于获取web应用的文件路径的注意事项

    今天在把数据写入文件时遇到了一个问题,指定的文件获取不到.一开始是这样的 URL url = XXX.class.getClassLoader().getResource(fileName);File ...

  10. java通过文件路径读取该路径下的所有文件并将其放入list中

    java通过文件路径读取该路径下的所有文件并将其放入list中   java中可以通过递归的方式获取指定路径下的所有文件并将其放入List集合中.假设指定路径为path,目标集合为fileList,遍 ...

随机推荐

  1. Rancher 2.3.3发布!默认支持K8S 1.16

    2019年11月28日,Rancher Labs发布了Rancher全新版本2.3.3,该版本默认支持Kubernetes1.16,此外还带来了其他功能与优化. 目前,Rancher的Latest和S ...

  2. 从AlexNet(2012)开始

    目录 写在前面 网络结构 创新点 其他有意思的点 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 本文重点在于回顾深度神经网络在CV领域的First Blood--A ...

  3. python函数编程-偏函数partial function

    一般的,通过设定函数参数的默认值,可以减低函数调用的难度.比如:int()函数可以把字符串转换成整数: >>> int(') 123 事实上,int()函数还提供额外的base参数, ...

  4. ssm集成(maven)& 分模块开发--详细教程

    1 maven版本的ssm 1.1 最简单的版本步骤: (1) 创建maven web项目 (2) 在pom.xml中导入依赖的jar包 (3) 再写配置文件: web.xml <!DOCTYP ...

  5. MongoDB(七):聚合aggregate

    1. 聚合aggregate 聚合主要用于计算数据,类似sql中的sum().avg() 语法: db.集合名称.aggregate([{管道:{表达式}}]) stu准备的数据: db.stu.in ...

  6. asp.net core react 项目实战(一)

    asp.net-core-react asp.net core react 简介 开发依赖环境 .NET Core SDK (reflecting any global.json): Version: ...

  7. 使用 SQL 服务器时,"评估期已过期"错误消息

    当打开sql server2008企业管理器的时候,出现报错“评估期已过.有关如何升级的测试版软件的信息.....” 修改注册表:HKEY_LOCAL_MACHINE/SOFTWARE/Microso ...

  8. luoguP4449 于神之怒加强版

    题意 默认\(n\leqslant m\). 一波莫反后可得: \(\sum\limits_{T=1}^{n}\frac{n}{T}\frac{m}{T}\sum\limits_{d|T}d^k\mu ...

  9. js 获取当前日期和时间

    //显示日期在页面上 yyy-MM-dd function init(){ var date=new Date(); //年 var year=date.getFullYear(); //月 var ...

  10. react中使用prop-types检测props数据类型

    一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...