HTML引入文件的绝对路径、相对路径、根目录

什么是绝对路径?绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片、超级链接、flash、音频、视频等等。代码如下:

1、引入网络上的资源:

<script src="http://code.jquery.com/jquery-latest.js"></script>

2、引入电脑本地的绝对路径,如D盘下images文件夹里名称为“aaa.jpg”的图片:

<img src="D:/images/aaa.jpg">

使用绝对路径必须输入完整的描述路径,这种方法指向的链接目标地址清晰明确,但有个缺点就是一旦文件被移动或删除久会造成文件无法显示,需要重新设置相关链接

什么是相对路径?相对路径是指该文件所在路径与其它文件(或文件夹)所在路径的关系。

相对路径里常使用“../”来表示上一级目录,如果有多个上一级目录,可以使用多个“../”表示为上上级

如果链接到当前目录下,只需输入被链接对象的名称即可,如:aaa.jpg;

如果链接到下一级目录,只需输入该目录名,或者./文件名,再输入对象名称即可,如:images/aaa.jpg或者./images/aaa.jpg;

综上所述,如引用上上级目录下的css文件夹中的style.css文件,代码为:../../css/style.css 

相对路径适合网站的内部引用,只要是在同一个站点,就可以自由的在文件之间构建链接,不受站点所处服务器的影响,这种书写形式省略了绝对路径中相同的部分,可以在站点文件所在服务器地址发生改变时,文件夹的内部链接不会出现问题。

什么是根目录?根目录是指逻辑驱动器的最上一级目录,本地根目录例如C盘、D盘等;

网站根目录指的是一个服务器上同时放置多个站点使用,或者一个大规模站点需要放置在几个服务器上。

根目录用“/”表示,例如D盘下images文件夹里名称为“aaa.jpg”文件,代码为:/images/aaa.jpg。

参考:https://www.w3h5.com/post/44.html

【Python全栈-HTML】HTML引入文件的绝对路径、相对路径、根目录的更多相关文章

  1. python 全栈开发,Day29(昨日作业讲解,模块搜索路径,编译python文件,包以及包的import和from,软件开发规范)

    一.昨日作业讲解 先来回顾一下昨日的内容 1.os模块 和操作系统交互 工作目录 文件夹 文件 操作系统命令 路径相关的 2.模块 最本质的区别 import会创建一个专属于模块的名字, 所有导入模块 ...

  2. python 全栈开发,Day8(文件操作)

    一.文件操作流程 文件以什么编码存储的,就以什么编码打开 参数: 1.文件路径 2.编码方式,encode 3.执行动作(打开方式):只读,只写,追加,读写,写读... 打开一个已经存在的文件 f = ...

  3. python全栈开发_day9_脚本文件和函数的基本运用

    一:脚本文件 1)脚本文件的操作 import sys p=sys.argv print(p) #将python代码放到cmd中运行,在后面添加参数,会自动保存在输出的列表中,默认输出的列表中只有一个 ...

  4. python全栈开发学习_内容目录及链接

    python全栈开发学习_day1_计算机五大组成部分及操作系统 python全栈开发学习_day2_语言种类及变量 python全栈开发_day3_数据类型,输入输出及运算符 python全栈开发_ ...

  5. Python全栈【异常处理】

    Python全栈[异常处理] 本节内容: 1.异常处理 2.什么时候用异常处理 异常处理 1.异常处理: 异常就是程序运行时发生错误的信号,异常处理是在编程过程中为了增加友好性,在程序出现bug时一般 ...

  6. python 全栈开发,Day117(popup,Model类的继承,crm业务开发)

    昨日内容回顾 第一部分:权限相关 1. 权限基本流程 用户登录成功后获取权限信息,将[权限和菜单]信息写入到session. 以后用户在来访问,在中间件中进行权限校验. 为了提升用户体验友好度,在后台 ...

  7. 老男孩Python全栈第2期+课件笔记【高清完整92天整套视频教程】

    点击了解更多Python课程>>> 老男孩Python全栈第2期+课件笔记[高清完整92天整套视频教程] 课程目录 ├─day01-python 全栈开发-基础篇 │ 01 pyth ...

  8. Python全栈【Socket网络编程】

    Python全栈[socket网络编程] 本章内容: Socket 基于TCP的套接字 基于UDP的套接字 TCP粘包 SocketServer 模块(ThreadingTCPServer源码剖析) ...

  9. Python全栈开发【面向对象进阶】

    Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...

  10. Python全栈开发【面向对象】

    Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...

随机推荐

  1. Python-Django 视图层

    1 request对象 method:请求方式 GET:get请求的参数(post请求,也可以携带参数) POST:post请求的参数(本质是从bdoy中取出来,放到里面了) COOKIES---&g ...

  2. Monkey自动化脚本(一)

    1.Monkey简介 Monkey-猴子,通过Monkey程序模拟用户触摸屏幕.滑动Trackball. 按键等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常,主要用于Android ...

  3. python selenium Chrome模拟手机浏览器

    在做移动端页面测试时可以利用Chrome mobile emulation 辅助完成页面的适配问题,但是目前手机市场上的型号居多我们也没有办法通过人工的模式一一的去适配,所以这里考虑到通过自动化的模式 ...

  4. linux下Flask框架搭建简单网页

    开始安装FLASK需要创建一个虚拟环境,虚拟环境可以不干扰正在使用的系统环境,避免影响,并且也不需要完全的root权限,更加安全可靠. 搭建环境 Python3.4 进入到microblog目录下创建 ...

  5. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  6. vuejs使用jsx语法

    想要vuejs项目支持jsx语法,需要一些插件 babel-plugin-transform-vue-jsx Babel plugin for Vue 2.0 JSX 使用方法: 安装 npm ins ...

  7. 【Android】setXfermode属性

    1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode  当覆盖 ...

  8. 5.基于优化的攻击——CW

    CW攻击原论文地址——https://arxiv.org/pdf/1608.04644.pdf 1.CW攻击的原理 CW攻击是一种基于优化的攻击,攻击的名称是两个作者的首字母.首先还是贴出攻击算法的公 ...

  9. RecyclerView滑动到指定位置,并置顶

    一般我们用 mRecycleview.smoothScrollToPosition(0)滑动到顶部,具有滚动效果,但是如果我们想滚动到任意指定位置,那么smoothScrollToPosition() ...

  10. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...