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

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

  • 网页
  • 图像
  • 样式表
  • 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. Linux服务器部署.Net Core笔记:二、安装FTP

    1.安装 安装ftp:yum install -y vsftpd 将ftp设置开机启动:systemctl enable vsftpd.service 2.配置 安装好后在ftp配置文件里进行配置 : ...

  2. 微服务分布式 spring cloud springboot 框架源码 activiti工作流 前后分离

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  3. arcgis api 4.x for js 聚合效果图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  4. 达梦7入门技术总结--DCA级别

    说明: 1)该实验所有过程均是本人亲自敲命令完成,所有代码运行正确 2)安装过程使用的是suse11 sp3操作系统,后续的实验过程换成了麒麟中标,因此部分路径可能存在差异 3)安装过程使用了命令行安 ...

  5. SpringMVC的自动配置解析

    https://docs.spring.io/spring-boot/docs/1.5.10.RELEASE/reference/htmlsingle/#boot-features-developin ...

  6. leetcode菜鸡斗智斗勇系列(1)---把一个链表中的二进制数字转换为一个整型数(int)

    Convert Binary Number in a Linked List to Integer这道题在leetcode上面算作是“easy”,然而小生我还是不会做,于是根据大佬的回答来整理一下思路 ...

  7. Zuul Swagger 整合

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...

  8. 几种设计良好结构以提高.NET应用性能的方法

    写在前面 设计良好的系统,除了架构层面的优良设计外,剩下的大部分就在于如何设计良好的代码,.NET提供了很多的类型,这些类型非常灵活,也非常好用,比如List,Dictionary.HashSet.S ...

  9. Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

    这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现. 为什么数据发生变化,绑定的视图就会刷新了呢? 以下是我的个人理解,仅供参考: 在还是 ...

  10. 使用 Flutter 开发 Mac 桌面应用

    Flutter 可以开发 Mac,Linux,Windows 桌面,但是对于平台目前只能打对于的包,以及调试本平台的包. 切换到 master 分支 首先必须切换到 master 分支.我之前在 de ...