What is a path? Why is this something developers should care about?

A path is simply the location of a file or directory within a file system,1 though it’s not exactly an address. A path is both the location and how to get there (if this definition seems complicated, hopefully a few examples (coming shortly!) will clear things up). The reason that web developers need to understand paths is because the web is about URLs (such as http://example.com/index.html), and URLs are primarily paths. This is evident in the URL syntax: scheme://domain:port/path?query_string#fragment_id.2

The domain part of the URL maps to the IP address of a remote computer. When accessing that remote computer using a given scheme (HTTP) and port (by default, 80), you are accessing a portion of the remote computer’s file system. The layout of this accessible portion of the file system corresponds to the path part of the URL.

For the remainder of this post, we’ll use the fictional “example.com” as an example. Example.com has the following directory structure on their web host:

/ (The web root)
css
styles.css
files
example.pdf
index.html
img
footer.png
header.png
index.html

When a user navigates to http://example.com/index.html in their browser, they are accessing the above file system and the web server “serves” them index.html. If a user wanted to download the example.pdf, they would navigate to http://example.com/files/example.pdf.

Types of paths

There are two ways to specify a path: absolute or relative. Absolute paths are a bit simpler, so we’ll start with them.

ABSOLUTE PATHS

An absolute path gives the location of a file or directory in reference to a root directory. For example.com (as for all websites!), the root directory is the web root (or /). Let’s look at some examples.

Given example.com, we’d like /index.html to include a link to the styles.css file. Using absolute syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="/css/styles.css">.

If you wanted to add the header.png image to /index.html using an absolute path, it would look like this: <img src="/img/header.png">.

Let’s look at a few more examples of absolute paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="/files/example.pdf">. And we’ll add a link to the styles.css in the head<link rel="stylesheet" href="/css/styles.css">.

Note that all of the absolute paths start with /. Basically, you can always combine a domain (example.com) with an absolute path to get a fully qualified URL.

Speaking of fully qualified URLs, that’s the alternative way of writing an absolute path:<link rel="stylesheet" href="http://example.com/css/styles.css">. I don’t recommend it, though.

RELATIVE PATHS

A relative path is a path to a given file or directory starting from another file or directory. To make this simple, we’ll look at several examples.

Given example.com, we’d like /index.html to include a link to the styles.css file. Using relative syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="css/styles.css">. This translates to “look in the css directory that is in the same directory as index.html and get the styles.css file from there.” Note: the difference between this relative path and the absolute one is the omission of the leading /.

If you wanted to add the header.png image to /index.html using a relative path, it could look like this: <img src="img/header.png">. It could also look like this: <img src="./img/header.png">. is a “special character” when used like this. It means “start at the current directory.”

Let’s look at a few more examples of relative paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="example.pdf"> (or <a href="./example.pdf">). So far, so good. Now let’s add the styles.css in the head. Uh oh. So far, we’ve always looked in the current directory or down. How to go up?

.. is the “special character” to go up one directory. So, back to our example. To add styles.css in the head of /files/index.html, you’d use the path ../css/styles.css. To go up two directories, use ../../. Three directories: ../../../. Etc.

Which should I use? Relative or absolute? Or… does it matter?

Given the ability to link to files using a relative or absolute path or a fully qualified URL, does it matter which one we use?

For the end user, not really. I’ve seen some articles that make some strange claims about performance (such as local absolute paths go through DNS, but relative paths don’t!) andSEO benefits, but the only practical difference is a few bytes saved by using relative paths. I created a test page to demonstrate the lack of difference athttp://jeffreybarke.net/tests/paths/.

The primary reason to prefer one to another is for the benefit of the web developer! For instance, relative links make it very easy to move “chunks” of a site from one location on a web server to another without having the links break. As long as the chunks maintain their relative structure, they can be moved to any subdirectory at will.

The primary disadvantage to using relative links shows up when you start creating larger, more dynamic sites. Each subdirectory of the site requires a different relative path to get at common assets (such as style sheets or images). Since large, dynamic sites typically have a shared header file, it makes more sense to use absolute links.

Both relative and absolute paths make it easy to work on a site locally and then move the files to a remote web server. With relative paths, the local site structure doesn’t need to match the remote one; with absolute paths, it does. (You’ll also need to run a web server locally to use absolute paths, but that’s also a necessity to run a dynamic site locally.)

The previous paragraph hints at the reason why I don’t recommend using fully qualified URLs—without manipulating DNS entries (with hosts ,for example), it’s impossible to work locally. The local files will always point to the remote server!

References

  1. “Path (computing).” (n.d.). In Wikipedia. Retrieved 15 June 2013, fromhttp://en.wikipedia.org/wiki/Path_(computing)
  2. “Uniform resource locator.” (n.d.). In Wikipedia. Retrieved 15 June 2013, fromhttp://en.wikipedia.org/wiki/Uniform_resource_locator

原文网址:http://jeffreybarke.net/2013/06/paths-and-urls-relative-and-absolute/

Html中src、href的相对路径与绝对路径的更多相关文章

  1. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  2. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  3. web项目中,视图层中关于相对路径和绝对路径

    1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...

  4. 容易混淆的url src href

    新手刚学习的时候会分不清 url  src  href这些,不知道什么情况下应该用哪个.现在让我来理一理. url 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网 ...

  5. JSP、Servlet中的相对路径和绝对路径 页面跳转问题

    转自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...

  6. 认识HTML中文本、图片、链接标签和路径

    前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...

  7. java web中的相对路径和绝对路径

    以往一直没注意javaweb中的相对路径和绝对路径问题,有时有问题了,才想起去看看是否是路径的问题,一直对路径问题都是一知半解.今天就姑且记录一下,毕竟事如春梦了无痕嘛,倘不记之笔墨,未免有辜彼苍之厚 ...

  8. JSP中<base href="<%=basePath%>">作用

    通常在JSP页面开通有如下代码: <% String path = request.getContextPath(); String basePath = request.getScheme() ...

  9. JSP页面中 <base href="<%=basePath%>">

    base标记是一个基链接标记,是一个单标记.用以改变文件中所有连结标记的参数内定值.它只能应用于标记<head>与</head>之间.你网页上的所有相对路径在链接时都将在前面加 ...

  10. 编译过程中,termcap.h 文件找不到路径 licli.a终于生成

    编译过程中,termcap.h      文件找不到路径   查看是linux  源码下找不到termcap.h文件   安装了所有关于*cap*的源码包也不起作用     今天终于解决了这个问题,搜 ...

随机推荐

  1. PHP算法 《图》 之 理论基础

    转载自:http://www.cnblogs.com/skywang12345/p/3691463.html Ⅰ 图的基本概念 1. 图的定义 定义:图(graph)是由一些点(vertex)和这些点 ...

  2. jq 图片裁剪

    1.html <div class="jcropbox" style="display: none"> <img src="&quo ...

  3. git 教程 git.oschina.net

    官方说明:http://git.oschina.net/oschina/git-osc/wikis/%E5%B8%AE%E5%8A%A9#ssh-keys 安装完成后,在开始菜单里找到"Gi ...

  4. C++中new的用法

    new int;//开辟一个存放整数的存储空间,返回一个指向该存储空间的地址(即指针) new int(100);//开辟一个存放整数的空间,并指定该整数的初值为100,返回一个指向该存储空间的地址 ...

  5. X-Plane飞行模拟器购买安装

    要玩起X-Plane第一个步骤当然是购买了,要购买其实非常简单,只需要一张能够支持MasterCard或者其他外币结算的信用卡,在http://www.x-plane.com/官网上购买即可,比逛淘宝 ...

  6. vs 2013 编译zlib

    zlib下载地址: http://pan.baidu.com/s/1pJqTcoV \zlib-1.2.8\contrib\vstudio\vc10\zlibvc.sln 打开这个文件, 根据提示, ...

  7. PHP做支付宝即时到账需注意

    注意:1按照人家的参数规则,规范填写参数列表:2商家信息填写正确:3然后提交走后注意此时告别了咱们的服务器,将在咱们服务器的订单信息提交到了支付宝服务器,然后支付宝服务器进行支付宝支付流程,当如果支付 ...

  8. Excel等外部程序点击链接会带上IE信息的bug

    今天碰到一个问题,在Excel内点击链接到默认浏览器Chrome打开,奇怪的是服务端收到的Session一直对不上. 查了很久发现这个Excel到Chrome的跳转竟然带上了IE的Cookie 和 U ...

  9. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  10. 检测js代码是否已加载的判断代码

    该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...