HTML中相对路径和绝对路径的区别

在实际web开发中,插入图片、包含css文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初学者感到困惑,下面我就详细的介绍一下相对路径与绝对路径。

HTML相对路径

指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。

例如:

文件1.htm的绝对路径是:d:/www/html/1.htm

立即学习“前端免费学习笔记(深入)”;

文件2.htm的绝对路径是:d:/www/html/2.htm

那么:1.htm相对于2.htm的路径就是:1.htm

相对链接的使用方法:

如果链接到同一目录下,则只需输入要链接文档的名称,例如:

如果链接到下一级目录,则需要先输入目录名,然后加 “ / ”,再输入文件名,例如:

如果连接到上一级目录,则需要先输入“../”,然后再输入目录名、文件名,例如:

实例总结

现在有4个html文件分别是aaa.html bbb.html ccc.html index.html

aaa.html的路径为:D:/www/adminwang/html/aaa.html

bbb.html的路径为:D:/www/adminwang/ bbb.html

ccc.html的路径为:D:/www/ ccc.html

index.html的路径为D:/www/ index.html

链接同一目录下的文件

例如ccc.html文件链接index.html的代码如下:

1

链接index网页

链接上一目录的文件

例如bbb.html链接ccc.html的代码如下:

1

链接ccc网页

链接上2层目录的文件

例如aaa.html链接ccc.html的代码如下:

1

链接ccc网页

链接下级目录的文件

例如ccc.html链接bbb.html的代码如下:

1

链接bbb网页

链接下2层目录的文件

例如ccc.html链接aaa.html的代码如下:

1

链接aaa网页

HTML绝对路径

为文件提供的完全路径,包括适用的协议或盘符。也就是你的主页上的文件或目录在硬盘上真正的完整的路径。例如:

http://www.adminwang.com/index.htmd:/ www /html/images/bg.jpg

绝对路径没有什么好说的,相对路径掌握了,绝对路径就很简单了。

相关推荐:
HTMLa标签的href属性指定相对路径与绝对路径使用方法

html的绝对路径和相对路径怎么使用

php算法实现相对路径的案例

HTML中相对路径和绝对路径的区别HTML中相对路径和绝对路径的区别

以上就是HTML中相对路径和绝对路径的区别的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545898.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:36:45
下一篇 2025年12月21日 17:36:54

相关推荐

  • HTML和JS实现简单的计算器

    HTML和JS实现计算器功能的也是很容易的,本文主要和大家分享HTML和JS实现简单的计算器,希望能帮助到大家。 下面是代码: 无标题文档 var result=””; function jisuan(num){ if(num==”=”){ document.form1.text.value=eva…

    好文分享 2025年12月21日
    000
  • HTML和CSS重点难点问题

    本文主要和大家分享HTML和CSS重点难点问题,希望能帮助到大家。 1.怎么让一个不定宽高的 p,垂直水平居中? 使用flex 只需要在父盒子设置:display: flex; justify-content: center;align-items: center; 使用 CSS3 transfor…

    好文分享 2025年12月21日
    000
  • HTML和CSS重难点知识点总结

    本文主要和大家分享html和css重难点知识点总结,希望能帮助到大家。 怎么让一个不定宽高的 p,垂直水平居中? 使用 Flex 只需要在父盒子设置:display: flex; justify-content: center;align-items: center; 使用 CSS3 transfo…

    好文分享 2025年12月21日
    000
  • HTML在两个div标签中间画一条竖线的代码

    近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父p(即这条竖线的高度和两个p中较高的一个等高)。 往常我们画一条横线直接用标签 即可,当画一条竖线的时候发现找不到标签。在网上查找了一下资料,大致推荐用js来做。小弟比较偏执想用纯css来做,最终找到了解…

    2025年12月21日
    000
  • HTML页面点击下载文件的方法实例

    1.使用标签来完成 点击下载 这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”; 以下为例子 移到标签标签上可以显示文件路径,根…

    好文分享 2025年12月21日
    000
  • html的文字图片怎样垂直居中

    这次给大家带来html的文字图片怎样垂直居中,html的文字图片垂直居中的注意事项有哪些,下面就是实战案例,一起来看一下。 方法一 :设置盒子高度与line-height相同,本方法适用于一行文字。 图片垂直居中 和一行文字对齐 用属性vertical-align 小图标和文字垂直对齐,小图标作为背…

    好文分享 2025年12月21日
    000
  • 在HTML中各类型盒子的基线应如何确定

    这次给大家带来在html中各类型盒子的基线应如何确定,在html中各类型盒子的基线确定的注意事项有哪些,下面就是实战案例,一起来看一下。 确定盒子的基线的规则 1.1    确定inline-block的基线 The baseline of an ‘inline-block’…

    好文分享 2025年12月21日
    000
  • HTML中关于盒模型的总结

    这次给大家带来html中关于盒模型的总结,html中关于盒模型的注意事项有哪些,下面就是实战案例,一起来看一下。 关于怪异盒模型和标准盒模型的对比   关于怪异盒模型盒标准盒模型之间的转换 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 相关阅读: 怎样让按钮点击后出现“点”的…

    2025年12月21日
    000
  • HTML基础面试题汇总

    本文主要和大家分享html基础面试题及答案,希望能帮助到大家。 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式(Standards mode)以浏览器…

    好文分享 2025年12月21日
    000
  • html中meta标签及用法详解

    元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。本文主要给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看吧,希望能帮助到大家。 Html中meta标签 一、meta标签 含义    元素 可提供有关页面的元信息(meta-i…

    好文分享 2025年12月21日
    000
  • html如何实现鼠标悬停提示A标签内容

    这次给大家带来html的如何实现鼠标悬停提示a标签内容,html实现鼠标悬停提示a标签内容的注意事项有哪些,下面就是实战案例,一起来看一下。 鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结。 html的title属性默认是显示一行的.如何换行呢? …

    好文分享 2025年12月21日
    000
  • html两秒跳转至其他页面

    这次给大家带来html两秒跳转至其他页面,html两秒跳转至其他页面的注意事项有哪些,下面就是实战案例,一起来看一下。 无标题文档{$rows}两秒后自动跳转!{$val.id} —— {$val.name} 点击返回继续查询! 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关…

    好文分享 2025年12月21日
    000
  • 在HTML中如何让版权符号更美观

    这次给大家带来在html中如何让版权符号更美观,在html中让版权符号更美观的注意事项有哪些,下面就是实战案例,一起来看一下。 一、发现问题 ©是html的中版权的符号,但是字体选择的不对会带来一些问题。如果是宋体,这个符号显示的就是很奇怪的一个符号。 二、解决问题 Copyright ©…

    好文分享 2025年12月21日
    000
  • HTML中划分框窗有哪些常用属性

    这次给大家带来html中划分框窗有哪些常用属性,html中划分框窗的常用属性的注意事项有哪些,下面就是实战案例,一起来看一下。 框架是网页画面分成几个框窗(不同的窗口对应不同页面以几个网页的形式显示),同时取得多个 src的地址。页面所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框…

    好文分享 2025年12月21日
    000
  • HTML中的滚动条有哪些使用技巧

    这次给大家带来html中的滚动条有哪些使用技巧,html中的滚动条的哪些使用技巧的注意事项有哪些,下面就是实战案例,一起来看一下。 我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,…

    好文分享 2025年12月21日
    000
  • HTML中移动端有哪些布局方案

    最近我研究了淘宝,天猫和网易彩票163的wap主页样式布局,今天给大家来总结一些移动端布局方案,并且分析一下所使用技术的利弊。 注意:代码运行是file协议,在chrome里不支持引用本地文件,会提示跨域错误,可以用firefox或者Safari打开 wty2368 移动端布局方案探究 研究了淘宝,…

    好文分享 2025年12月21日
    000
  • 在HTML中关于元素居中有哪些需要注意的事项

    这次给大家带来在html中关于元素居中有哪些需要注意的事项,在html中关于元素居中需要注意的事项有哪些,下面就是实战案例,一起来看一下。 不使用定位     水平居中:text-align = center;(可继承)     竖直居中:margin:0 auto;(块级元素)     其他居中:…

    好文分享 2025年12月21日
    000
  • html语义化有那些作用

    这次给大家带来html语义化有那些作用,html语义化的注意事项有哪些,下面就是实战案例,一起来看一下。 所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。   html标签中的大部分都是由“语义化”标签所担任   那么,它有什么用…

    好文分享 2025年12月21日
    000
  • Html中有哪些标记文字注释的符号

    这次给大家带来html中有那些标记文字注释的符号,使用html中的标记文字注释的符号的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代…

    好文分享 2025年12月21日
    000
  • html中如何使用js来获取本地系统时间

    这次给大家带来html中如何使用js来获取本地系统时间,html中使用js来获取本地系统时间的注意事项有哪些,下面就是实战案例,一起来看一下。 代码如下: var now=new Date() document.write(1900+now.getYear()+”-“+(now.getMonth()…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信