Html中src、href的相对路径与绝对路径
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
- “Path (computing).” (n.d.). In Wikipedia. Retrieved 15 June 2013, fromhttp://en.wikipedia.org/wiki/Path_(computing)
- “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的相对路径与绝对路径的更多相关文章
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- web项目中,视图层中关于相对路径和绝对路径
1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...
- 容易混淆的url src href
新手刚学习的时候会分不清 url src href这些,不知道什么情况下应该用哪个.现在让我来理一理. url 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网 ...
- JSP、Servlet中的相对路径和绝对路径 页面跳转问题
转自:http://blog.csdn.net/wym19830218/article/details/5503533/ 1.JSP.Servlet中的相对路径和绝对路径 前提:假设你的Http地址为 ...
- 认识HTML中文本、图片、链接标签和路径
前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...
- java web中的相对路径和绝对路径
以往一直没注意javaweb中的相对路径和绝对路径问题,有时有问题了,才想起去看看是否是路径的问题,一直对路径问题都是一知半解.今天就姑且记录一下,毕竟事如春梦了无痕嘛,倘不记之笔墨,未免有辜彼苍之厚 ...
- JSP中<base href="<%=basePath%>">作用
通常在JSP页面开通有如下代码: <% String path = request.getContextPath(); String basePath = request.getScheme() ...
- JSP页面中 <base href="<%=basePath%>">
base标记是一个基链接标记,是一个单标记.用以改变文件中所有连结标记的参数内定值.它只能应用于标记<head>与</head>之间.你网页上的所有相对路径在链接时都将在前面加 ...
- 编译过程中,termcap.h 文件找不到路径 licli.a终于生成
编译过程中,termcap.h 文件找不到路径 查看是linux 源码下找不到termcap.h文件 安装了所有关于*cap*的源码包也不起作用 今天终于解决了这个问题,搜 ...
随机推荐
- 安装brew
brew brew 又叫Homebrew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件, 只需要一个命令, 非常方便. 安装brew 打开终端窗口, 粘贴以下脚本: ru ...
- iOS 集成支付宝遇到的问题(续)
调起支付宝进行支付时提示private key is null ,碰到这个问题有两种解决方案 第一种. 将私钥转成PKCS8替换一下原私钥即可 1.生成私钥pem, 执行命令openssl genr ...
- sql server主动推送客户端更新数据
小谈需求: 最近工作上接到一个需求,做一个web展示数据的报表,最好能实时更新,不限制所用技术. 第一个问题:web服务器推送给浏览器新数据,一开始我想到的最快的最简单的方法就是 在web页面上js轮 ...
- SGU 131.Hardwood floor
时间限制:0.25s 空间限制:4M 题意: 给出 n*m (1≤n.m≤9)的方格棋盘,用 1*2 的矩形的骨牌和 L 形的(2*2 的 去掉一个角)骨牌不重叠地覆盖,求覆盖满的方案数. Solut ...
- SGU 146.The Runner
时间限制:0.25s 空间限制:4M 题意: 一个人在一个周长为L的圆上跑,每个时间段(Ti)的速度(Vi)不一样,问最后他离起点的圆弧距离,周长是个有四位小数的浮点数,其它全是整数. Solutio ...
- spring 构造注入 异常 Ambiguous constructor argument types - did you specify the correct bean references as constructor arguments
你可能在做项目的时候,需要在项目启动时初始化一个自定义的类,这个类中包含着一个有参的构造方法,这个构造方法中需要传入一些参数. spring提供的这个功能叫“构造注入”, applicationCon ...
- sql语句复制表
1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...
- 定制linux中的Gtk theme<一>如何设置窗口按钮的多态效果
GTK主题之个人理解: GTK 主题引擎(包含代码所需的图形元素) + 主题配置文件(gtkrc文件)+ 数据资源文件(如图片等) 三者所呈现给用户的视觉风格效果 GTK拥有一套大量的widg ...
- java高精度进制转换
POJ1131 由于本题只有小数部分(整数部分均为0),故在进制转换的之后只能自己手写转换方法了. 8进制转换10进制的方法为,以0.75为例,应是7*8^-1 + 5*8^-2.所以呢,可以 ...
- Windows开发技术的历史
原文地址:http://www.kuqin.com/windows/20090315/40172.html Windows已经有22年的历史,这22年来,微软官方主力推行的编程语言与API有四个分水岭 ...