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. 【转】 iOS KVO KVC

    原文: http://www.cocoachina.com/industry/20140224/7866.html Key Value Coding Key Value Coding是cocoa的一个 ...

  2. jdk配置环境变量(windows)

    1.配置环境变量:右击"我的电脑"-->"高级"-->"环境变量"1)在系统变量里新建"JAVA_HOME" ...

  3. SGU 115.Calendar

    连水3道,还能更水么... #include <stdio.h> using namespace std; ] = {, , , , , , , , , , , , }; int n, m ...

  4. javascript——集合类

    /** * Created by Administrator on 2015/4/14. */ function Set() { this.values = {}; this.n = 0; this. ...

  5. grep操作

    这个程序的名称来自Unix文本编辑器ed类似操作的命令: g/re/p 这个命令搜索整个文件中匹配给定正则表达式的文本行,并显示出来.有很多不同的命令行用于改变grep的默认行为,包括显示出不匹配的文 ...

  6. MOS管(场效应管)导通条件

    场效应管的导通与截止由栅源电压来控制,对于增强型场效应管来说,N沟道的管子加正向电压即导通,P沟道的管子则加反向电压.一般2V-4V就可以了.    但是,场效应管分为增强型(常开型)和耗尽型(常闭型 ...

  7. PHP面向对象(OOP):PHP5接口技术(interface)

    PHP与大多数面向对象编程语言一样,不支持多重继承.也就是说每个类只能继承一个父类.为了解决这个问题,PHP引入了接口,接口的思想是指定了一个实现了该接口的类必须实现的一系列方法.接口是一种特殊的抽象 ...

  8. 隐藏和显示 ng-show ng-hide

    <div ng-controller='DeathraymenueController'>    <button ng-click="toggleMenue()" ...

  9. 高级停靠(Dock)技术的实现

    高级停靠(Dock)技术的实现 介绍 所谓停靠就是可以用鼠标拖动窗体或者控件,并将其从一个父窗体移出或者移动到另一个父窗体上,可以按水平,垂直方向整齐排列, 并且可以停靠在分页控制组件上.下面的示意图 ...

  10. ASP.NET MVC 定义JsonpResult实现跨域请求

    1:原理 在js中,XMLHttpRequest是不能请求不同域的数据,但是script标签却可以,所以可以用script标签实现跨域请求.具体是定义一个函数,例如jsonp1234,请求不同域的ur ...