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. ORACLE 数据库简单测试

    ORACLE 数据库简单测试 操作系统:Windows 7 – ORACLE:oracle database 10.2.0.4 一.目的 测试 启动监听程序.数据库  非同一个用户的情况,用户是否可以 ...

  2. 欢迎使用 Markdown 编辑器写博客

    本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML ...

  3. CGContextRef一点用法

      quartz 是主要的描画接口,支持基于路径的描画.抗锯齿渲染.渐变填充模式.图像.颜色.坐标空间变换.以及PDF 文档的创建.显示.和分析.UIKit 为Quartz 的图像和颜色操作提供了Ob ...

  4. iOS支付 IPAPayment demo iTunes Conection里面添加测试帐号,添加商品,实现购买过程

    https://github.com/ccguo/IAPPaymentDemo 发一个demo

  5. mysql更新密码为空

    1.进入命令行 mysql -u root -p 'oldpassword'; 2 修改root用户的密码:mysql> update mysql.user set password=PASSW ...

  6. 关于jQuery的cookies插件2.2.0版设置过期时间的说明

    欢迎转载,转载请注明作者RunningOn jQuery应该是各位用JavaScript做web开发的常用工具了,它有些插件能非常方便地操作cookie. 不过非常让人郁闷的是,网上几乎所有人对于这些 ...

  7. Bootstrap_Javascript_弹出框

    HTML: <button type="button" class="btn btn-default" data-container="body ...

  8. getJSON回调函数不执行问题?

    利用getJSON异步请求时,回调函数不执行,不知道是什么问题? php 返回数据 header("Content-type:text/json"); echo json_enco ...

  9. 【技术宅4】如何把M个苹果平均分给N个小朋友

    $apple=array('apple1','apple2','apple3','apple4','apple5','apple6','apple7','apple8','apple9','apple ...

  10. 技术大牛面试 http://www.itmian4.com/forum.php?mod=viewthread&tid=3824

    不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人,NOI金牌,开源社区名人,三年级开始写Basic...在跪拜之余我们不禁要想,和这些牛人比,作为绝大部分技 ...