网页文件的存取路径有3种:物理路径、绝对路径和相对路径。

物理路径就是你的文件放在主机上的具体位置,例如:D:\\image\\1.jpg 这种格式,该方法可以很快确定出你的文件,但是在网页显示路径基本很少用。

绝对路径是以网站的根目录(www)作为起始点,某文件在该项目中具体位置信息。比如你的网站放在 /var/www 中,那么 /var/www 就是你的根目录。如果文件 head.jpg 放在该目录的 image 里,那么 head.jpg 的路径信息就是 /image/head.jpg。但是在css和js文件的路径导航中该路径通常无法获得正确的信息。

相对路径就是指当前网页所在的目录为起始点,根据需要一级一级往上找或往下找。

以下为建立路径所使用的几个特殊符号,及其所代表的意义。
  "." --代表目前所在的目录。
  ".."--代表上一层目录。
  "/" --代表根目录。

如果你的目标文件是 /app/views/home/index.php,在该文件想引用 /public/css/style.css,那么文件的相对路径则是:../../../public/css/style.css 。

html中的图片、css、js等路径加载问题的更多相关文章

  1. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  2. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  3. 图片及js的预加载

    loadImage : function (url, dataObj, callback, errorCallback) { var self = this; var img = new Image( ...

  4. Oracle直接路径加载--append的深度解析

    ㈠ 直接路径加载和buffer cache              直接路径插入的数据不经过buffer cache,从PGA直接把数据格式化成Oracle块       然后由普通的Oracle ...

  5. 转:按需加载html 图片 css js

    按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字. ...

  6. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  7. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  8. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  9. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

随机推荐

  1. 源代码管理工具-GIT

    源代码管理工具-GIT ---- 一. 掌握 - git 概述 1. git 简介? 什么是git? git是一款开源的分布式版本控制工具在世界上所有的分布式版本控制工具中,git是最快.最简单.最流 ...

  2. acm课程练习2--1013(同1014)

    题目描述 There is a strange lift.The lift can stop can at every floor as you want, and there is a number ...

  3. apache-tomcat-7.0.70无法进入Manager管理App项目

    在tomcat文件夹找到conf文件夹中的tomcat-user.xml文件,用记事本打开,在最下面可以看到tomcat默认把用户注释掉了,也就是说打开tomcat主页是进不去管理页面的.方法如下:找 ...

  4. 前端知识复习一(css)

    1.清楚浮动 父盒子高度为0,子盒子全部定位.浮动.子盒子不会撑开父盒子,下面的盒子会顶上来 清楚方法: clear:both: overflow:hidden: 加空标签 单/双 //双标签 .cl ...

  5. 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json

    微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...

  6. .Net 中的反射(查看基本类型信息)

    反射概述 和Type类 1.反射的作用 简单来说,反射提供这样几个能力:1.查看和遍历类型(及其成员)的基本信息和程序集元数据(metadata):2.迟绑定(Late-Binding)方法和属性.3 ...

  7. hibernate事务并发问题(脏读,不可重复读,幻读)

    脏读  dirty read:  读了别的事务没有提交的事务, 可能回滚, 数据可能不对. 不可重复读 non repeatable read: 同一个事务里前后读出来的数据不一样, 被另一个事务影响 ...

  8. Android Camera Api的心得

    (一) 前言最近看Camera的api,觉得写的真的不错.现在翻译过来,给大家分享分享,译文可能不太好,大家将就着看哈. (二) 正文1. CameraCamera是Android framework ...

  9. 使用float和display:block将内联元素转换成块元素的不同点

    使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...

  10. C++Builder String 转 char* (转)

    源:http://blog.csdn.net/bannico/article/details/7577728 使用C++ Builder 处理字符串经常会遇到兼容性问题. 这次要将String 类型 ...